想要讓 AI 幫你在 PlayCanvas 上自動生成場景或建立物件嗎？透過 Claude Desktop 搭配 PlayCanvas Editor MCP Server，你就能以自然語言的方式操作 PlayCanvas 編輯器，快速完成遊戲開發中的重複性工作。本篇教學將帶你從環境安裝、設定到成功連線，一步步完成整個流程，讓你親身體驗 AI 輔助的 3D 遊戲開發。
這篇教學適合初學者，只需具備基本電腦操作能力，就能完成設定。不需要寫程式、不需要了解伺服器架構，只要依照指示安裝與設定，你就能在 Claude Desktop 中直接輸入指令，讓 AI 幫你在 PlayCanvas 中創建物件、設計場景，甚至構建一個小型遊戲雛形。
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_f74320-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
使用工具
| 類別 | 工具 | 功能 | 備註 |
|---|---|---|---|
| 核心環境 | Node.js | 提供執行 JavaScript / TypeScript 的伺服器環境與 npm 套件管理器。 | 本文教學 |
| 核心環境 | npm（隨 Node.js 安裝） | 安裝與管理 PlayCanvas MCP Server 所需的套件（如 zod 等）。 | 本文教學 |
| 遊戲介面 | PlayCanvas（雲端平台） | 3D 遊戲開發編輯器（在瀏覽器中使用）。 | 註冊帳號 |
| 遊戲介面 | PlayCanvas Editor MCP Server | 讓 Claude 能透過 MCP 通訊協定控制 PlayCanvas Editor 的伺服器程式。 | 本文教學 |
| 遊戲介面 | Chrome 瀏覽器 | 執行並載入 PlayCanvas MCP Extension（開發者模式下載入未封裝項目）。 | 本文教學 |
| 遊戲介面 | PlayCanvas Editor MCP Extension | Chrome 擴充功能，用於建立瀏覽器與 MCP Server 的連線。 | 本文教學 |
| AI 端 | Claude Desktop（需 Pro 以上） | Anthropic 提供的 AI 桌面應用程式，支援 MCP（Model Context Protocol）。 | 本文教學 |
| 文字工具 | 文字編輯工具（例如：Notepad++、Visual Studio Code等等） | 編輯 package.json、claude_desktop_config.json、或 MCP Server 相關設定檔案。雖然記事本也可以，但推薦使用這類文字編輯工具，在查看縮排時比較不容易出錯。 | 可選工具 |
概念說明
什麼是 PlayCanvas？
PlayCanvas 是一個基於雲端的 3D 遊戲開發平台，使用者可以直接在瀏覽器中建立、編輯與發布遊戲或互動式 3D 應用程式。它不需要安裝大型軟體，介面直覺，適合初學者與專業開發者使用。
什麼是 Claude Desktop？
Claude Desktop 是由 Anthropic 開發的 AI 助手桌面應用程式。它能理解自然語言並產生指令、代碼或創意內容。當你安裝了 Claude Desktop 並開啟開發者模式（Developer Mode），就可以讓它連線到不同的應用程式或伺服器進行互動。
什麼是 MCP（Model Context Protocol）？
MCP（Model Context Protocol） 是一種讓 AI 模型能「連接外部應用」的通訊協定。你可以把它想像成一條「AI 與軟體之間的橋樑」，讓 Claude 不只是回答問題，而能直接「操作」軟體。以本教學為例，PlayCanvas Editor MCP Server 讓 Claude 能夠理解並控制 PlayCanvas 編輯器中的功能，例如建立物件、調整屬性或生成新場景。
為什麼要用 MCP？
使用 MCP 的最大好處是「自動化與整合性」。透過 Claude + MCP，你可以用一句話完成原本需要多次點擊或撰寫程式碼的動作。例如：「請在場景中建立一個 3D 迷宮，並加上光源與攝影機。」Claude 就能透過 MCP Server 把這個指令轉換成 PlayCanvas 的實際操作。對於初學者來說，這是一種非常直覺且高效的開發方式。
安裝流程
- 於 Node.js 網站下載安裝檔（根據自己電腦系統）
- 安裝程式
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022427_0_1796f9-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 於 PlayCanvas 官方 GitHub 下載 editor-mcp-server 的壓縮檔
- 將壓縮檔解壓縮 → 資料夾 editor-mcp-server-main
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_039c66-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 用命令提示字元進入資料夾 editor-mcp-server-main
- 輸入 npm install
- 安裝完成後會生成資料夾 node_modules
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_88cbc5-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 資料夾 editor-mcp-server-main
- 編輯文件 package（可以使用 Notepad++ 或 Visual Studio Code 之類的文字工具）
- 將 zod 改為 ^3.24.2
- 註：至截稿前使用新版本的話會無法成功讓 Claude Desktop 獲得複寫權，調成就版本就可以解決問題
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_c51d36-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 開啟 Chrome 瀏覽器
- 開啟管理擴充功能
- 啟用開發人員模式
- 點選載入未封裝項目
- 選擇剛剛解壓縮的資料夾 editor-mcp-server-main
- 啟用 PlayCanvas Editor MCP Extension 1.0
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_8d112c-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 於 Claude 官方網站下載 Claude Desktop（根據自己電腦系統）
- 安裝執行檔案
- 訂閱 Claude 為 Pro 或以上的等級
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_0fb3fe-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 開啟 Claude Desktop 應用程式
- File > Settings > Developer > Edit Config > 跳出 claude_desktop_config.json 檔案所在的資料夾
- 編輯 claude_desktop_config.json（可以使用 Notepad++ 或 Visual Studio Code 之類的文字工具）
- 將 PlayCanvas 官方 GitHub editor-mcp-server 頁面中的 MCP Config JSON File 的程式碼貼入
- 將其中的 server.ts 路徑改成自己的路徑
- 資料夾 editor-mcp-server-main > src > server.ts
- 將 \ 改成 \\
- 將 Claude Desktop 應用程式 Quit 後重新開啟
- 再次進入 File > Settings > Developer > 顯示 playcanvas 為 running 狀態
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_27c599-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_a3d30b-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
- 申請一個 PlayCanvas 的帳號（免費帳號將有 1 GB 的空間）
- 新增一個專案 NEW+
- 開啟專案 EDITOR
- 開啟擴充功能 PlayCanvas Editor MCP Extension > CONNECT，顯示綠色連線成功
- 此時可以在 Claude Desktop 應用程式中用自然語言的方式給予指令
- 例如：請幫我建立一個小型迷宮
- 注意！使用 MCP 操控製作遊戲非常消耗 token，因此很容易達到 Claude 的使用上限
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_535705-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
![[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學](https://img.jfsblog.com/2025/10/20251103022428_0_b5d399-1200x630.jpg "[PlayCanvas] Claude Desktop 的 Playcanvas Editor MCP Server 設定教學")
常見問題FAQs
為什麼 Claude Desktop 一定要 Pro 以上才能使用 MCP？
MCP 屬於 Claude Desktop 的進階功能，需要 Pro、Team 或更高級別的訂閱方案 才能啟用。免費版沒有 Developer Mode，因此無法載入 MCP Server 或連線至外部應用。
PlayCanvas Editor MCP Server 是官方的還是第三方工具？
PlayCanvas Editor MCP Server 是 PlayCanvas 官方提供的 MCP 連線橋接程式，可在官方 GitHub 下載使用。
不過它仍屬於實驗性專案，功能可能會隨更新調整，因此建議安裝前查看官方說明文件。
為什麼要修改 zod 版本？
最新版本的 zod 與 MCP Server 的相容性目前有問題，可能導致 Claude Desktop 無法取得寫入權限（write access）。
建議將版本改為 ^3.24.2，這是目前已知最穩定且可正常啟動的設定。
Claude 無法連線 MCP 或顯示錯誤，要如何排查？
請依序檢查以下幾項：
- 重新啟動 Claude Desktop 通常可以解決暫時性問題
claude_desktop_config.json路徑是否正確（確保\改成\\）- Chrome 擴充功能是否正確載入並啟用
- MCP Server 是否正在執行中（running 狀態）
- Node.js 與 npm 是否成功安裝
Claude 在 PlayCanvas 中操作時很耗 token，這正常嗎？
是的，這屬於正常現象。
因為 Claude 必須頻繁與 PlayCanvas 編輯器互動、偵測狀態並執行多步驟指令，會消耗較多 token。建議在進行大型生成（如迷宮或場景）時，留意使用上限。
可以用 Firefox 或 Edge 載入 MCP Extension 嗎？
目前官方文件與範例均以 Chrome 為主，並透過 Chrome Extension 開發者模式載入。
理論上其他 Chromium 核心瀏覽器（如 Edge）也可能可行，但兼容性需自行測試。
Claude MCP 能做到哪些事情？可以自動做出完整遊戲嗎？
Claude 可以協助：
- 建立場景與物件
- 產生與放置 3D 模型
- 調整位置、旋轉、材質等屬性
- 建立簡單腳本或互動事件
但目前尚無法完全自動生成完整遊戲，仍需人工介入確認與修
PlayCanvas MCP 適合完全不會寫程式的人嗎？
非常適合。它讓你能以自然語言對 Claude 下指令，由 AI 自動完成 PlayCanvas 內的操作。只要會基本電腦操作，就能快速上手。
未來會有更多軟體支援 MCP 嗎？
會的。MCP 是一項正在發展中的協定，未來將會有越來越多工具、IDE、設計軟體與雲端平台支援這種 AI 互通機制。對開發者與創作者來說，這將是 AI 整合工作流程的重要趨勢。
相關文章
PlayCanvas & Viverse World
| 類型 | 文章 |
|---|---|
| 相關文件 | Viverse Docs．PlayCanvas Docs |
| 基礎操作 | Viverse World．Claude Playcanvas Editor MCP Server．Viverse PlayCanvas Extension (安裝．觸發．媒體．撿拾．坐下) |
| 開發者工具 | 登入與身分驗證．排行榜 |
| 開發筆記 | 滿版畫面．場景切換．密碼面板．模組化迷宮．科技感效果．對話框．碰撞計分．碰撞計分+遊戲重生．子彈閃避 |
![[PlayCanvas + VIVERSE] 一次性 NPC 對話框](https://i1.wp.com/img.jfsblog.com/2025/11/20251109212442_0_e7359a.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[PlayCanvas + VIVERSE] 一次性 NPC 對話框")
