Rive MCP: Claude Code、Cursor、Codex を Rive に接続する方法
Rive MCP サーバーの仕組み、Claude Code と Cursor を Rive エディターに接続する方法、AI でできることとできないこと、Rive の組み込みエージェントや Rive CLI との比較。
核心
Rive MCP サーバーは、Mac および Windows 用の Rive デスクトップ エディターに組み込まれています。 Rive が開いている間は http://127.0.0.1:9791/mcp で実行され、Claude Code や Cursor などの AI コーディング ツールがそれに接続して、開いているファイルにアートボード、シェイプ、アニメーション、ステート マシン、ビュー モデル、スクリプトを作成できます。 Claude Code では、claude mcp add --transport http rive http://127.0.0.1:9791/mcp という 1 つのコマンドで接続します。
このガイドについて
ExodeUI は Rive または Anthropic とは関係ありません。このガイドは、2026 年 10 月時点の Rive 独自のドキュメントに基づいています。Rive の AI 機能はすぐに変わるため、手順が表示されている内容と一致しない場合は、公式 MCP ページを確認してください。独自の MCP サーバーを持つ ExodeUI を作成し、最後に 2 つを比較します。
Rive MCP サーバーでできること
Rive 氏によると、最初のツールは、ビュー モデルや数百の状態とレイヤーを持つステート マシンの構築など、反復的な作業を目的としています。 Rive のドキュメントによると、接続された AI ツールは次のことが可能です。
- ファイルの作成と管理: アートボードの追加、名前変更、サイズ変更、配置、フォーカス
- シーンの検査と編集: 階層のクエリ、オブジェクトの選択、プロパティの更新、要素の複製、並べ替え、親の再設定、または削除
- デザインの構築: 形状、パス、レイアウト、コンポーネントのインスタンス、リスト
- アニメーションとインタラクションの作成: リニア アニメーション、ステート マシン、状態、遷移、条件、キーフレーム、補間
- データ バインディングの操作: モデル、プロパティ、インスタンス、バインディングを表示する
- Luau スクリプトと WGSL シェーダーの編集: コードの更新、診断の実行、再コンパイル、テスト、コンソール出力の読み取り
Rive MCP と Claude Code のセットアップ方法
MCP はデスクトップ エディターでのみ動作し、ブラウザー バージョンでは動作しません。まず Rive を開いてから、AI ツールを接続します。
1. Rive デスクトップ アプリを開きます
macOS または Windows 用の最新の Rive デスクトップ エディターを riv.app/downloads からインストールし、作業するファイルを開きます。
2. MCP サーバーを追加します
ターミナルで次を実行します: claude mcp add --transport http rive http://127.0.0.1:9791/mcp
3.Claude Codeを起動する
クロードを走らせてください。 Rive が開いた後に起動すると、Rive ツールが見つかるようになります。
4. コードではなく機能でプロンプトを表示する
見たいものと変えてはいけないものを記述します。たとえば、「バネで 1.05 にスケールするボタンにホバー状態を追加し、押された状態はそのまま保持する」などです。
Cursor と Codex で Rive MCP をセットアップする方法
Cursor で、[設定] を開き、[ツールと MCP] に移動し、[カスタム MCP の追加] を選択して、URL http://127.0.0.1:9791/mcp を持つ rive という名前のサーバーを追加し、接続をオンにします。 Rive は Claude Code および Cursor を文書化します。サーバーはローカル HTTP MCP サーバーであるため、Codex などの HTTP MCP サーバーをサポートする他のクライアントは同じ URL で接続できます。
Rive MCP と Rive の組み込み AI エージェントの比較
Rive にはエディター内に AI エージェントもあります。どちらもファイルを編集できます。違いは、誰が支払うか、そしてエージェントが他に何を確認できるかです。
- 組み込みエージェントは Rive のプランで実行されます: Free と Cadet に限定されますが、Voyager では高度なモデル、トップアップ クレジット、独自の API キーが使用できます
- MCP では、Claude や Cursor など、すでに支払った AI サブスクリプションを使用します。
- 外部エージェントはアプリのコード、メモ、ドキュメントを読み取ることもできるため、同じセッションで Rive ファイルを編集してアプリに接続できます。
- 組み込みエージェントはセットアップが不要で、ブラウザエディタで動作します。
Rive MCP と Rive CLI の比較
Rive の新しい CLI は別のルートです。開いているエディターを駆動する代わりに、コーディング エージェントはシーンを Rive マークアップ言語 (RML) のテキストとして書き込み、CLI はアプリの .riv ファイルまたはエディターで開く .rev ファイルを構築します。ローカル プレビューを表示し、ウィンドウなしでフレームをレンダリングしてテストを実行でき、プロジェクトをテキストのフォルダーとして保持するため、バージョン管理内に保存できます。エディターでデザイナーと作業するには、MCP を使用します。エージェントがコードから Rive グラフィックを構築または編集するときに CLI を使用します。
始める前に知っておくべき制限
Rive の MCP 統合はまだ始まったばかりであり、実際的な制限がいくつかあります。
- デスクトップ エディターのみ、macOS および Windows 上で、Rive がファイルで開かれている必要があります
- AI は開いているファイルに対して機能するため、信頼する前に画面上の結果を確認してください。
- Rive スプラッシュ画面を使用せずに .riv ファイルを公開するには、Cadet の有料プランが必要です。Cadet では、1 シートあたり月額 9 ドルが年額請求されます。
- コードを説明するプロンプトよりも、必要な結果を説明するプロンプトの方が効果的です。
代替案: ExodeUI の MCP サーバー
ExodeUI は、インタラクティブな UI とアニメーション用のブラウザーおよびデスクトップ ツールです。また、MCP サーバーも備えているため、Claude Code、Cursor、その他の AI コーディング ツールを使用して、平易な言語のプロンプトからアニメーションを作成および編集できます。結果は、ステート マシン、スプリング物理学、コード制御の入力とイベントを含む 1 つの開いた .exode JSON ファイルとなり、React、Vue、Svelte、Angular、Solid、React Native、SwiftUI、Flutter のランタイムによって再生されます。キャラクターアニメーションよりもインタラクティブな製品UIに適しています。すでに Rive で作業している場合は、MCP サーバーを選択するのが簡単です。
実装コード例
# Rive desktop editor must be open first
claude mcp add --transport http rive http://127.0.0.1:9791/mcp
# then start Claude Code
claude覚えておきたい原則
- Rive MCP サーバーは、http://127.0.0.1:9791/mcp にある Rive デスクトップ エディタ内で実行されます。
- Claude Code は 1 つのコマンドで接続します。 Cursor はツールと MCP を介して接続します
- 開いているファイルでシェイプ、アニメーション、ステート マシン、ビュー モデル、Luau スクリプトを構築できます。
- Rive CLI は、コードから Rive ファイルを構築するエージェント用の別個のテキストベースのルートです。