Cursor, MCP y CLI

Si programas o trabajas con un editor con inteligencia artificial como Cursor, puedes construir y modificar tu sitio de MGPanel desde tu computadora: pedirle a la IA que lea tus páginas, que cree una sección nueva o que programe una calculadora, y revisar el resultado antes de publicarlo. Esta guía explica el camino recomendado —Cursor conectado por MCP— y la CLI como complemento para quien prefiere trabajar con archivos.

1. Sin hosting que administrar

MGPanel no funciona como un hosting tradicional (Hostinger, cPanel y similares). No hay servidor que configurar, ni FTP, ni base de datos que instalar, ni certificados SSL que renovar: el servidor, el SSL, las copias de seguridad y la entrega de imágenes los gestiona MGPanel. Tú te ocupas solo del contenido y del código de tu sitio.

Por eso no existe un «acceso al hosting» para copiar archivos. Tu sitio vive en tu cuenta como páginas y secciones, cada sección con su HTML, CSS y JavaScript, y llegas a ellas por tres caminos:

Los tres escriben en el borrador de tu sitio. Nada llega a tu web pública hasta que tú lo publicas.

2. Cuenta de pruebas

Para experimentar con libertad te recomendamos una cuenta aparte, sin tocar la de tu sitio en producción:

1. Ve a Cuentas → Nueva cuenta y crea una cuenta con plan Gratis (cada usuario puede tener una cuenta gratis activa).
2. Copia ahí tu sitio con la CLI (ver punto 5.3) o empieza desde cero.
3. Conecta Cursor a esa cuenta y prueba todo lo que quieras.
4. Cuando el resultado te convenza, aplica los cambios en tu cuenta real con el mismo flujo.

Si prefieres trabajar directo en tu cuenta, también es seguro: cada cambio queda en borrador y lo revisas antes de publicar. El borrador se ve en https://draft-<tu-cuenta>.mgpanel.co, una dirección que los buscadores no indexan.

3. Conectar Cursor por MCP

MCP (Model Context Protocol) es el estándar con el que un asistente de IA usa herramientas externas. MGPanel tiene su propio servidor MCP: una vez conectado, Cursor puede listar tus páginas, leer el código de cada sección, editarlas, crear páginas nuevas y gestionar tus funciones, siempre dentro de los permisos de la llave.

3.1 Crea una llave de conector

1. En la cuenta donde vas a trabajar, entra a Configuración → API y pulsa Crear llave de conector.
2. Ponle un nombre que la identifique, por ejemplo Cursor · pruebas.
3. En Permisos por módulo pulsa Ninguno y marca solo lo necesario: Sitio web y Funciones. Suma Blog, Formularios o Datos si los vas a usar.
4. Pulsa Crear y copia la llave: se muestra una sola vez.

En la misma pantalla, la tarjeta Conectar con IA (MCP) muestra la URL de tu cuenta, que necesitas en el siguiente paso.

3.2 Agrega MGPanel a Cursor

Crea el archivo .cursor/mcp.json en la carpeta de tu proyecto (o ~/.cursor/mcp.json si lo quieres disponible en todos tus proyectos) con este contenido, cambiando <tu-cuenta> por el nick de tu cuenta:

{
  "mcpServers": {
    "mgpanel-pruebas": {
      "url": "https://app.mgpanel.co/mcp/<tu-cuenta>",
      "headers": {
        "Authorization": "Bearer ${env:MGPANEL_MCP_KEY}"
      }
    }
  }
}

• ${env:MGPANEL_MCP_KEY} hace que Cursor lea la llave de una variable de entorno de tu equipo. Así la llave no queda escrita en el proyecto ni termina en Git. Define la variable MGPANEL_MCP_KEY con tu llave y reinicia Cursor.
• Si prefieres pegar la llave directamente ("Bearer tu-llave"), no compartas ni subas ese archivo a ningún repositorio.
• El nombre mgpanel-pruebas es libre. Si conectas también tu cuenta real, agrega una segunda entrada con otro nombre, su propia URL y su propia llave.

Guarda el archivo, reinicia Cursor y comprueba en la sección MCP de la configuración de Cursor que el servidor aparece activo y con herramientas.

3.3 Primeras instrucciones

Empieza con algo de solo lectura para confirmar la conexión, y luego pide cambios concretos:

• «¿A qué cuenta de MGPanel estás conectado? Lista las páginas del sitio.»
• «Lee la página de inicio y explícame cómo están armadas sus secciones y su CSS.»
• «Crea la página /calculadora con una sección que estime el costo de reparación según marca, año y kilometraje. Respeta el estilo del sitio.»

