Rive MCP：如何將 Claude Code、Cursor 和 Codex 連接到 Rive

關於本指南

ExodeUI 不隸屬於 Rive 或 Anthropic。本指南基於截至 2026 年 10 月的 Rive 自己的文件。 Rive 的 AI 功能變化很快，因此如果步驟與您所看到的不匹配，請檢查官方 MCP 頁面。我們製作了ExodeUI，它有自己的MCP伺服器，最後我們將兩者進行了比較。

Rive MCP 伺服器可以做什麼

Rive 表示，第一個工具旨在重複性工作，例如建立具有數百個狀態和圖層的視圖模型或狀態機。根據 Rive 的文檔，連接的人工智慧工具可以：

• 建立和管理檔案：新增、重新命名、調整大小、排列和聚焦畫板
• 檢查和編輯場景：查詢層次結構、選擇物件、更新屬性、複製、重新排序、重新設定父級或刪除元素
• 建置設計：形狀、路徑、佈局、元件實例和列表
• 創建動畫和互動：線性動畫、狀態機、狀態、過渡、條件、關鍵影格和插值
• 使用資料綁定：檢視模型、屬性、實例和綁定
• 編輯 Luau 腳本和 WGSL 著色器：更新程式碼、執行診斷、重新編譯、測試和讀取控制台輸出

如何設定 Rive MCP 與 Claude Code

MCP 僅適用於桌面編輯器，不適用於瀏覽器版本。首先開啟Rive，然後連接您的AI工具。

如何使用 Cursor 和 Codex 設定 Rive MCP

在 Cursor 中，開啟“設定”，前往“工具和 MCPs”，選擇“新增自訂 MCP”，然後新增名為 rive 且 URL 為 http://127.0.0.1:9791/mcp 的伺服器，然後開啟連線。 Rive 記錄 Claude Code 和 Cursor。由於伺服器是本機 HTTP MCP 伺服器，因此支援 HTTP MCP 伺服器的其他用戶端（例如 Codex）可以使用相同的 URL 進行連線。

Rive MCP vs Rive's built-in AI Agent

Rive編輯器內還有一個AI代理程式。兩者都可以編輯您的文件。差別在於誰付費以及代理商可以看到什麼。

• 內建代理程式在 Rive 計劃上運行：僅限 Free 和 Cadet，具有高級模型、充值積分和 Voyager 上您自己的 API 金鑰
• 對於 MCP，您可以使用已付費的 AI 訂閱，例如 Claude 或 Cursor
• 外部代理還可以讀取您的應用程式程式碼、註釋和文檔，因此它可以編輯 Rive 文件並將其在同一會話中連接到您的應用程式
• 內建Agent無需設置，可在瀏覽器編輯器中運行

Rive MCP 與 Rive CLI

Rive 的較新 CLI 是一條不同的路線。您的編碼代理不是驅動開啟的編輯器，而是使用 Rive 標記語言 (RML) 將場景編寫為文本，並且 CLI 為您的應用程式建立 .riv 檔案或在編輯器中開啟的 .rev 檔案。它顯示本地預覽，可以渲染幀並在沒有視窗的情況下運行測試，並將專案保存為文字資料夾，以便它可以存在於版本控制中。使用MCP在編輯器中與設計師一起工作；當代理程式從程式碼建立或編輯 Rive 圖形時使用 CLI。

開始之前需要了解的限制

Rive 的 MCP 整合還很年輕，並且有一些實際限制。

• 僅限桌面編輯器，在 macOS 和 Windows 上，且 Rive 必須與您的檔案一起打開
• 人工智慧對開啟的文件起作用，因此在信任它之前請檢查螢幕上的結果
• 在沒有 Rive 啟動畫面的情況下發布 .riv 檔案仍然需要付費計劃，由 Cadet 提供，每個席位每月 9 美元，按年計費
• 描述您想要的結果的提示比描述程式碼的提示效果更好

替代方案：ExodeUI 的 MCP 伺服器

ExodeUI 是一個用於互動式 UI 和動畫的瀏覽器和桌面工具。它還擁有 MCP 伺服器，因此 Claude Code、Cursor 和其他 AI 編碼工具可以根據簡單的語言提示建立和編輯動畫。結果是一個開啟的 .exode JSON 文件，其中包含狀態機、彈簧物理以及代碼控制的輸入和事件，由 React、Vue、Svelte、Angular、Solid、React Native、React Native、Solid、React Native、React Native、ZQX0p它比角色動畫更適合互動式產品UI。如果您已經在 Rive 中工作，那麼它的 MCP 伺服器是更簡單的選擇。