Playcanvas Editor MCP Server

🚀 MCP Server: A Large Language Model-Driven Tool for Automating PlayCanvas Editor

The MCP Server is a powerful tool that leverages large language models to automate operations in the PlayCanvas editor, streamlining your development process.

⚠️ Important Note

Currently, the MCP server needs to be powered by Anthropic's Claude. Our experience shows that Claude's free tier offers a relatively small context window (around 4k tokens), which may not be sufficient to handle complex PlayCanvas projects. Therefore, we highly recommend using a Claude Pro account for a better experience.

🚀 Quick Start

The MCP (Multi-Chatgpt Panel) server project is designed to automate the PlayCanvas editor, enabling operations driven by large language models (LLMs). Here's a detailed introduction and usage guide for the project.

✨ Features

The MCP server supports the following commands:

1. Create Entities: create_entities
2. Delete All Entities: delete_all_entities
3. Modify Material Properties: modify_material_properties
4. Adjust Mesh Scale: adjust_mesh_scale
5. Set Transform Matrix: set_transform_matrix
6. Add Rigidbody Dynamics: add_rigidbody_dynamics
7. Delete Selected Objects: delete_selected_objects
8. Export Scene to JSON: export_scene_to_json
9. Import External Model: import_external_model
10. Reset All Transforms: reset_all_transforms
11. Enable Collision Detection: enable_collision_detection
12. Disable Particle System: disable_particle_system
13. Modify Light Intensity: modify_light_intensity
14. Add Script Component: add_script_component
15. Delete Material References: delete_material_references
16. Create Empty Object: create_empty_object
17. Clone Selected Object: clone_selected_object
18. Apply Mold Glass Mesh: apply_m模具_glass
19. Convert Model Format: convert_model_format
20. Save Current Scene: save_current_scene

📦 Installation

Step 1: Install the MCP Server

Run the following command in your terminal to install the MCP server:

npm install

Step 2: Install the Chrome Extension

Unzip the mcp-editor/dist/mcp_editor.zip file and install it as a browser extension.

📚 Configuration

The configuration files vary depending on your operating system:

Windows:

{
  "mcpServers": {
    "playcanvas": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "tsx",
        "C:\\路径\\到\\mcp-editor\\src\\server.ts"
      ]
    }
  }
}

macOS:

{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": [
        "tsx",
        "/路径/到/mcp-editor/src/server.ts"
      ]
    }
  }
}

🔧 Driving the MCP Server

Method 1: Using Claude Desktop

1. Install Claude Desktop.
2. Open the Claude settings, locate the mcp.json file, and configure it as follows:

{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": [
        "tsx",
        "/路径/到/mcp-editor/src/server.ts"
      ]
    }
  }
}

Method 2: Using Cursor

1. Install Cursor.
2. Open the settings, navigate to File > Preferences > Cursor Settings.
3. Click + Add a new global MCP server and configure it as follows:

{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": [
        "tsx",
        "/路径/到/mcp-editor/src/server.ts"
      ]
    }
  }
}

💡 Usage Tip

1. Recommend Claude Pro: Claude's free tier has a small context window (around 4k tokens), which may not meet the requirements of PlayCanvas projects. It's advisable to upgrade to Claude Pro.
2. Enable Auto-Run Mode:
   • In Cursor settings, go to the Features section and enable Enable auto-run mode to allow the LLM to automatically run MCP tools.
   • Note: This feature has risks, so use it with caution.
3. Select the Right Agent Mode:
   • In Cursor, make sure to select the Agent mode. The Ask and Edit modes won't recognize MCP server commands.

By following these steps, you can successfully configure and run the MCP server to automate operations in the PlayCanvas editor!