Cómo Configurar Cocos Creator MCP con Cursor y Claude (Tutorial en Video)

Mira el Tutorial en Video

Video: Guía de configuración de Cocos Creator MCP en el canal de YouTube de VberAI

Esta grabación es una guía práctica de configuración de Cocos Creator MCP—no una descripción general de múltiples motores. Verás cómo instalar el plugin MCP, iniciar el puente local y conectar un cliente de IA como Cursor o Claude Desktop para que el asistente pueda leer y modificar tu proyecto de Cocos Creator dentro del editor.

Lo Que Aprenderás

Después de seguir el video y la lista de verificación a continuación, deberías ser capaz de:

• Instalar y habilitar un plugin de Cocos Creator MCP para Creator 2.x o 3.x
• Iniciar el servidor MCP local / puente desde el panel del plugin
• Añadir el servidor a Cursor, Claude, Windsurf, u otro cliente compatible con MCP
• Ejecutar una prueba de solo lectura (árbol de escena) y una pequeña prueba de escritura (crear o renombrar un nodo)

Model Context Protocol (MCP) expone el estado del editor en vivo—escena actual, jerarquía de nodos, selección—no solo archivos en disco. Por eso la configuración de MCP es importante para los flujos de trabajo de juegos.

Requisitos Previos

Elemento	Notas
Cocos Creator	Proyecto 2.x o 3.x abierto en el editor
Plugin MCP	Extensión Cocos Creator MCP (el video usa la compilación VberAI Cocos MCP)
Cliente de IA	Cursor, Claude Desktop, Claude Code, Windsurf, Cline, o cualquier asistente compatible con MCP
Acceso local	El puente MCP se ejecuta en 127.0.0.1; el firewall debe permitir loopback

Pasos de Configuración (Sigue el Video)

1. Instala el plugin Cocos Creator MCP

1. Descarga la extensión MCP para tu versión de Creator desde el proveedor del plugin (ver Descargas de Cocos MCP).
2. Importa o copia la extensión en la carpeta extensions de tu proyecto, o instálala a través del administrador de extensiones de Creator—según lo que especifiquen los documentos del plugin.
3. Abre Extension → Administrador de Extensiones, habilita el plugin MCP y recarga el editor si se te solicita.

2. Inicia el puente MCP

Abre el panel de control del plugin (el nombre del menú varía según la compilación—a menudo MCP o AI Bridge):

• Haz clic en Iniciar Servidor / Iniciar MCP
• Anota la URL local y el puerto que se muestran en el panel (los pegarás en tu cliente de IA)

Mantén Cocos Creator ejecutándose mientras el puente esté activo.

3. Configura tu cliente de IA

Añade una entrada de servidor MCP que apunte a la URL del puente del paso 2. Ejemplo de forma para Cursor (mcp.json):

{
  "mcpServers": {
    "cocos-mcp": {
      "url": "http://127.0.0.1:PORT/mcp"
    }
  }
}

Reemplaza PORT con el valor de la interfaz del plugin. Muchas compilaciones de Cocos MCP incluyen un botón Configurar para Cursor / Claude que copia el JSON correcto—úsalo cuando esté disponible.

Reinicia o recarga el cliente de IA después de guardar la configuración.

4. Verifica la conexión

En Cursor o Claude, haz una pregunta de solo lectura primero:

• “Enumera el árbol de nodos de la escena actual.”
• “¿Qué nodos hay bajo el Canvas?”

Deberías obtener rutas estructuradas del editor—no contenidos de archivos adivinados.

5. Prueba una pequeña operación de escritura

Solicita un cambio reversible:

• Crear un nodo hijo vacío bajo la selección
• Renombrar un grupo de UI mal nombrado
• Adjuntar un componente o script stub

Confirma que el cambio aparece en el panel de Jerarquía antes de ejecutar tareas de automatización más grandes.

Por Qué MCP Supera a la Codificación de IA Solo con Archivos

Sin MCP, los asistentes solo ven archivos en disco. Se pierden:

• Cambios de escena no guardados y la selección actual
• Propiedades de nodos en vivo y valores de componentes
• Contexto solo del editor (modo prefab, configuraciones de compilación, etc.)

MCP envía la verdad del editor al modelo, que es el punto de la configuración de Cocos Creator MCP. Para una inmersión escrita sobre una arquitectura de puente similar, ver Cómo Construimos un Servidor MCP en Tiempo Real para Godot.

Combina MCP con Herramientas de Diseño a UI (Opcional)

MCP maneja operaciones del editor después de que los assets existen. Herramientas como VberAI Studio (AI Studio) manejan PSD / Figma → estructura de UI del motor para Unity, Godot o Cocos. Una pila común:

1. AI Studio importa una pantalla en capas y exporta el prefab / diseño de nodos de Cocos
2. Cocos MCP conecta botones, renombra nodos y valida referencias en Creator

Ver también: Construye UI de Juego en 3 Minutos con AI Studio.

Preguntas Frecuentes

¿Cómo conecto Cursor a Cocos Creator?
Instala Cocos Creator MCP, inicia el puente local en el editor, añade la URL del puente al mcp.json de Cursor bajo mcpServers, y luego prueba con un prompt de árbol de escena.

¿Qué es Cocos Creator MCP?
Un plugin de Model Context Protocol que permite a los clientes de IA leer y modificar proyectos de Cocos Creator a través del editor en ejecución.

¿Qué clientes de IA funcionan con Cocos MCP?
Cualquier cliente compatible con MCP: Cursor, Claude Desktop, Claude Code, Windsurf, Cline, y otros.

¿El video cubre Unity o Godot?
No—esta grabación se centra solo en la configuración de Cocos Creator MCP. Para Unity, ver Guía de instalación de Unity MCP; para Godot, ver Godot MCP vs scripting manual.

¿Dónde está el video oficial?
YouTube: Configuración de Cocos Creator MCP, canal @vber_ai. Suscríbete al canal de YouTube de VberAI para más tutoriales de MCP.