---
title: "Guía de instalación del ADK"
slug: "adk-setup-guide"
category: "Introducción"
locale: "es"
hosts: "ninox"
order: 4.5
description: "Conecta Cursor con tu base de datos de Ninox y los widgets de Arc Rider en 10 minutos."
---

# Guía de instalación del ADK

## Tu editor de IA ya conoce tu base de datos de Ninox: listo en 10 minutos

Construyes interfaces de Ninox con los widgets de Arc Rider y quieres ayuda para escribir el código. Alguien que conozca tu base de datos, la sintaxis y cómo funcionan los widgets.

Eso es el Arc Rider Developer Kit (ADK). Conecta un editor de IA con tu base de datos de Ninox y nuestra documentación de widgets. Describes lo que quieres. La IA escribe el código.

No hace falta saber programar. Esta guía usa Cursor. Los mismos comandos valen para Claude Code.

![Guía de instalación del ADK: carpeta del proyecto y código del widget en Cursor](/docs-assets/adk/01-folder.png)

## Qué tienes al final

```text
mi-proyecto-ninox/
├── .cursor/rules/       ← Reglas para la IA (sintaxis NinoxScript, propiedades)
├── docs/                ← Documentación de los widgets
├── ninox/               ← El esquema de tu base de datos (tablas, campos, relaciones)
├── spaces/              ← Tus configuraciones de widgets (archivos .arc)
└── package.json
```

La IA lee estos archivos en segundo plano. Tú describes lo que hay que construir.

## Antes de empezar

