Como Configurar o Cocos Creator MCP com Cursor e Claude (Tutorial em Vídeo)

Assista ao Tutorial em Vídeo

Vídeo: Passo a passo de configuração do Cocos Creator MCP no canal do YouTube da VberAI

Esta gravação é um guia prático de configuração do Cocos Creator MCP — não uma visão geral de múltiplos motores. Você verá como instalar o plugin MCP, iniciar a ponte local e conectar um cliente de IA como Cursor ou Claude Desktop para que o assistente possa ler e alterar seu projeto Cocos Creator dentro do editor.

O Que Você Vai Aprender

Após seguir o vídeo e a lista de verificação abaixo, você deverá ser capaz de:

• Instalar e habilitar um plugin Cocos Creator MCP para Creator 2.x ou 3.x
• Iniciar o servidor/ponte MCP local a partir do painel do plugin
• Adicionar o servidor ao Cursor, Claude, Windsurf ou outro cliente compatível com MCP
• Executar um teste somente leitura (árvore de cena) e um pequeno teste de escrita (criar ou renomear um nó)

Model Context Protocol (MCP) expõe o estado do editor em tempo real — cena atual, hierarquia de nós, seleção — não apenas arquivos no disco. É por isso que a configuração do MCP é importante para fluxos de trabalho de jogos.

Pré-requisitos

Item	Observações
Cocos Creator	Projeto 2.x ou 3.x aberto no editor
Plugin MCP	Extensão Cocos Creator MCP (o vídeo usa a versão VberAI Cocos MCP)
Cliente de IA	Cursor, Claude Desktop, Claude Code, Windsurf, Cline ou qualquer assistente compatível com MCP
Acesso local	A ponte MCP roda em 127.0.0.1; o firewall deve permitir loopback

Etapas de Configuração (Acompanhe com o Vídeo)

1. Instale o plugin Cocos Creator MCP

1. Baixe a extensão MCP para a sua versão do Creator do provedor do plugin (veja Downloads do Cocos MCP).
2. Importe ou copie a extensão para a pasta extensions do seu projeto, ou instale via gerenciador de extensões do Creator — conforme as instruções do plugin.
3. Abra Extension → Extension Manager, habilite o plugin MCP e recarregue o editor se solicitado.

2. Inicie a ponte MCP

Abra o painel de controle do plugin (o nome do menu varia conforme a versão — geralmente MCP ou AI Bridge):

• Clique em Start Server / Start MCP
• Anote a URL local e a porta mostradas no painel (você colará isso no seu cliente de IA)

Mantenha o Cocos Creator em execução enquanto a ponte estiver ativa.

3. Configure seu cliente de IA

Adicione uma entrada de servidor MCP apontando para a URL da ponte da etapa 2. Exemplo de formato para Cursor (mcp.json):

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

Substitua PORT pelo valor da interface do plugin. Muitas versões do Cocos MCP incluem um botão Configure for Cursor / Claude que copia o JSON correto — use-o quando disponível.

Reinicie ou recarregue o cliente de IA após salvar a configuração.

4. Verifique a conexão

No Cursor ou Claude, faça primeiro uma pergunta somente leitura:

• “Liste a árvore de nós da cena atual.”
• “Quais nós estão sob o Canvas?”

Você deve obter caminhos estruturados do editor — não conteúdos de arquivo adivinhados.

5. Tente uma pequena operação de escrita

Solicite uma alteração reversível:

• Crie um nó filho vazio sob a seleção
• Renomeie um grupo de UI com nome ruim
• Anexe um componente ou script stub

Confirme que a alteração aparece no painel Hierarchy antes de executar tarefas de automação maiores.

Por Que o MCP é Melhor que Codificação com IA Apenas por Arquivos

Sem o MCP, os assistentes veem apenas arquivos no disco. Eles perdem:

• Alterações de cena não salvas e a seleção atual
• Propriedades de nós e valores de componentes em tempo real
• Contexto exclusivo do editor (modo prefab, configurações de build, etc.)

O MCP envia a verdade do editor para o modelo, que é o objetivo da configuração do Cocos Creator MCP. Para um mergulho profundo por escrito sobre uma arquitetura de ponte semelhante, veja Como Construímos um Servidor MCP em Tempo Real para Godot.

Combine MCP com Ferramentas de Design para UI (Opcional)

O MCP lida com operações do editor após os assets existirem. Ferramentas como VberAI Studio (AI Studio) lidam com PSD / Figma → estrutura de UI do motor para Unity, Godot ou Cocos. Uma stack comum:

1. AI Studio importa uma tela em camadas e exporta o layout de prefab / nós do Cocos
2. Cocos MCP conecta botões, renomeia nós e valida referências no Creator

Veja também: Construa UI de Jogo em 3 Minutos com AI Studio.

FAQ

Como conecto o Cursor ao Cocos Creator?
Instale o Cocos Creator MCP, inicie a ponte local no editor, adicione a URL da ponte ao mcp.json do Cursor sob mcpServers e teste com um prompt de árvore de cena.

O que é o Cocos Creator MCP?
Um plugin Model Context Protocol que permite que clientes de IA leiam e modifiquem projetos Cocos Creator através do editor em execução.

Quais clientes de IA funcionam com o Cocos MCP?
Qualquer cliente compatível com MCP: Cursor, Claude Desktop, Claude Code, Windsurf, Cline e outros.

O vídeo cobre Unity ou Godot?
Não — esta gravação foca apenas na configuração do Cocos Creator MCP. Para Unity, veja Guia de instalação do Unity MCP; para Godot, veja Godot MCP vs script manual.

Onde está o vídeo oficial?
YouTube: Configuração do Cocos Creator MCP, canal @vber_ai. Inscreva-se no canal do YouTube da VberAI para mais tutoriais de MCP.