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 (Model Context Protocol) を通じて、Rive エディターを AI ツールに接続できます。最初のツールセットは、複雑なビューモデル、数百の状態やレイヤーを持つステートマシン、レイアウト、シェイプなどの反復的なタスクを 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" />

[ツールと 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 を使用する

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 ファイルに変更を加えられるようにします。