rive-mcp

rive-mcp

Claude から Rive（.riv）アニメーションを作成、編集、検査、レンダリング、ライブプレビューできます。Rive エディターもサブスクリプションも不要です。サーバーはお使いのマシン上で動作し、外部への通信は ネットワークアクセス に記載されているものだけです。

🌐 英語 | 日本語 | 简体中文 | 한국어 | Español | Français | Deutsch | Português (Brasil)

rive-mcp は、Claude（または任意の MCP クライアント）から .riv ファイルを完全に操作できる、無料の MCP（Model Context Protocol）サーバーです。エディターの起動が必要な公式 Rive MCP や、有料のサードパーティ製サーバーとは異なり、.riv ファイルだけで動作します。さらに、バイナリ形式を直接シリアライズして、.riv ファイルをゼロから構築することもできます。

レンダリングには、ヘッドレス Chromium 内で公式 Rive ランタイム（@rive-app/canvas-advanced WASM）を実行します。そのため、制限事項 に記載されている Canvas2D との違いを除き、プレビューはランタイムの出力に準拠します。

このアニメーションは riv_create だけで生成されました。Rive エディターは使用していません。

## 主な特徴

• JSON から .riv を生成 — シェイプ、グラデーション、埋め込み PNG、テキスト（パス上のテキストを含む）、ボーンとスキニング、IK、メッシュ変形、イージング付きキーフレームアニメーション、複数レイヤーのステートマシン、リスナー、イベント、物理演算のベイク、タイムラインまたはステートマシンから再生するパーティクル、埋め込みオーディオ（WAV/MP3/FLAC）
• プロ品質を実現する設計 — プロが調整した振幅とイージングを備える28種類のセマンティックなモーションプリセット（pop-in、段階的なrise-in、breathing、stagger-in、parallax-drift、shimmerなど）、OKLCHデザイントークンジェネレーター（riv_design_tokens）、モーション品質のLintルール（機械的な直線運動、瞬間移動、段階表示の欠如）、ワンコールの評価ループ（riv_critique：フレーム＋客観的な指標＋採点チェックリスト）
• 本格的なベクターアートのパイプライン — SVG（Figma/Illustrator/Iconify、またはオフライン時は@twemoji/svgなどのnpm SVGセット）を真のベジェパスとしてインポート（riv_import_svg、riv_asset_search）、既存の.rivファイルを編集可能な仕様に逆コンパイル（グラデーション、ブレンドモード、手動調整したアニメーショントラックも含む）（riv_decompile）、さらにトリムパス（描画アニメーション）、クリッピングマスク、ブレンドモード（影にはmultiply、グローにはscreen）、パス追従モーション、シーン仕様内のソロと分離ベジェハンドル
• 既存の.rivをロスレス編集 — あらゆるプロパティの変更、テキストの差し替え、サブツリーの削除（参照は自動で再マッピング）
• ローカルWeb Studio — ホットリロード対応のRiveエディター風3ペインUI（階層／クリック選択とドラッグが可能なキャンバス／インスペクター／タイムライン）。編集内容は即座に反映されます。また、キーフレームのイージングを手動調整するベジェ曲線エディター（コントロールポイントのドラッグ、ホールド／リニア／キュービックの切り替え、ワンクリックプリセット10種類）、ステートマシングラフビュー（Lintの検出結果と再生中のステートのハイライト表示を備えた、レイヤー／ステート／トランジションのノードグラフ）、動きをひと目で確認できるオニオンスキンオーバーレイ（前後0～5フレーム）も搭載
• Studioは進化を続けています — 埋め込みアセットのドラッグ＆ドロップによる画像差し替え（ロスレス置換）、複数アートボードのタブ、名前付きスナップショットの保存／復元／削除、ドープシートのマーキー選択／Shiftクリックによる複数選択とグループドラッグ、Ctrl+C/Vによるコピー＆ペースト、FKのドラッグでポーズを設定し、そのままキーフレームにベイクできるボーンオーバーレイ
• 人間 ⇄ AI のループ — Studio内の双方向エージェントチャット：フィードバックを入力すると（現在の選択項目／アートボード／アニメーション／時刻が添付されます）、AIがriv_studio_notes経由で内容を受け取り、ファイルを修正して同じスレッドに返信します。ブラウザーは即座に更新されます
• キャラクターを自動リグ化 — 1回の呼び出しでキャラクターのPNGを、切り抜きパーツ、ボーンでスキニングした頭部メッシュ、まばたき、アイドル／喜びのアニメーション、ステートマシンを備えたリグ済み.rivに変換
• データバインディングとパイプラインツール — riv_inspectはViewModelの定義、インスタンス（解決済みの値を含む）、列挙型、コンバーター、バインディングの配線をデコードします。これはまだ対応するツールが少ないデータバインディングの検査機能です。riv_batch_renderはCI向けに、glob対応の1回の呼び出しで複数のファイル×形式をエクスポートし、riv_ab_compareは2つのファイルを横並びに合成して、ラベル付きのGIF/APNGを1つ作成し、デザインレビューに利用できます
• エンドツーエンドでテスト済み — test/e2e.mjsはサーバーを起動し、samples/vehicles.rivに対してJSON-RPC経由でツールを呼び出します。生成されたファイルは、これらのテスト内で公式ランタイムにより読み込まれ、レンダリングされ、ステートマシンが駆動されます