Antes de crear páginas, Cursor consulta la guía de módulos del servidor. Así inserta el blog, los formularios o la tienda con sus shortcodes (por ejemplo {{formulario=...}}) en vez de reprogramarlos, y no toca las páginas del sistema.

3.4 Revisa y publica

1. Abre el borrador en https://draft-<tu-cuenta>.mgpanel.co o en Sitio Web → Editar Web.
2. Si todo está bien, en Editar Web ve a Archivo → Solicitar publicación.
3. Luego Archivo → Historial, abre la solicitud Pendiente y pulsa Aprobar.

El historial guarda cada versión, así que puedes volver atrás si algo no te convence. Detalle en Editar Web → Versionado.

4. Calculadoras y funciones a la medida

Una herramienta interactiva —una calculadora de riesgo, de costo de reparación o de cuotas— se arma con piezas que ya tienes en MGPanel:

• JavaScript en la sección. La lógica corre en el navegador del visitante. Cada sección tiene su propio HTML, CSS y JavaScript, y el sitio tiene además un CSS y un JavaScript generales. Para cálculos con fórmulas o tablas propias no necesitas servidor.
• Funciones. Si el cálculo consulta un servicio externo (decodificar un VIN, una lista de precios de repuestos, un tipo de cambio), crea una función proxy-rest. Tu sitio llama a /api/functions/<tu-cuenta>/<endpoint> y la llave del servicio externo se queda en el servidor, nunca en el navegador. Guía: Funciones.
• Formularios o Datos. Para guardar el resultado o captar al visitante como lead, inserta un formulario o guarda los registros en el módulo Datos. Guías: Formularios y Datos.
• API de MGPanel. Para conectar otro sistema con tu cuenta (clientes, facturas, productos y más), la referencia completa está en mgpanel.apidog.io.

Con los permisos Sitio web y Funciones en la llave, Cursor puede crear la función y la sección por ti; tú revisas el borrador y publicas.

5. CLI: trabajar con archivos locales

mgpanel-cli descarga tu sitio a una carpeta de tu computadora —una carpeta por página y por sección, con sus archivos .html, .css y .js—, te deja previsualizarlo localmente y lo vuelve a subir al borrador. Es útil si quieres versionar el código en Git o editar con cualquier herramienta. Funciona bien junto a Cursor: puedes abrir esa carpeta como proyecto.

5.1 Instalación y token

1. Instala Node.js y luego la CLI: npm install -g mgpanel-cli
2. Crea el proyecto: mgpanel init mi-sitio
3. En Configuración → CLI pulsa Crear token y cópialo (se muestra una sola vez).
4. En el archivo .env del proyecto completa MGPANEL_ACCOUNT con el nick de tu cuenta y MGPANEL_TOKEN con el token.

Los tokens de la CLI son distintos de las llaves de conector: un token de CLI no sirve para Cursor por MCP, ni al revés.

5.2 Comandos

Usa siempre --prod, que apunta a app.mgpanel.co. La opción --dev es del entorno interno de MGPanel.

5.3 Copiar tu sitio a la cuenta de pruebas

1. Con el .env apuntando a tu cuenta real, ejecuta mgpanel pull --prod.
2. Cambia MGPANEL_ACCOUNT y MGPANEL_TOKEN por los de la cuenta de pruebas (el token se crea en esa cuenta).
3. Ejecuta mgpanel push --prod.
4. Revisa el borrador de la cuenta de pruebas.

Se copian las páginas, sus secciones y el CSS y JavaScript generales. Las imágenes se siguen viendo porque las secciones las cargan desde su dirección original. No se copian el contenido de los módulos (artículos del blog, productos, formularios, propiedades, cursos), que vive en la base de datos de cada cuenta; el código general de head y body (botón Código general del panel lateral de Editar Web); las traducciones; ni el favicon y las integraciones.

6. Solución de problemas

7. Recursos y soporte

• API y conexión con agentes de IA: permisos, caducidad y qué hacer si una llave se filtra.
• Editar Web: páginas, secciones, código general e historial de versiones.
• Funciones y Datos: backend ligero y almacenamiento para tu sitio.
• Conectar MGPanel con Claude por MCP: el mismo servidor, desde Claude.
• Referencia del API REST: mgpanel.apidog.io.
• ¿Dudas? Pregúntale a emyi, el asistente del panel, o escríbenos a [email protected].