How to Set Up Cocos Creator MCP with Cursor and Claude (Video Tutorial)

Watch the Video Tutorial

Video: Cocos Creator MCP setup walkthrough on the VberAI YouTube channel

This recording is a hands-on Cocos Creator MCP configuration guide—not a multi-engine overview. You will see how to install the MCP plugin, start the local bridge, and connect an AI client such as Cursor or Claude Desktop so the assistant can read and change your Cocos Creator project inside the editor.

What You Will Learn

After following the video and checklist below, you should be able to:

• Install and enable a Cocos Creator MCP plugin for Creator 2.x or 3.x
• Start the local MCP server / bridge from the plugin panel
• Add the server to Cursor, Claude, Windsurf, or another MCP-compatible client
• Run a read-only test (scene tree) and a small write test (create or rename a node)

Model Context Protocol (MCP) exposes live editor state—current scene, node hierarchy, selection—not just files on disk. That is why MCP setup matters for game workflows.

Prerequisites

Item	Notes
Cocos Creator	2.x or 3.x project open in the editor
MCP plugin	Cocos Creator MCP extension (the video uses the VberAI Cocos MCP build)
AI client	Cursor, Claude Desktop, Claude Code, Windsurf, Cline, or any MCP-capable assistant
Local access	MCP bridge runs on 127.0.0.1; firewall should allow loopback

Setup Steps (Follow Along With the Video)

1. Install the Cocos Creator MCP plugin

1. Download the MCP extension for your Creator version from the plugin provider (see Cocos MCP downloads).
2. Import or copy the extension into your project’s extensions folder, or install via Creator’s extension manager—whichever the plugin docs specify.
3. Open Extension → Extension Manager, enable the MCP plugin, and reload the editor if prompted.

2. Start the MCP bridge

Open the plugin’s control panel (menu name varies by build—often MCP or AI Bridge):

• Click Start Server / Start MCP
• Note the local URL and port shown in the panel (you will paste this into your AI client)

Keep Cocos Creator running while the bridge is active.

3. Configure your AI client

Add an MCP server entry pointing at the bridge URL from step 2. Example shape for Cursor (mcp.json):

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

Replace PORT with the value from the plugin UI. Many Cocos MCP builds include a Configure for Cursor / Claude button that copies the correct JSON—use that when available.

Restart or reload the AI client after saving the config.

4. Verify the connection

In Cursor or Claude, ask a read-only question first:

• “List the current scene node tree.”
• “What nodes are under the Canvas?”

You should get structured paths from the editor—not guessed file contents.

5. Try one small write operation

Prompt a reversible change:

• Create an empty child node under the selection
• Rename a poorly named UI group
• Attach a stub component or script

Confirm the change appears in the Hierarchy panel before running larger automation tasks.

Why MCP Beats File-Only AI Coding

Without MCP, assistants only see files on disk. They miss:

• Unsaved scene changes and current selection
• Live node properties and component values
• Editor-only context (prefab mode, build settings, etc.)

MCP sends editor truth to the model, which is the point of Cocos Creator MCP setup. For a written deep dive on a similar bridge architecture, see How We Built a Real-Time MCP Server for Godot.

Pair MCP With Design-to-UI Tools (Optional)

MCP handles editor operations after assets exist. Tools like VberAI AI Studio (AI Studio) handle PSD / Figma → engine UI structure for Unity, Godot, or Cocos. A common stack:

1. AI Studio imports a layered screen and exports Cocos prefab / node layout
2. Cocos MCP wires buttons, renames nodes, and validates references in Creator

See also: Build Game UI in 3 Minutes with AI Studio.

FAQ

How do I connect Cursor to Cocos Creator?
Install Cocos Creator MCP, start the local bridge in the editor, add the bridge URL to Cursor’s mcp.json under mcpServers, then test with a scene-tree prompt.

What is Cocos Creator MCP?
A Model Context Protocol plugin that lets AI clients read and modify Cocos Creator projects through the running editor.

Which AI clients work with Cocos MCP?
Any MCP-compatible client: Cursor, Claude Desktop, Claude Code, Windsurf, Cline, and others.

Does the video cover Unity or Godot?
No—this recording focuses on Cocos Creator MCP configuration only. For Unity, see Unity MCP install guide; for Godot, see Godot MCP vs manual scripting.

Where is the official video?
YouTube: Cocos Creator MCP setup, channel @vber_ai.

Go Deeper on the Blog

• Cocos Creator 3.x MCP install guide
• VberAI game development workflow
• Godot vs Unity vs Cocos MCP Comparison

Subscribe to the VberAI YouTube channel for more MCP tutorials.