# PlayCanvas MCP 架設 + Claude

## 安裝環境準備

- [node.js + npm](https://nodejs.org/zh-tw)
- npx

  npm install -g npx

- tsx

  npm install -g tsx

## Clone editor-mcp-server

[editor-mcp-server](https://github.com/playcanvas/editor-mcp-server?tab=readme-ov-file)

## 執行 npm install

cd /c/editor-mcp-server/ 

npm install


## 配置 Claude MCP config

### 安裝 Claude Desktop
- [Claude Desktop](https://claude.ai/download)

### 配置 claude_desktop_config.json




貼上 mcp config json，需要修改以下：
- args -> editor-mcp-server 路徑
- env -> APPDATA 的 USERNAME

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

## 重啟 Claude

重啟 Claude 後，將會自動以剛剛的 mcp config 配置進行啟動，如果有成功啟動 mcp server 服務的話，會有槌子圖示為以下：


另外，也可進到配置中確認：


# MCP Server 連接 PlayCanvas

## 安裝 PlayCanvas Editor Chrome 擴充套件



## 開始 Connect

成功後將會顯示綠燈。


## 額外補充

### 確認 MCP Server 啟動

打開 cmd 輸入以下指令：

CMD

netstat -ano | findstr :52000


Git Bash

netstat -ano | grep :52000