How to Build a Cocos Login UI With execute_javascript and Claude Code

Funplay Cocos MCP connects Claude Code to Cocos Creator through an HTTP JSON-RPC 2.0 endpoint, letting the AI build scenes, wire components, and validate results directly inside the editor. This article walks through using that connection to create a complete login UI from a single prompt.

What Funplay Cocos MCP Is

Funplay Cocos MCP is an extension for Cocos Creator 3.8 or later that exposes editor functionality to AI clients via the Model Context Protocol. The server runs locally at http://127.0.0.1:8765/ and provides tools including execute_javascript, which runs arbitrary editor-side JavaScript in the Cocos Creator context. With 67 tools available, Cocos MCP covers scene manipulation, asset management, input simulation, and screenshot capture—fewer than Godot MCP's 105 tools but still enough for full prompt-to-scene workflows.

The extension ships four built-in prompts—fix_script_errors, create_playable_prototype, scene_validation, and auto_wire_scene—plus eight built-in MCP resources that give the AI context about your project structure.

Why It Matters

Three facts make this workflow practical for production teams.

First, the server binds to 127.0.0.1 only, keeping all communication local with no authentication overhead. Second, all MCP tools execute directly without per-call approval UI, so a single Claude Code prompt can chain scene creation, layout, scripting, and validation in seconds. Third, the extension supports one-click configuration for Claude Code, Claude Desktop, Cursor, VS Code, Codex CLI, Trae, and Kiro—broader client compatibility than most editor MCP servers.

Installation and Configuration

Clone the Funplay Cocos MCP repository into your project:

cd your-cocos-project/extensions
git clone https://github.com/FunplayAI/funplay-cocos-mcp.git

Then open Cocos Creator 3.8 or later and navigate to Extension → Extension Manager → Refresh. The MCP Server panel appears in the editor. Click Start Server to boot the HTTP endpoint at 127.0.0.1 port 8765.

For Claude Code, create or update your MCP configuration:

{
  "mcpServers": {
    "funplay-cocos": {
      "type": "http",
      "url": "http://127.0.0.1:8765/"
    }
  }
}

Alternatively, use the one-click configuration button in the MCP Server panel inside Cocos Creator. It writes the correct JSON for your AI client automatically.

If port 8765 is busy, the server tries up to 20 sequential ports before giving up.

Building the Login UI

With the server running and Claude Code connected, open your terminal in the project directory and start Claude Code. Give it a single prompt:

"Create a login UI scene with email and password input fields and a Sign In button. Center everything on screen."

Claude Code calls execute_javascript through the MCP server. The AI generates editor-side JavaScript that builds the node hierarchy, applies layout components, and wires event handlers. Here is a simplified example of what execute_javascript receives:

// Inside execute_javascript — runs in Cocos Creator editor context
const { director } = require('cc');

// Create a new scene
const scene = new cc.Scene();
director.loadScene(scene.name);

// Root node with UITransform
const canvas = scene.getChildByName('Canvas');
const root = new cc.Node('LoginRoot');
canvas.addChild(root);
const rootTransform = root.addComponent(cc.UITransform);
rootTransform.setContentSize(400, 300);

// Layout
const layout = root.addComponent(cc.Layout);
layout.type = cc.Layout.Type.VERTICAL;
layout.spacingY = 20;
layout.horizontalDirection = cc.Layout.HorizontalDirection.CENTER_TO_RIGHT;

// Email input
const emailNode = new cc.Node('EmailInput');
const emailEditBox = emailNode.addComponent(cc.EditBox);
emailEditBox.placeholder = 'Email';
root.addChild(emailNode);

// Password input
const passNode = new cc.Node('PasswordInput');
const passEditBox = passNode.addComponent(cc.EditBox);
passEditBox.placeholder = 'Password';
passNode.addComponent(cc.EditBox).inputFlag = cc.EditBox.InputFlag.PASSWORD;
root.addChild(passNode);

// Sign In button
const btnNode = new cc.Node('SignInButton');
const btn = btnNode.addComponent(cc.Button);
const label = btnNode.addComponent(cc.Label);
label.string = 'Sign In';
root.addChild(btnNode);

The real output from Claude Code is more complete—it sets anchoring, adds sprites, creates label fonts, and attaches a TypeScript component for the button callback. But the principle stays the same: every call goes through execute_javascript, and the AI has full access to the Cocos Creator scripting API.

Validating the Result

After the scene is built, ask Claude Code to validate it:

"Enter preview mode, type [email protected] into the email field, type a password, click Sign In, and show me a screenshot."

Claude Code uses the built-in create_playable_prototype prompt to enter play mode, then simulates input events through MCP tools, and finally captures a screenshot. It inspects the editor console for errors using fix_script_errors logic. You get a visual confirmation without leaving your terminal.

The scene_validation prompt can also run a structural check—missing references, empty components, nodes without UITransform—and report back through Claude Code.

Comparing Approaches

You could build the same login UI manually in the Cocos Creator editor, dragging nodes and wiring properties in the inspector. That works for small scenes but scales poorly. With execute_javascript, you describe intent in natural language and get repeatable, version-controllable output.

An alternative is writing a Cocos Editor script directly. You get the same API access, but you lose the iterative loop—no screenshots, no log inspection, no input simulation without switching tools. The MCP server bundles those capabilities into one conversation.

Sibling projects follow the same pattern for other engines. Funplay Unity MCP provides 79 tools for Unity 2022.3 or later, and Funplay Godot MCP provides 105 tools for Godot 4.2 or later. Each targets engine-specific APIs but shares the prompt-to-scene workflow.

Gotchas and Limitations

The local-only binding at 127.0.0.1 means this workflow does not work for remote editor instances. If your Cocos Creator runs on a different machine, you need a tunnel or port forward.

Port conflicts happen. The fallback mechanism tries up to 20 sequential ports, but if all are occupied, the server fails silently. Check the MCP Server panel in Cocos Creator if Claude Code cannot connect.

The execute_javascript tool runs code in the editor's main process. A malformed script can crash the editor. Always save your scene before asking the AI to make large changes.

There is no per-call approval UI, which is a feature for speed but a risk for trust. If you connect an AI client that generates unpredictable code, you have no confirmation dialog between the prompt and execution. Use this tooling with AI clients you trust.

Cocos Creator 3.8 or later is required. Earlier versions lack the extension APIs the server depends on.

Finally, the AI does not know your project's TypeScript classes unless you provide context. For custom components, include the file contents in your prompt or point Claude Code at the relevant scripts.

Next Steps

Open the Funplay Cocos MCP repository to install the extension and start building scenes from prompts. Browse more tutorials and guides at gamebooom.ai/en/blog/, and explore the Funplay Unity MCP or Funplay Godot MCP if you work across multiple engines.