ツール（32）

ツール	内容
riv_list	.riv ファイルを再帰的に検索します（サイズ、フォーマットバージョン）
riv_inspect	詳細なメタデータを表示します：アートボード、アニメーション（長さ／fps／ループ）、ステートマシンと入力に加え、ファイルで使用されている場合はデータバインディング構造（ViewModel 定義、解決済みの値を持つインスタンス、列挙型、コンバーター、バインドの接続）
riv_lint	静的診断：参照切れ、埋め込みアセットのサイズ超過、到達不能なステートマシンの状態、無条件の自己遷移（無限ループのリスク）、未使用の入力、トラックの最後のキーフレームでイージングが暗黙に破棄される問題、モーション品質ルール（すべてリニアな「ロボットのような」動き、オブジェクトの瞬間移動、スタガーの欠如、片側だけのスケール）
riv_render_frame	任意の時点を PNG にレンダリングします（インライン画像＋ファイル）
riv_render_gif	アニメーションをプレビュー GIF に変換します
riv_render_apng	アニメーション PNG をエクスポートします — 24 ビットカラー＋アルファ透明度（GitHub で再生可能）
riv_render_video	アニメーションまたはステートマシンを WebM 動画に録画します
riv_render_sprites	スプライトシート PNG＋JSON メタデータ（ゲームエンジン向け）
riv_batch_render	ジョブのリスト（単一ファイルまたは glob）を、1 回の呼び出しで png／gif／apng／webm／sprites にレンダリングします。ジョブごとのエラー分離と処理時間レポートに対応し、CI 向けに設計されています
riv_play_state_machine	入力を設定／発火 → 進行 → 状態遷移レポートを出力します（オプションでフレームをキャプチャ）
riv_generate_code	実際のアートボード名／SM 名／入力名を使った統合コード（React／JS／Vue／Svelte／Flutter）
riv_create	JSON シーン仕様から .riv を構築します — 公式ランタイムで検証し、プレビューを返します。ベジェハンドル付き頂点、弾性イージング、グラデーション、物理演算のベイク、パーティクル、セマンティックモーションプリセット（{"preset":"pop-in","target":"card"} は、プロ品質に調整されたキーフレーム（開始／終了／強調／環境ループ）にサーバー側で展開され、グループには stagger を使用）に対応します。また、タイムラインのフレームまたはステートマシンのエントリーで再生するオーディオ（WAV／MP3／FLAC）を埋め込みます — AudioAsset／AudioEvent は正しく書き込まれますが、再生できるのは GPU 対応の Rive ランタイムのみで、このサーバー独自のプレビューでは再生されません
riv_design_tokens	デザインの前にデザイントークンを生成します：OKLCH で調和させたパレット（＋WCAG コントラスト）、グラデーションの組み合わせ、Material-Motion の時間とイージングの役割、スペーシング／角丸／タイポグラフィのスケール — シードカラーとムードから決定論的に生成します
riv_import_svg	SVG → Rive ベジェシェイプ（Figma／Illustrator のエクスポート、アイコン、イラスト）：完全なキュービック頂点、複数輪郭のパス、グラデーション、ストローク、ネストされた変換に対応 — AI がプリミティブで描画するのではなく、プロ品質のアートワークを構成できます。フラグメントは imports を介して riv_create に取り込めます
riv_asset_search	Iconify の約 20 万点のプロ品質アイコンを検索し、Rive シェイプとして直接インポートします（ネットワーク接続が必要）
riv_lottie_import	Lottie／bodymovin JSON → Rive シーンフラグメント — LottieFiles の膨大な無料アニメーションアセットのアートと振り付けを取り込みます：正確なベジェイージング曲線を使ったキーフレーム付き変換（プリセットによる近似ではありません）、パスモーフィング（頂点ごとのキーフレーム）、シェイプ／ヌル／プリコンポーズレイヤー、グラデーション、トリムパスによる描画、表示ウィンドウに対応します。未対応の要素（テキストレイヤー、マスク、マットなど）は黙って破棄せず、数をカウントします
riv_decompile	.riv → 編集可能なシーン仕様：プロ品質のファイル（ベジェパス、グラデーション、ソロ、トリムパス、名前付きイージングを含むアニメーション）を調査またはリミックスできます。未対応の型は黙って破棄せず、数をカウントします
riv_critique	VLM にモーションを可視化する、1 回の呼び出しによるレビュー一式：フィルムストリップ（フレームを左から右に表示）、オニオンスキンのオーバーレイ（モーションの軌跡）、モーションレポート（アニメーション付きオブジェクトごとの正味変位ベクトル）、客観的な指標（ベジェ比率、パレットのフラグ、イージングの分布）＋lint の検出結果＋空間／方向の一貫性を含む、固定された 7 軸の評価チェックリスト（各オブジェクトはアートワークの前面に向かって移動しているか？ 視点は一貫しているか？）
riv_edit	既存の .riv ファイルを損失なく編集します：プロパティの設定、名前付きテキストの置換、サブツリーの削除、キーフレームの追加／置換／削除
riv_optimize	見た目の出力を変えずに .riv を縮小します：以前の編集で残った未参照の補間器／イベント／空のトラックを削除し、厳密にリニアな区間で冗長なキーフレームを間引きます（Douglas-Peucker、イージングを保持 — キュービック／ホールド区間には一切触れません）。計画を示す dryRun レポートを出力します
riv_extract_assets	.riv に埋め込まれた画像／フォントを抽出します
riv_visual_diff	2 つの .riv ファイルのピクセル差分を、差分を強調した画像とともに表示します
riv_ab_compare	2 つの .riv ファイルを同一条件でレンダリングし、ラベル付きの横並び（または縦並び）GIF／APNG 1 つにまとめて人がレビューできるようにします — riv_visual_diff がピクセル単位の差分を測定するのに対し、こちらは異なる 2 つのものを並べて再生し、目視で比較するためのツールです
riv_dump	低レベルのバイナリ構造をダンプします（typeKeys／プロパティ／階層）
riv_slice_image	ポリゴンを使って PNG からキャラクターのパーツを切り出します（切り抜きリギング向け）
riv_rig_character	キャラクター PNG → 1 回の呼び出しで完全にリギングされた .riv
riv_diff	2 つの .riv ファイルの構造差分
riv_studio	ローカルの Web Studio：Rive エディター風のダーク UI — 階層ツリー、キャンバスでの選択／ドラッグ／サイズ変更、インスペクター、キーフレームのタイムライン編集、ベジェ曲線エディター（制御点のドラッグ、ホールド／リニア／キュービック、10 種類のイージングプリセット）、ステートマシンのグラフビュー（ノードグラフ、遷移の詳細、lint で強調表示された状態、再生中のリアルタイム強調表示）、オニオンスキンオーバーレイ、元に戻す／やり直し、再生速度、ワンクリックでのエクスポート（PNG／APNG／GIF／WebM）、ライブプレビュー＋ホットリロード、EN／JA。share: true を指定すると、推測困難なトークン URL を使った読み取り専用の LAN ビューも開きます（再生／スクラブ／ステートマシン入力のみ。編集可能な Studio は 127.0.0.1 上に維持されます）
riv_studio_notes	Studio のエージェントチャットを読み取り（選択、アートボード、アニメーション、再生時間のコンテキストを自動添付）、返信を投稿します
riv_ui_detect	UI スクリーンショットを読み取ります — または svgPath を使って Figma／Illustrator の SVG を読み取ります：パネル、テキスト行、画像を検出し、矩形、角丸、塗りつぶし色を含む入れ子の要素ツリーと番号付きオーバーレイ PNG を返します。各要素について、再構築方法（vector-panel／vector-shape／vector-text／raster）と外観（panel／text／image／line）を別々のフィールドで示します。ジオメトリのみを扱い、ボタンとカードの区別はできません
riv_ui_prototype	スクリーンショット → もう 1 回の呼び出しでアニメーション付き .riv：検出された各要素に役割を割り当て、動作するプロトタイプを取得します — 再構築可能な要素にはベクター矩形、再構築できない要素には画像スライスを使用し、各役割に開始アニメーションを適用します。カードとボタンではホバーと押下にも対応します。カラーモデルが許容する場合、テキストは実際のアルファマットで切り出します。許容しない場合は移動させず、その場でフェードインし、その旨を警告します
riv_setup	1 回の呼び出しで環境をセットアップします：バンドルされた rive-design-guidelines スキルを .claude/skills/（プロジェクト）または ~/.claude/skills/（ユーザー）にインストールし、プロ品質のワークフローが自動的に起動するようにします — 通常のツール権限確認プロンプトで確認が行われます