- Una cuenta de Ninox con widgets de Arc Rider activos – [pedir widgets](/widgets)
- [Node.js](https://nodejs.org) 18 o superior. Instala la versión LTS una sola vez.

![Node.js, Ninox y Arc Rider](/docs-assets/adk/02-nodejs.png)

## Paso 1: Instalar Cursor

[Cursor](https://cursor.com) es un editor de código con IA integrada. Los archivos se quedan en tu ordenador. Cuando el esquema de Ninox está en local, la IA conoce tus tablas y campos. El plan gratuito basta para empezar.

1. Entra en [cursor.com](https://cursor.com).
2. Descarga la versión de tu sistema.
3. Instálala y crea una cuenta gratuita.

![Descargar Cursor](/docs-assets/adk/03-cursor.png)

## Paso 2: Crear la carpeta del proyecto

Crea una carpeta vacía, por ejemplo `mi-proyecto-ninox`. En Cursor elige **File → Open Folder**, o arrastra la carpeta a la ventana.

![Abrir la carpeta del proyecto en Cursor](/docs-assets/adk/04-open-folder.png)

## Paso 3: Instalar el ADK

Abre la terminal en Cursor (**Terminal → New Terminal**, o `Ctrl` + `` ` ``).

```bash
npm install @arcrider/developer-kit
npx arc-rider-init
```

El paquete incluye la documentación de los widgets, las reglas de la IA y la herramienta de Ninox que descarga el esquema. No hace falta un segundo paquete.

`arc-rider-init` crea:

- `.cursor/rules/` – reglas de IA para NinoxScript y las propiedades de los widgets
- `docs/` – la referencia de widgets
- `ninox/` – aquí irá el esquema de tu base de datos
- `spaces/` – tus configuraciones, por ejemplo `spaces/dashboard/main.arc`

![Instalación del ADK en la terminal y las carpetas nuevas en la barra lateral](/docs-assets/adk/05-install.png)

## Paso 4: Introducir los datos de acceso de Ninox

### Crear una API key

1. Abre tu instancia de Ninox en el navegador.
2. Haz clic en el icono de tu perfil.
3. Ve a **Ajustes → API Keys**.
4. Crea una clave y cópiala.

Las API keys dan acceso completo a tus datos de Ninox. No las compartas. `config.yaml` se queda en tu equipo y no se sube a Git.

![Crear una API key en los ajustes de Ninox](/docs-assets/adk/06-api-key.png)

### Dominio, ID del workspace e ID de la base de datos

Los IDs están en la URL del navegador cuando la base de datos está abierta.

**Public Cloud** (`app.ninox.com`):

- Ejemplo: `https://app.ninox.com/#/teams/Xk7mNpQr2sT4wYz/database/a9b3c7d2e1f/`
- ID del workspace: la parte después de `teams/`
- ID de la base de datos: la parte después de `database/`
- Dominio en la config: siempre `https://api.ninox.com` (no `app.ninox.com`)

**Private Cloud:** usa tu URL de API, por ejemplo `https://meinefirma.ninoxdb.com`. Lee los IDs de la URL del mismo modo.

### Archivo de configuración

`arc-rider-init` ya ha creado `ninox/config.yaml`. Rellena `environments.dev`:

```yaml
environments:
  dev:
    domain: https://api.ninox.com
    apiKey: tu-api-key
    workspaceId: TU_WORKSPACE_ID
    databases:
      - id: "TU_DATABASE_ID"
        name: "Mi proyecto"
```

`app.ninox.com` es solo la interfaz web. El dominio de la API es `https://api.ninox.com`.

![Datos de acceso en ninox/config.yaml](/docs-assets/adk/07-config.png)

## Paso 5: Descargar el esquema

```bash
npm run ninox:download
```

Si hay varias bases de datos, eliges una. Con una sola se selecciona sola. Opcional: `--db=TU_DB_ID`.

Después, `ninox/src/Objects/` tiene un archivo por tabla, con campos, tipos y relaciones. La IA usa esos nombres reales.

![Esquema de Ninox descargado en Cursor](/docs-assets/adk/08-schema.png)

## Tu primer prompt

Abre el agente de Cursor (`Cmd+L` en Mac, `Ctrl+L` en Windows) y prueba:

```text
Crea un space nuevo "dashboard" y monta un layout de dashboard
para la tabla "Pedidos".
Arriba una barra de KPI: pedidos abiertos, importe total, importe medio.
Debajo una tabla con las columnas: título, cliente, importe, estado como badge.
```

La IA escribe `spaces/dashboard/main.arc`. Cada función tiene su propio space. Usa `shared/` para colores, tipografía y piezas que comparten varios spaces.

![Primer prompt y código del widget generado](/docs-assets/adk/09-prompt.png)

## Pegar el código en Ninox

1. Abre `spaces/dashboard/main.arc`.
2. Copia todo el archivo.
3. Pégalo en un campo de fórmula de Ninox, allí donde debe aparecer el widget.

![Widget terminado en Ninox](/docs-assets/adk/10-ninox.png)

Si prefieres la terminal, configura el campo en `ninox/ninox-mapping.yaml` y ejecuta `npm run ninox:push`.

`ninox:upload` puede cambiar la estructura de la base de datos. El flujo normal solo necesita `ninox:download` (leer) y `ninox:push` (escribir el código en un campo de fórmula).

## Consejos para mejores prompts

Nombra tablas y campos:

```text
Usa la tabla "Contactos" y muestra
los campos "Nombre", "Email", "Teléfono" y "Estado".
```

Cambia una cosa cada vez:

```text
Añade paginación con 20 filas por página.
Muestra la columna "Importe" como número con €.
```

## Preguntas frecuentes

**¿Tengo que saber programar?**
No. Describes lo que quieres. La IA escribe el código. Tú lo pegas en Ninox.

**¿Qué es npm?**
npm viene con Node.js. Descarga paquetes. Lo necesitas para la instalación. Después trabajas en Cursor.

**¿Necesito la versión de pago de Cursor?**
No. El plan gratuito basta para empezar.

**¿Qué pasa si cambia mi esquema?**
Vuelve a ejecutar `npm run ninox:download`.

**¿Funciona sin los widgets de Arc Rider?**
No. Sin los widgets falta en Ninox el código global sobre el que se construyen las configuraciones. Necesitas una suscripción activa. Pídelos en la [tienda de widgets](/widgets).

## Resumen

| Paso | Qué ocurre | Tiempo |
| --- | --- | --- |
| 1. Instalar Cursor | Descargar el editor de IA | 2 min |
| 2. Crear la carpeta | Nueva carpeta de proyecto | 30 s |
| 3. Instalar el ADK | Instalar el paquete y crear la estructura | 2 min |
| 4. Datos de acceso | API key, dominio, ID del workspace | 3 min |
| 5. Cargar el esquema | Descargar la estructura de la base de datos | 1 min |
| Primer prompt | La IA escribe el código del widget | Al momento |

```bash
npm install @arcrider/developer-kit
npx arc-rider-init
npm run ninox:download
```