Rive MCP

公式

Rive MCPは、複雑なビューモデル、数百の状態やレイヤーを持つステートマシン、レイアウト、シェイプなどの作成といった反復的なタスクをAIに処理させることができます。

rive.app で表示

Rive MCPで何ができますか？

Riveファイルとアートボードの管理 — 開いているRiveファイル内で、アシスタントにアートボードの追加、名前変更、サイズ変更、配置、またはフォーカスを依頼します。
シーンオブジェクトの検査と編集 — オブジェクト階層をクエリし、要素を選択して、プロパティの更新、名前変更、複製、並べ替え、親の変更、または削除を行います。
プログラムによるデザインの構築 — シーン内にシェイプ、パス、レイアウト、コンポーネントインスタンス、コンポーネントリスト、およびアセットベースの要素を直接作成します。
アニメーションとインタラクションの作成 — リニアアニメーション、ステートマシン、ステート、トランジション、条件、キーフレーム、および補間値を編集します。
データバインディングの設定 — 複雑なデータ駆動型デザイン用に、ビューモデル、プロパティ、インスタンス、バインディング、およびカスタムプロパティグループを作成します。
スクリプトとシェーダーの編集 — LuauスクリプトとWGSLシェーダーを管理し、ソースコードを更新し、診断を実行し、再コンパイルし、テストし、コードを検索し、コンソール出力を読み取ります。

ドキュメント

Rive MCP 統合

注記

MCP 統合は現在、Windows および macOS 向けデスクトップエディタでのみ利用可能です。

Rive エディタを MCP（Model Context Protocol）を通じて AI ツールに接続できます。最初のツールセットは、複雑な View Model、数百のステートやレイヤーを持つ State Machine、レイアウト、シェイプなどを生成するような反復的なタスクを AI に処理させるために設計されています。

サポートされている機能

Rive ファイルの作成と管理 — アートボードの追加、名前変更、サイズ変更、配置、フォーカス。
シーンの検査と編集 — 階層のクエリ、オブジェクトの選択、プロパティの更新、名前変更、複製、並べ替え、リペアレント、要素の削除。
デザインの構築 — シェイプ、パス、レイアウト、コンポーネントインスタンス、コンポーネントリスト、アセットベースの要素の作成。
アニメーションとインタラクションの作成 — リニアアニメーション、ステートマシン、ステート、トランジション、条件、キーフレーム、補間の編集。
データバインディングの操作 — ビューモデル、プロパティ、インスタンス、バインディング、カスタムプロパティグループの作成。
スクリプトとシェーダーの編集 — Luau スクリプトと WGSL シェーダーの管理、ソースコードの更新、診断の実行、再コンパイル、テスト、コードの検索、コンソール出力の読み取り。

情報

この機能リストは、ツールが追加されるにつれて今後も拡張される予定です。

インストール

Cursor を使用する場合

Mac または Windows 向けの最新版 [Rive](https://rive.app/downloads) デスクトップアプリをインストールして開きます。 [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" />

Tools & MCPs タブを開き、Add Custom 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" />

注記

Rive サーバーを利用可能にするには、Rive Early Access アプリを開いておく必要があります。

MCP のセットアップに関する追加情報はこちらにあります。

Claude in Terminal を使用する場合

macOS または Windows 向けの最新版 [Rive デスクトップアプリ](https://rive.app/downloads) をインストールして開きます。ターミナルで次のコマンドを実行します：

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

Claude を実行し、プロンプトに従います：

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

何ができるのか？

Cursor がインストールされ、すべてが正しく設定されたら、AI へのプロンプト入力を開始します。

Rive ファイルを開き、アートボードを作成しておきます。チャット UI にプロンプトを入力し、Enter キーを押します。AI がリクエストを処理するのに少し時間がかかります。

プロンプトの例：

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

リクエストが処理されたら、**End Prompt** と入力して AI が Rive ファイルに変更を加えられるようにします。