スクリーンショット → アニメーションプロトタイプ

riv_ui_detect は UI スクリーンショットを番号付きオーバーレイのある要素ツリーに変換します。各要素にロールを割り当てると、riv_ui_prototype が動作する .riv を生成します。パネルは編集可能なベクター長方形、画像は画像スライスとして復元され、色モデルが対応できる場合は実際のアルファマットでテキストを切り抜きます。対応できない場合は、要素を移動させずその場でフェードインさせ、その旨を伝えます。検出器の制限は断定ではなく測定されています。詳しくは docs/ui-screenshot-to-prototype.md をご覧ください。

ベクターソースがまだある場合は、同じ 2 つのツールで imagePath の代わりに svgPath を渡してください。 Figma の右クリック →「SVG としてコピー」、または Illustrator からエクスポートしたファイルを使えます。そうすれば推定は一切行われません。長方形、塗り、角の半径、親子ツリーはファイルから読み取られ、アートワークは実際のベジェ頂点を保持します。<text> は編集可能な Rive テキストになります（デザイン独自の書体を使うには fonts を渡してください。グリフが不足しているテキストは文字化けではなく画像としてラスタライズされ、常に警告が表示されます）。埋め込みの <image> データは画像アセットになり、Figma のレイヤー名はロールのヒントとして取り込まれます。ネットワークからデータが取得されることはありません。ただし、FIGMA_TOKEN を設定してオプトインした場合は例外です。この場合、figmaUrl 引数を使って Figma の REST API からフレームを直接取得できます。この変数を設定していないと、その引数はエラーになりリクエストも行われません。また、この変数を読み取るほかのツールはありません。Rive エディターでは 2023 年から SVG の貼り付けが可能です。この 2 つの呼び出しで新たにできるのは、エディターも人も作業に介在せず、ロールによって動き（登場、環境に応じたループ、ホバー／押下状態）も加わることです。

