Cocos Creator MCP 設定教學：連接 Cursor / Claude

觀看影片教學

影片： Cocos Creator MCP 設定實操（VberAI YouTube 頻道）

這支錄影是 Cocos Creator MCP 的設定 walkthrough，不是多引擎總覽。你會看到如何安裝 MCP 外掛、啟動本機橋接，並把 Cursor 或 Claude Desktop 等 AI 客戶端接到 Cocos Creator，讓助手在編輯器裡讀寫場景與節點。

你將學會什麼

跟完影片與下方清單後，你應該能夠：

• 為 Creator 2.x / 3.x 安裝並啟用 Cocos Creator MCP 外掛
• 在外掛面板啟動本機 MCP 服務 / 橋接
• 把服務位址寫入 Cursor、Claude、Windsurf 等支援 MCP 的客戶端
• 做一次唯讀測試（場景樹）與一次小寫入測試（新建或重新命名節點）

Model Context Protocol（MCP） 暴露的是編輯器即時狀態——目前場景、節點層級、選取項目——而不只是磁碟上的檔案。

前置條件

項目	說明
Cocos Creator	已開啟 2.x 或 3.x 專案
MCP 外掛	Cocos Creator MCP 擴充（影片中為 VberAI Cocos MCP）
AI 客戶端	Cursor、Claude Desktop、Claude Code、Windsurf、Cline 等
本機環境	橋接執行於 127.0.0.1，需允許本機回環存取

設定步驟（邊看邊做）

1. 安裝 Cocos Creator MCP 外掛

1. 依 Creator 版本 從外掛提供方下載 MCP 擴充（見 Cocos MCP 下載頁）。
2. 匯入專案 extensions 目錄，或透過 Creator 擴充管理器安裝——以外掛文件為準。
3. 開啟 擴充 → 擴充管理器，啟用 MCP 外掛，依提示重新載入編輯器。

2. 啟動 MCP 橋接

開啟外掛控制面板，點 啟動服務 / Start MCP，記下顯示的 本機 URL 與埠號。橋接執行期間請保持 Cocos Creator 開啟。

3. 設定 AI 客戶端

在 MCP 設定中加入橋接位址。以 Cursor 的 mcp.json 為例：

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

將 PORT 換成外掛介面顯示的埠號；若有 一鍵設定 Cursor / Claude，優先使用複製的 JSON。儲存後重啟 AI 客戶端。

4. 驗證連線

先問唯讀問題，例如「列出目前場景節點樹」或「Canvas 下有哪些子節點？」——應回傳編輯器中的結構化路徑。

5. 試一次小寫入

做可還原的小改動（新建子節點、重新命名 UI 分組等），在層級面板確認後再放大任務。

MCP 與「只改檔案」的差異

沒有 MCP 時，AI 只能看磁碟檔案，看不到未儲存場景、目前選取與元件即時值。MCP 傳送編輯器真實狀態給模型。類似架構可參考 我們如何為 Godot 打造即時 MCP Server。

與設計稿轉 UI 工具配合（選用）

MCP 處理資源進專案後的編輯器操作；VberAI AI Studio（AI Studio）處理 PSD / Figma → 引擎 UI 結構。常見流程：AI Studio 匯出 Cocos 預製體 → Cocos MCP 接線與校驗。見 3 分鐘做出可上線遊戲 UI。

常見問題

如何把 Cursor 接到 Cocos Creator？
安裝 MCP 外掛 → 啟動橋接 → 寫入 Cursor mcp.json → 用場景樹測試。

什麼是 Cocos Creator MCP？
讓 AI 客戶端透過執行中的編輯器讀寫 Cocos Creator 專案的 Model Context Protocol 外掛。

影片有講 Unity / Godot 嗎？
沒有——本錄影只示範 Cocos Creator MCP 設定。Unity 見 Unity MCP 安裝教學；Godot 見 Godot MCP vs 手寫腳本。

影片連結？
YouTube，頻道 @vber_ai。

延伸閱讀

• Cocos Creator 3.x MCP 安裝教學
• VberAI 遊戲開發流程
• 三大引擎 MCP 比較

訂閱 VberAI YouTube 取得更多 MCP 教學。