如何在 Cursor 中設定 ExodeUI MCP 伺服器
Cursor(和 Claude Code)中 ExodeUI MCP 伺服器的逐步設定:mcp.json 條目、檢查工具、首次提示和安全審查。
核心要點
在專案的 .cursor/mcp.json 中新增一個條目,該條目使用 npx 運行 claude-exode-mcp 套件,重新載入 Cursor,並檢查 exode 伺服器及其工具是否出現在 Cursor 的 MCP 設定中。然後要求 Cursor 的代理程式以簡單語言建立或編輯動畫,並在出貨前在 ExodeUI 編輯器中查看結果。
你需要什麼
Cursor、Node.js(因此 npx 可用)和 ExodeUI 帳戶(如果您想在編輯器中開啟結果)。 ExodeUI MCP 伺服器在 npm 上發佈為 claude-exode-mcp;它透過 npx 在本地運行,因此無需手動安裝任何其他內容。
步驟1:將伺服器新增至mcp.json
Cursor 從 mcp.json 檔案中讀取自訂 MCP 伺服器;專案級檔案位於儲存庫中的 .cursor/mcp.json 中。本機命令列伺服器使用帶有命令和參數的“stdio”類型。 ExodeUI 的條目使用 claude-exode-mcp 套件執行 npx(請參閱下面的程式碼區塊)。
步驟2:重新載入並檢查工具
重新載入 Cursor,開啟其 MCP 設定並確認 exode 伺服器正在運作並且列出了其工具。如果無法啟動,請檢查 npx 是否在您的終端機中運作以及您的 Node.js 版本是否為最新版本。
第三步:提示
用簡單的語言詢問並具體說明狀態和感覺:
- “創建一個具有打開和關閉狀態的開關,以及它們之間的軟彈簧。”
- “將載入狀態新增至輕輕閃爍的儲存按鈕,然後檢查是否成功。”
- “讓成功動畫更快並減少超調。”
使用 Claude Code 代替
在 Claude Code 中,使用一個指令新增相同伺服器:claude mcp add exode npx -y claude-exode-mcp。 Claude Code 也支援 .mcp.json 檔案中的專案級配置。
出貨前檢查
可以編輯文件的代理也可能會犯錯。將 .exode 檔案保留在 Git 中,以便更改可以比較,在 ExodeUI 編輯器中開啟結果以檢查時序和每個狀態,並測試簡化運動行為。
生產實施片段
// .cursor/mcp.json
{
"mcpServers": {
"exode": {
"type": "stdio",
"command": "npx",
"args": ["-y", "claude-exode-mcp"]
}
}
}
# Claude Code alternative
claude mcp add exode npx -y claude-exode-mcp要記住的關鍵 Principle
- 伺服器是npm套件claude-exode-mcp,使用npx運行
- 在Cursor中,將其新增至.cursor/mcp.json作為stdio伺服器
- 重新載入並確認工具出現在 MCP 設定中
- 提示狀態和感覺;之後調整數字
- 將文件保存在 Git 中並在編輯器中查看更改
常見問題解答
來源
- claude-exode-mcp — npm
- Model Context Protocol (MCP) — Cursor 文檔
- Connect Claude Code to tools via MCP — Claude Code 文檔