ショーケース：プロ品質のアセットから、プロ品質のモーションを作成

4 つのサンプルシーンがパイプラインでエンドツーエンドに構築されており、それぞれ node samples/<name>/build-scene.mjs で再構築できます。

• samples/weather-widget/ — 上記のヒーローアニメーションです。UI の天気カードが、晴れ → 雨（稲妻の閃光あり）→ 晴れと、1 つのループタイムライン上で切り替わります。Twemoji の太陽／雲／稲妻を SVG としてインポートし、色は riv_design_tokens から、環境に応じた動きはプリセットから取得し、すべてをカード内にクリップします。
• samples/cosmic-journey/ — すべてのアートワークがプロとしてデザインされています（Twemoji のロケット、環のある惑星、月、星、彗星を npm 経由で SVG として取得し、riv_import_svg で変換）。色は riv_design_tokens から、動きはプリセットから取得し、riv_critique ループを通じて構図を調整しています。
• samples/night-delivery/ — プロ品質の .riv をリミックスしています。Rive の公式トラック（手描きのベジェアートと、手作業で調整された車輪／車体のアニメーショントラック）を riv_decompile で抽出し、Twemoji の月、スクロールする道路、screen 合成のヘッドライト光線とともに、新しい夜のシーンに組み込んでいます。
• samples/launch-success/ — 手作業で作成した SVG ＋トークン＋プリセット＋TrimPath による描画アニメーション＋パーティクル＋intro→idle ステートマシン。

