Rive MCP

公式

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

rive.app で表示

Rive MCPで何ができますか？

Riveファイルを管理 — 開いているRiveファイルでアートボードを追加、名前変更、サイズ変更、配置、フォーカスします。
シーンを編集 — 階層を確認し、オブジェクトを選択して、プロパティの更新、名前変更、複製、並べ替え、親の変更、要素の削除を行います。
デザインを作成 — シェイプ、パス、レイアウト、コンポーネントインスタンス、コンポーネントリスト、アセットベースの要素を作成します。
ボーンでリグを作成 — 長さと回転、またはヘッドとテールのポイントを指定してルートボーンやボーンチェーンを作成し、バインドしてウェイトを設定します。
アニメーションとインタラクションを追加 — リニアアニメーション、ステートマシン、ステート、トランジション、条件、キーフレーム、補間を編集します。
データバインディングを操作 — ビューモデル、プロパティ、インスタンス、バインディング、カスタムプロパティグループを作成します。

ドキュメント

Rive MCP Integration

[!NOTE]

MCP integration は現在、Windows および macOS のデスクトップ Editor でのみ利用できます。

MCP (Model Context Protocol) を通じて、Rive Editor を AI ツールに接続できます。最初のツール群は、複雑な View Model や、数百のステート／レイヤーを持つ State Machine、Layout、Shape などの作成といった反復作業を AI に任せられるよう設計されています。

YouTube video player

対応機能

Rive ファイルの作成と管理 — Artboard の追加、名前変更、サイズ変更、配置、フォーカスを行います。
シーンの確認と編集 — 階層の照会、オブジェクトの選択、プロパティの更新、要素の名前変更、複製、並べ替え、親の変更、削除を行います。
デザインの構築 — Shape、Path、Layout、Component Instance、Component List、アセットベースの要素を作成します。
ボーンによるリギング — 長さと回転、または始点と終点を指定してルートボーンやボーンチェーンを作成し、バインドしてウェイトを設定します。
アニメーションとインタラクションの作成 — Linear Animation、State Machine、State、Transition、Condition、Keyframe、補間を編集します。
データバインディングの操作 — View Model、Property、Instance、Binding、カスタム Property Group を作成します。
スクリプトとシェーダーの編集 — Luau スクリプトと WGSL シェーダーを管理し、ソースコードの更新、診断の実行、再コンパイル、テスト、コード検索、コンソール出力の確認を行います。

[!NOTE]

ツールの追加に伴い、機能の一覧は今後変更されます。

塗りつぶしに2つの色を設定したり、塗りつぶしやストロークの外側にグラデーションを配置したりするなど、ランタイムがファイルを拒否したりクラッシュしたりする原因となる編集は拒否され、元に戻されます。色は16進数フィールドと同じ方法で読み取られます。#fff は白として扱われ、red のような名前は拒否されます。

インストール

Cursor を使用する

1. Rive を開く

Mac または Windows 用の最新バージョンの Rive デスクトップアプリをインストールして開きます。

2. Cursor をセットアップする

Cursor アカウントを作成し、アプリをインストールします。

3. Cursor の設定を開く

Cursor を開き、右上の設定パネルに移動します。

4. カスタム MCP を追加する

Tools & MCPs タブを開き、Add Custom MCP をクリックします。

Open Cursor MCPs tab

5. 設定を保存する

次の JSON スニペットを mcp.json という名前でコンピューターに保存します。

{
  "mcpServers": {
      "rive": {
          "url": "http://127.0.0.1:9791/mcp"
      }
  }
}

6. 接続を有効にする

MCP 接続を On

7. 接続を確認する

正しくインストールされていれば、利用可能な MCP サーバーとして Rive が表示されます。

Cursor verified

[!NOTE]

Rive サーバーを利用するには、Rive デスクトップアプリを開いておく必要があります。

MCP のセットアップに関する詳細はこちらをご覧ください。

Claude in Terminal を使用する

YouTube video player

1. Rive を開く

macOS または Windows 用の最新バージョンの Rive デスクトップアプリをインストールして開きます。

2. MCP サーバーを追加する

ターミナルで次のコマンドを実行します。

claude mcp add --transport http rive http://127.0.0.1:9791/mcp

3. Claude を起動する

Claude を起動し、表示される指示に従います。

claude

何ができますか？

AI ツールを接続したら、AI へのプロンプト入力を始めましょう。

1. Rive ファイルを開く

Rive ファイルを開き、Artboard を作成します。

2. プロンプトを入力する

チャット UI にプロンプトを入力して Enter キーを押します。AI がリクエストを処理するまで少し時間がかかり、変更内容が開いている Rive ファイルに反映されます。

プロンプトの例：

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