Rive MCP

官方

Rive MCP 讓 AI 處理重複性任務，例如建立複雜的檢視模型、包含數百個狀態/層級的狀態機、版面配置、形狀等。

造訪 rive.app

你可以用 Rive MCP 做什麼？

建立與管理畫板 — 在目前 Rive 檔案中新增、重新命名、調整大小、排列及聚焦畫板。
檢視與編輯場景圖 — 查詢物件階層、選取元素、更新屬性、重新命名、複製、重新排序、變更父層或刪除節點。
建構設計元素 — 建立形狀、路徑、佈局、元件實例、元件清單及基於資產的元素。
編寫狀態機與動畫 — 編輯線性動畫、狀態機、狀態、轉換、條件、關鍵影格及插值。
設定資料繫結 — 建立檢視模型、屬性、實例、繫結及自訂屬性群組。
編輯腳本與著色器 — 管理 Luau 腳本與 WGSL 著色器、更新原始碼、執行診斷、重新編譯、測試、搜尋程式碼及讀取主控台輸出。

文件

Rive MCP 整合

export const YouTube = ({id, timestamp}) => { const videoSrc = timestamp ? https://www.youtube.com/embed/${id}?start=${timestamp} : https://www.youtube.com/embed/${id}; return ; }; <Note> MCP 整合目前僅適用於 Windows 和 macOS 的桌面編輯器。

您可以透過 MCP（模型上下文協定）將 Rive 編輯器連接到 AI 工具。第一組工具旨在讓 AI 處理重複性任務，例如建立複雜的視圖模型、包含數百個狀態/圖層的狀態機、佈局、形狀等。

支援的功能

建立和管理 Rive 檔案 — 新增、重新命名、調整大小、排列和聚焦畫板。
檢查和編輯場景 — 查詢階層、選取物件、更新屬性、重新命名、複製、重新排序、重新指定父級或刪除元素。
構建設計 — 建立形狀、路徑、佈局、元件實例、元件清單和基於資產的元素。
建立動畫和互動 — 編輯線性動畫、狀態機、狀態、轉場、條件、關鍵影格和插值。
使用資料繫結 — 建立視圖模型、屬性、實例、繫結和自訂屬性群組。
編輯腳本和著色器 — 管理 Luau 腳本和 WGSL 著色器、更新原始碼、執行診斷、重新編譯、測試、搜尋程式碼和讀取主控台輸出。

隨著更多工具的加入，此功能列表將隨時間演進。

安裝

使用 Cursor

安裝並開啟最新版本的 [Rive](https://rive.app/downloads) Mac 或 Windows 桌面應用程式。建立 [Cursor](https://www.cursor.com/) 帳戶並安裝應用程式。開啟 Cursor 並導覽至右上角的設定面板。

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-settings-button.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=39bb9802e31872b2317fed055e5cf24b" alt="Open cursor settings" width="1660" height="1090" data-path="images/editor/cursor-settings-button.png" />

開啟「工具與 MCP」分頁，然後點擊「新增自訂 MCP」。

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-settings.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=d82531f4741d02cdd01233d7517a5f25" alt="Open Cursor MCPs tab" width="1658" height="1080" data-path="images/editor/cursor-mcp-settings.png" />

將以下 JSON 片段儲存到您的電腦，檔名為 `mcp.json`。

```json theme={null}
{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}
```

將 MCP 連線 `On` 如果一切安裝正確，您應該會看到 Rive 作為可用的 MCP 伺服器。

<img src="https://mintcdn.com/rive/4WyvnoR1218cyi0r/images/editor/cursor-mcp-connection.png?fit=max&auto=format&n=4WyvnoR1218cyi0r&q=85&s=59ca6c71d1cc1317320ab8272eae0e16" alt="Cursor verified" width="1660" height="1104" data-path="images/editor/cursor-mcp-connection.png" />

<Note>
  若要讓 Rive 伺服器可用，您必須開啟 Rive Early Access 應用程式。
</Note>

有關設定 MCP 的更多資訊，請參閱此處。

在終端機中使用 Claude

安裝並開啟最新版本的 [Rive 桌面應用程式](https://rive.app/downloads)（適用於 macOS 或 Windows）。在終端機中執行以下指令：

```shell theme={null}
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
```

執行 Claude 並按照提示操作：

```shell theme={null}
claude
```

它能做什麼？

安裝 Cursor 並正確設定一切後，就可以開始對 AI 下達提示了。

開啟一個 Rive 檔案並建立一個畫板。在聊天介面中輸入您的提示，然後按下 Enter 鍵。AI 將花費一些時間處理請求。

範例提示：

```
Create a State Machine about birds with 20 states and 2 layers
```

請求處理完畢後，輸入 **End Prompt** 以允許 AI 對 Rive 檔案進行變更。