Twemoji のアートワーク © Twitter/X およびコントリビューター、CC-BY 4.0。トラックのアートワークは Rive の公式サンプルファイルから。

デザイン品質のガイドライン

クライアントがシーン仕様を適当に作ると、riv_create の出力は平面的な「AI のプレースホルダー」のような形になりがちです。サーバーは構造的に品質を組み込んでいます。複雑なシーンでは、次のワークフローを推奨します。

1. riv_design_tokens → 返されたパレット／グラデーション／時間／イージングのみを使用します（生の 16 進数や場当たり的なタイミングを独自に作らないでください）。
2. 該当するプリセットがある場合は、キーフレームを手作業で作成するのではなく、モーションの presets を指定して riv_create を実行します。
3. riv_critique → フレームを確認し、7 軸のチェックリストで評価します。4 未満の項目を修正して、再実行します（少なくとも 2 回）。

同じワークフローに、手作業で作成する際の技法ルール（ベジェ曲線、イージングの意味、リギング）を加えたものが、rive-design-guidelines MCP プロンプトとして公開されています。専用の 6 つのセクションに、数値を使ったレシピ（間隔／タイミングのトークン、構成とレイヤーのルール、避けるべきアンチパターン）も含まれています。MCP プロンプトに対応していないクライアント向けには、ポータブルなスキルファイル skills/rive-design-guidelines/SKILL.md も用意されています。

クイックスタート

Claude Code プラグイン（推奨） — 1 回のインストールで MCP サーバー、デザインガイドラインのスキル、rive-designer エージェントを利用できます。

/plugin marketplace add ODU33104/rive-mcp
/plugin install rive-mcp@rive-tools

または、npm からインストールします。

# Register with Claude Code (user scope = available in every project)
claude mcp add --scope user rive -- npx -y rive-mcp-server

または、最初にグローバルインストールします。

npm install -g rive-mcp-server
claude mcp add --scope user rive -- rive-mcp

または、ソースから実行します。

git clone https://github.com/ODU33104/rive-mcp.git
cd rive-mcp
npm install
npm run build
claude mcp add --scope user rive -- node /absolute/path/to/rive-mcp/dist/index.js

登録を確認するには、claude mcp list を実行します。rive が Connected と表示されているはずです。登録後に Claude Code を再起動し、フォルダーに対して riv_list を実行するよう依頼して、ツールが応答することを確認してください。

Chromium ベースのブラウザーは次の順序で自動検出されます（Chrome または Edge がすでにインストールされていれば、追加のインストールは不要です）。

1. RIVE_MCP_CHROME 環境変数（Chrome／Edge の実行ファイルへのパス）
2. Playwright のブラウザーキャッシュ
3. インストール済みの Chrome → Edge

Node.js 20 以降と、Chromium ベースのブラウザー（Chrome、Edge、Chromium）が必要です。検出されない場合は、RIVE_MCP_CHROME 環境変数に実行ファイルのパスを設定してください。

ツール引数の相対パスは、MCP サーバーを起動した作業ディレクトリを基準に解決されます。不明な場合は絶対パスを使用してください。

Studio：人間 ⇄ AI のコラボレーション

riv_studio はローカルのウェブページを開き、人間が AI の作成したものを確認し、直接編集して変更を依頼できるようにします（初回起動時のガイド付き。UI は英語／日本語に対応しています）。

1. AI に作成させる — 「バウンドするボールの riv を作成して、riv_studio で開いて」
2. 直接編集する — キャンバス上のオブジェクトをクリック／ドラッグし、インスペクターで数値や色を調整します（変更は即時反映されます）。
3. AI に依頼する — Agent パネルに大きな変更を入力してから、チャットで「studio notes を確認して」と伝えます。
4. AI がファイルを編集すると、ブラウザーが即座にホットリロードされ、同じチャット内で変更内容が書き戻されます。

