editor-mcp-server

🚀 PlayCanvas 编辑器的自动化 MCP 服务器

本项目借助大型语言模型 (LLM) 实现了 PlayCanvas 编辑器 的 MCP 服务器自动化，为 PlayCanvas 编辑器的使用提供了更便捷、高效的方式。

🚀 快速开始

安装依赖

运行 npm install 安装所有依赖项。

安装 Chrome 扩展

1. 访问 chrome://extensions/ 并启用开发者模式。
2. 点击 加载 unpacked 并选择 extensions 文件夹。
3. 加载 PlayCanvas 编辑器，此时 Chrome 扩展应该已加载。

运行 MCP 服务器

MCP 服务器可以通过 Cursor 或 Claude Desktop 驱动。我们发现 Claude Desktop 通常更可靠。

Claude Desktop

1. 安装 Claude Desktop。
2. 转到 Claude > Settings。
3. 选择 Developer 然后 Edit Config。
4. 这将打开 claude_desktop_config.json，即你的 MCP 配置 JSON 文件。

Cursor

1. 安装 Cursor。
2. 选择 File > Preferences > Cursor Settings。
3. 点击 + 添加新的全局 MCP 服务器。
4. 这将打开 mcp.json，即你的 MCP 配置 JSON 文件。

⚠️ 重要提示

在 Cursor 中，确保选择 Agent 模式。Ask 和 Edit 模式将无法识别 MCP 服务器。

💡 使用建议

在 Cursor 设置中，在 Features 下滚动到 Chat 部分。启用 Enable auto-run mode 允许 LLM 在没有持续授权的情况下运行 MCP 工具。你这样操作是自担风险的（但我们更喜欢这样做）！

MCP 配置 JSON 文件

这是你的配置文件应该是什么样子：

Windows

{
  "mcpServers": {
    "playcanvas": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "tsx",
        "C:\\path\\to\\mcp-editor\\src\\server.ts"
      ],
      "env": {
        "PORT": "52000"
      }
    }
  }
}

macOS

{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": [
        "tsx",
        "/path/to/mcp-editor/src/server.ts"
      ],
      "env": {
        "PORT": "52000"
      }
    }
  }
}

将编辑器连接到 MCP 服务器

PlayCanvas 编辑器不会自动连接到 MCP 服务器。要连接：

1. 激活正在运行 PlayCanvas 编辑器的 Chrome 标签页。
2. 选择地址栏右侧的扩展程序图标。
3. 选择 PlayCanvas Editor MCP 扩展以打开扩展程序弹出窗口。
4. 选择 CONNECT（端口号应与你在 MCP 配置 JSON 文件中设置的端口匹配）。

⚠️ 重要提示

目前，你只能将一个 PlayCanvas 编辑器实例连接到 MCP 服务器。

✨ 主要特性

可用工具

实体

• list_entities
• create_entities
• delete_entities
• duplicate_entities
• modify_entities
• reparent_entity
• add_components
• remove_components
• add_script_component_script

资产

• list_assets
• create_assets
• delete_assets
• instantiate_template_assets
• set_script_text
• script_parse
• set_material_diffuse

场景

• query_scene_settings
• modify_scene_settings

存储

• store_search
• store_get
• store_download

📦 安装指南

依赖安装

运行 npm install 安装所有依赖项。

Chrome 扩展安装

1. 访问 chrome://extensions/ 并启用开发者模式。
2. 点击 加载 unpacked 并选择 extensions 文件夹。
3. 加载 PlayCanvas 编辑器，此时 Chrome 扩展应该已加载。

MCP 服务器运行

MCP 服务器可以通过 Cursor 或 Claude Desktop 驱动。我们推荐使用 Claude Desktop，因为它通常更可靠。

Claude Desktop 配置

1. 安装 Claude Desktop。
2. 转到 Claude > Settings。
3. 选择 Developer 然后 Edit Config。
4. 打开 claude_desktop_config.json 进行 MCP 配置。

Cursor 配置

1. 安装 Cursor。
2. 选择 File > Preferences > Cursor Settings。
3. 点击 + 添加新的全局 MCP 服务器。
4. 打开 mcp.json 进行 MCP 配置。

MCP 配置文件示例

Windows

{
  "mcpServers": {
    "playcanvas": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "tsx",
        "C:\\path\\to\\mcp-editor\\src\\server.ts"
      ],
      "env": {
        "PORT": "52000"
      }
    }
  }
}

macOS

{
  "mcpServers": {
    "playcanvas": {
      "command": "npx",
      "args": [
        "tsx",
        "/path/to/mcp-editor/src/server.ts"
      ],
      "env": {
        "PORT": "52000"
      }
    }
  }
}

编辑器连接 MCP 服务器

1. 激活正在运行 PlayCanvas 编辑器的 Chrome 标签页。
2. 选择地址栏右侧的扩展程序图标。
3. 选择 PlayCanvas Editor MCP 扩展以打开扩展程序弹出窗口。
4. 选择 CONNECT，确保端口号与 MCP 配置文件中设置的端口匹配。