Comment configurer Cocos Creator MCP avec Cursor et Claude (Tutoriel vidéo)

Regardez le tutoriel vidéo

Vidéo : Procédure de configuration de Cocos Creator MCP sur la chaîne YouTube VberAI

Cet enregistrement est un guide pratique de configuration de Cocos Creator MCP—pas un aperçu multi-moteurs. Vous verrez comment installer le plugin MCP, démarrer le pont local et connecter un client IA tel que Cursor ou Claude Desktop afin que l’assistant puisse lire et modifier votre projet Cocos Creator dans l’éditeur.

Ce que vous allez apprendre

Après avoir suivi la vidéo et la liste ci-dessous, vous devriez être en mesure de :

• Installer et activer un plugin Cocos Creator MCP pour Creator 2.x ou 3.x
• Démarrer le serveur / pont MCP local depuis le panneau du plugin
• Ajouter le serveur à Cursor, Claude, Windsurf, ou un autre client compatible MCP
• Exécuter un test en lecture seule (arbre de scène) et un petit test d’écriture (créer ou renommer un nœud)

Model Context Protocol (MCP) expose l’état en direct de l’éditeur—scène actuelle, hiérarchie de nœuds, sélection—pas seulement les fichiers sur disque. C’est pourquoi la configuration MCP est importante pour les flux de travail de jeu.

Prérequis

Élément	Remarques
Cocos Creator	Projet 2.x ou 3.x ouvert dans l’éditeur
Plugin MCP	Extension Cocos Creator MCP (la vidéo utilise la version VberAI Cocos MCP)
Client IA	Cursor, Claude Desktop, Claude Code, Windsurf, Cline, ou tout assistant compatible MCP
Accès local	Le pont MCP tourne sur 127.0.0.1 ; le pare-feu doit autoriser le loopback

Étapes de configuration (Suivez la vidéo)

1. Installez le plugin Cocos Creator MCP

1. Téléchargez l’extension MCP pour votre version de Creator auprès du fournisseur du plugin (voir Téléchargements Cocos MCP).
2. Importez ou copiez l’extension dans le dossier extensions de votre projet, ou installez-la via le gestionnaire d’extensions de Creator—selon les instructions du plugin.
3. Ouvrez Extension → Gestionnaire d’extensions, activez le plugin MCP, et rechargez l’éditeur si demandé.

2. Démarrez le pont MCP

Ouvrez le panneau de contrôle du plugin (le nom du menu varie selon la version—souvent MCP ou AI Bridge) :

• Cliquez sur Démarrer le serveur / Démarrer MCP
• Notez l’URL locale et le port affichés dans le panneau (vous les collerez dans votre client IA)

Gardez Cocos Creator en cours d’exécution pendant que le pont est actif.

3. Configurez votre client IA

Ajoutez une entrée de serveur MCP pointant vers l’URL du pont de l’étape 2. Exemple pour Cursor (mcp.json) :

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

Remplacez PORT par la valeur de l’interface du plugin. De nombreuses versions de Cocos MCP incluent un bouton Configurer pour Cursor / Claude qui copie le JSON correct—utilisez-le si disponible.

Redémarrez ou rechargez le client IA après avoir enregistré la configuration.

4. Vérifiez la connexion

Dans Cursor ou Claude, posez d’abord une question en lecture seule :

• « Liste l’arbre des nœuds de la scène actuelle. »
• « Quels nœuds sont sous le Canvas ? »

Vous devriez obtenir des chemins structurés depuis l’éditeur—pas des contenus de fichiers devinés.

5. Essayez une petite opération d’écriture

Provoquez un changement réversible :

• Créez un nœud enfant vide sous la sélection
• Renommez un groupe UI mal nommé
• Attachez un composant stub ou un script

Confirmez que le changement apparaît dans le panneau Hiérarchie avant d’exécuter des tâches d’automatisation plus importantes.

Pourquoi MCP surpasse le codage IA basé sur les fichiers

Sans MCP, les assistants ne voient que les fichiers sur disque. Ils manquent :

• Les changements de scène non enregistrés et la sélection actuelle
• Les propriétés de nœuds et valeurs de composants en direct
• Le contexte spécifique à l’éditeur (mode prefab, paramètres de build, etc.)

MCP envoie la vérité de l’éditeur au modèle, ce qui est le but de la configuration Cocos Creator MCP. Pour une analyse écrite approfondie d’une architecture de pont similaire, voir Comment nous avons construit un serveur MCP en temps réel pour Godot.

Associez MCP avec des outils de conception à UI (Optionnel)

MCP gère les opérations de l’éditeur une fois que les assets existent. Des outils comme VberAI Studio (AI Studio) gèrent PSD / Figma → structure UI du moteur pour Unity, Godot, ou Cocos. Une pile courante :

1. AI Studio importe un écran en couches et exporte le prefab / la disposition des nœuds Cocos
2. Cocos MCP câble les boutons, renomme les nœuds, et valide les références dans Creator

Voir aussi : Créez une UI de jeu en 3 minutes avec AI Studio.

FAQ

Comment connecter Cursor à Cocos Creator ?
Installez Cocos Creator MCP, démarrez le pont local dans l’éditeur, ajoutez l’URL du pont au mcp.json de Cursor sous mcpServers, puis testez avec une invite d’arbre de scène.

Qu’est-ce que Cocos Creator MCP ?
Un plugin Model Context Protocol qui permet aux clients IA de lire et modifier des projets Cocos Creator via l’éditeur en cours d’exécution.

Quels clients IA fonctionnent avec Cocos MCP ?
Tout client compatible MCP : Cursor, Claude Desktop, Claude Code, Windsurf, Cline, et autres.

La vidéo couvre-t-elle Unity ou Godot ?
Non—cet enregistrement se concentre uniquement sur la configuration Cocos Creator MCP. Pour Unity, voir Guide d’installation Unity MCP ; pour Godot, voir Godot MCP vs script manuel.

Où est la vidéo officielle ?
YouTube : Configuration Cocos Creator MCP, chaîne @vber_ai.

Aller plus loin sur le blog

• Guide d’installation Cocos Creator 3.x MCP
• Flux de travail de développement de jeux VberAI
• Comparaison Godot vs Unity vs Cocos MCP

Abonnez-vous à la chaîne YouTube VberAI pour plus de tutoriels MCP.