シーン JSON がなくても動作します。どの .riv でも、階層とインスペクターを使ってプロパティごとに編集できます。

機能紹介

おなじみのエディターと同じレイアウト — Studio は公式 Rive エディターと同じ操作モデルを採用しています。Design / Animate モードの切り替え、右クリックで Expand All / Collapse All / Deep Expand / Deep Collapse を実行でき、名前で絞り込める階層パネル、左パネル下部に並ぶ Data / Assets / Animations / Agent のアコーディオン、そして最下部にある Console / Problems / Changes ステータスバーを備えています（Problems は riv_lint と同じ静的チェックに連動しており、検出結果をクリックするとステートマシングラフ内の該当箇所に移動します）。

キーは想定どおりの場所で作成できます — Animate モードでは、アニメーション可能なインスペクターの各行にひし形のキーボタンが表示され、3 つの状態を示します。中抜き（トラックなし）、青い枠線（アニメーション中だが、再生ヘッド位置にキーなし）、青塗り（この位置にキーあり）。クリックすると、再生ヘッド位置でキーを設定または解除できます。下部のドープシートは、既存のキーを確認したり並べ替えたりするためのものです。

複数のアートボードとスナップショット — タブバーでファイル内のアートボードを切り替えたり、編集内容に名前付きスナップショットを保存、復元、削除したりできます。これは、元に戻す／やり直しとは別の履歴です。

タイムライン／ドープシート — トラックごとのキーフレームに対して、シーク、ズーム、再生速度の調整ができます。範囲選択または Shift キーを押しながらクリックして複数のトラックをまたいで選択し、選択したキーフレームをまとめてドラッグできます。また、Ctrl+C/V で再生ヘッド位置を基準にコピー／貼り付けできます（カーブも引き継がれます）。

ベジェカーブエディター — キーフレームの範囲を選択して制御点をドラッグするか、10 種類のイージングプリセットを適用できます。各範囲の補間方式は、ホールド／リニア／キュービックから切り替えられます。

ステートマシンのグラフ表示 — レイヤー、ステート、トランジションをノードグラフで表示します。トランジションをクリックすると、duration / exitTime / conditions を確認できます。Lint と連携しており、到達不能なステートは赤、無条件の自己遷移は黄色で表示され、再生中はアクティブなステートが光ります。

ステートマシンのプレイグラウンド — ブラウザーから bool 入力を切り替えたり、トリガーを発火させたりして、トランジションの動作を確認できます。

オニオンスキン — 周囲の 0～5 フレームを距離に応じた不透明度で残像表示し、モーションアークをひと目で確認できます。

直接編集 — 階層パネルまたはキャンバス上で選択し、インスペクターで位置／回転／スケール／色／テキストを編集できます。元に戻す／やり直しにも対応しています。

ボーンのオーバーレイとポージング — キャンバス上にボーンスケルトンを表示し、再生ヘッドに追従させます（スクラブ中、再生中、一時停止中のいずれも、ランタイムで評価されたポーズが表示されます）。一時停止中にドラッグしてボーンを回転（FK）させ、現在のポーズをキーフレームにベイクできます。

エージェントとのチャット — 提案を表示するだけでなく、双方向に会話できます。メッセージには現在の選択、アートボード、アニメーション、再生ヘッドの時刻が添付されます。AI は riv_studio_notes を介して内容を受け取り、結果を同じスレッドに返信するため、Studio を離れずに変更内容を確認できます。

ワンクリックでエクスポート

Studio のツールバーで PNG / APNG / GIF / WebM をクリックすると、現在のアニメーションをその場でレンダリングできます。簡単なプレビューのエクスポートに MCP の往復は必要ありません。

キャラクターアニメーション

キャラクターの PNG 画像 1 枚を、自然に動く .riv に変換します：

• riv_slice_image でポリゴンを使って耳や尻尾などを切り出し、riv_rig_character でリグ全体を一度の呼び出しで組み立てます。ピボットグループ、傾きに対応する継ぎ目のない 2 ボーンの頭部メッシュ、ベクターのまぶたのまばたき、アイドル／ハッピーアニメーション、happy トリガーが含まれます
• または riv_create を使って手動で構成します。画像の埋め込み、頂点ごとのキーフレームを備えたグリッドメッシュ、距離加重スキニングを備えたボーンチェーン、IK 制約を利用できます

プロンプトの例

クローンしたリポジトリでの例です。npm 版の場合、サンプルはパッケージ内の（グローバルインストール時の）<npm root -g>/rive-mcp-server/samples/ にあります。または、独自の .riv ファイルのパスを使用してください。

• 「samples/ 内の riv ファイルを一覧表示して、vehicles.riv を調べてください」
• 「curves アニメーションを GIF としてレンダリングしてください」
• 「夜空に降る雪の riv を作成して、studio で開いてください」
• 「characters/cat.png にリグを設定してください。耳と尻尾が動き、クリックすると嬉しそうに見えるようにしてください」
• 「studio のメモを確認してください」(Studio UI にフィードバックを入力した後)
• 「このファイル用の React 統合コードを書いてください」

開発

npm run build      # vendor runtime assets + tsc
npm run test:e2e   # spawns the real server, exercises all 32 tools over JSON-RPC

docs/riv-format.md には、ライターが使用する .riv バイナリ形式について、リバースエンジニアリングで明らかになった知識が記載されています（typeKeys／propertyKeys は、vendor/rive-defs/defs.json に同梱された公式の rive-runtime 型定義から解決されています）。

制限事項

• テキストランの列挙はランタイム API では公開されていません（名前によるアクセスは可能です）
• GIF 出力は透過に対応していません（背景色に合成されます）
• Canvas2D プレビューのレンダラーでは、ファイル上には存在しないメッシュの継ぎ目が表示されることがあります（WebGL／Skia では正常にレンダリングされます）
• fill.feather／stroke.feather（ベクターブラー）は .riv に正しく書き込まれますが、このサーバーの Canvas2D プレビューパイプラインではレンダリングされません。対応するのは GPU Rive Renderer のみです
• Luau スクリプトと Layout エンジンは生成されません（ランタイム仕様がまだ変更中のため）
• スクリーンショット検出（riv_ui_detect）は、わずかなピクセル変化にも敏感です。ロスレス PNG の再エンコードでは同一の結果になりますが、RGB ノイズが ±2 あるだけでほとんどのベクターパネルが再分類され、要素数がほぼ 3 倍になることがあります。出荷前に、フラット塗りつぶしはすべてスクリーンショットと照合してテストレンダリングされるため、最終的に残るものは一致度が測定されています。その代償として、写真の多いページでは編集可能性より忠実度が優先され、ほとんどの要素がフェードするだけのスライスとして出力されます。測定値やその他の制限については、docs/ui-screenshot-to-prototype.md を参照してください

ネットワークアクセス

サーバーはローカルで動作します。外部へのリクエストは、次の場合にのみ行われます：

• riv_asset_search：Iconify API（api.iconify.design）
• riv_ui_detect／riv_ui_prototype の figmaUrl：Figma REST API（api.figma.com）。サーバーの環境に FIGMA_TOKEN が設定されている場合に限ります。設定されていない場合、リクエストは行われません
• share: true を指定した riv_studio：同じ LAN 上のほかのデバイスから開ける読み取り専用ビューです。これは着信トラフィックであり、外部への呼び出しではありません
• 最初に実行する npx -y rive-mcp-server：パッケージを npm からダウンロードします

ライセンス

無料で利用できます（個人・商用）—ただし、オープンソースではありません。これはソースコードを公開したフリーウェアです：

• ✅ ソフトウェアは自由に使用できます。生成された .riv ファイルとコードは、制限なく利用できます
• ❌ 改変、再配布、二次的著作物の作成は禁止されています
• ❌ リバースエンジニアリング、およびコードの AI 支援による分析、抽出、複製は禁止されています（学習データとしての使用を含む）

正確な条件については LICENSE を参照してください。同梱されるサードパーティ製コンポーネント：Inter フォント（OFL 1.1）、Rive ランタイムおよび型定義（MIT、© Rive, Inc.）。

rive-mcp は非公式のツールであり、Rive, Inc. とは提携しておらず、同社による推奨も受けていません。