rive-mcpとは？
rive-mcpはGitHubユーザーのODU33104が開発したもので、MCPクライアントにRiveのアニメーションファイル用のツールを35個提供します。.rivのバイナリ形式を直接書き出すため、エージェントは図形、グラデーション、ボーン、メッシュ、ステートマシン、キーフレームを含むJSONのシーン定義からファイルを作ったり、既存ファイルを劣化なく編集したり、データバインディングを調べたり、lintにかけたりできます。PNG、GIF、APNG、WebM、スプライトシートへのレンダリングには、ヘッドレスChromium上で動くRive公式のWebAssemblyランタイムを使います。
キャラクターのPNGを1回の呼び出しでまばたきや待機アニメーション付きのリグ済み.rivに変換でき、SVGとLottieの読み込み、Lottieへの書き出しにも対応し、エージェントが作ったものを編集してメモを残せるローカルのWeb Studioも開けます。一方、Rive自身のMCPサーバーはEarly Access版のRiveエディターが起動している必要があります。
プロジェクトは2026年7月17日に始まり、確認時点でGitHubスターは32、2026年10月29日にv0.12.0をnpmで公開しました。TypeScriptで書かれており、Rive社とは関係ありません。
rive-mcpのインストール方法
npx -y rive-mcp-serverrive-mcpは使う価値があるか？
rive-mcpの最大の特長は、Riveエディターが要らないことです。Riveの公式MCPサーバーはEarly Access版のデスクトップアプリに組み込 まれており、そのアプリがファイルを開いた状態で起動しているあいだしか動きません。このサーバーはMITライセンスのRiveランタイムにある型定義を使ってバイナリ形式を自前で読み書きするので、エージェントはCI上でも、Riveのアカウントがないマシンでも、ゼロからアニメーションを作れます。プレビューは公式ランタイムで描かれるため、実際に配信される見た目に近くなります。
ツールの範囲はファイル編集をはるかに超えます。riv_rig_characterはキャラクターのPNGをパーツに切り分け、ボーン、スキニングされた頭部メッシュ、まばたき、待機と喜びのアニメーション、ステートマシンを1回の呼び出しで組み立てます。riv_lintは壊れた参照、到達できない状態、すべて線形のロボットのような動きを指摘し、riv_critiqueはフレームと指標をまとめてビジョンモデルが自分の作品を評価できるようにし、riv_preflightはWebからUnityまで、どのランタイムでファイルを再生できるかを示します。127.0.0.1で動くローカルのStudioには、人が結果を直すためのタイムライン、インスペクター、カーブエディターがあります。
注意点：ライセンスです。READMEとLICENSEは、これをソース公開型のフリーウェアと説明しています。商用を含め無料で使えますが、書面の許可なく改変、フォーク、再配布はできず、AIを使ったコードの解析も禁じられています。メンテナーは1人でスターは32なので、作者が手を引けばコミュニティによるフォークは期待できません。READMEは実際の欠点も挙げています。GIFには透過がなく、Canvas2Dのプレビューではファイルに存在しないメッシュの継ぎ目が見えることがあり、フェザーは書き込ま れてもプレビューされず、Luauスクリプトとレイアウトエンジンは生成されません。
結論：プロンプトからローディング表示、アイコン、簡単なキャラクターのループを作るなら、私たちが調べた中で最も高機能な手段で、生成したファイルは自分のものになります。サーバー自体は、所有する依存関係ではなく、無料で借りている道具として扱ってください。
真価を発揮する場面
小さなアプリスタジオのフロントエンド開発者
モーションデザイナーを雇わずに、空の状態を示すアニメーションのイラストを出したい
デザイントークンとモーションのプリセットでシーンを作らせ、riv_critiqueを何度か回してから、riv_generate_codeでReactのコンポーネントを出力します。無料ですが、Studioでの確認に1時間ほど見ておいてください。
インディーのゲーム開発者
1枚のPNGで描いた2Dマスコットにリグを入れたい
riv_slice_imageで耳と尻尾を切り出し、riv_rig_characterでボーン、まばたき、待機ループを作り、riv_render_spritesでエンジン用のシートを書き出します。Canvas2Dのプレビューでは継ぎ目が見えることがあるので、メッシュはGPUランタイムで確認してください。
Lottieのライブラリを持つデザインシステムチーム
既存のLottieアニメーションをRiveに移したい
riv_lottie_importがキーフレームとパスを変換し、移せなかった要素を数えます。riv_visual_diffとriv_ab_compareで差分を示し、承認に回せます。
導入前に確認すること
- 導入
- Node.js 20以上と、Chrome、Edge、Chromiumのいずれかが必要です。claude mcp add --scope user rive -- npx -y rive-mcp-serverを実行するか、リポジトリのマーケットプレイスからClaude Codeプラグインを入れます。riv_setupで同梱のデザインガイドラインのスキルを追加できます。
- 連携
- stdio経由のツール35個。React、JavaScript、Vue、Svelte、Flutter向けのコード生成、SVGとLottieの読み込み、Lottieへの書き出し、Iconifyのアイコン検索、FIGMA_TOKENを使った任意のFigmaフレーム取り込み。
- データとプライバシー
- ローカルで動きます。外部への通信は、アイコン検索時のIconify、FIGMA_TOKEN設定時のFigma、初回起動時のnpmに限られます。Studioは127.0.0.1にバインドされ、share: trueにすると、推測できないトークン付きURLの先にLAN向けの読み取り専用ビューが開きます。
- 大規模利用時のコスト
- 利用者数に関係なく無料で、商用利用も含みます。有料プランやサポート契約は公開されていません。
- 制限
- GIFは透過なし、フェザーとGPU専用の音声はプレビューされず、Luauスクリプトとレイアウトは生成されず、スクリーンショットからプロトタイプへの検出はわずかなピクセルのノイズに敏感です。
良い点
- Riveエディターもサブスクリプションも不要
- Rive公式ランタイムでレンダリング
- PNGから1回の呼び出しでキャラクターをリギング
- lint、講評、ランタイム事前チェックのツール
気になる点
- フリーウェアライセンスでフォークや改変は不可
- メンテナーは1人、スターは32
- プレビューが一部でGPUレンダリングと異なる
- Node.js 20とChromium系ブラウザーが必要
おすすめの人
Riveエディターを持たずに、エージェントにRiveアニメーションを作らせたり調整させたりしたいフロントエンド開発者や小規模なプロダクトチームに向いています。
rive-mcpの代替
rive-mcp：よくある質問
- rive-mcpは使う価値があるか？
- rive-mcpは.rivファイルに対してRive自身のサーバーよりはるかに多くのことができますが、個人が作る制限の強いライセンスのフリーウェアなので、ほかの手段で作り直せるものだけをこの上に築くべきです。 評価は5点満点中3.5点です。
- rive-mcpの料金は？
- 独自のフリーウェアライセンスのもと、個人利用も商用利用も無料です。改変や再配布には作者の書面による許可が必要です。生成された.rivファイルとコードは利用者のものです。
- rive-mcpの欠点は？
- フリーウェアライセンスでフォークや改変は不可; メンテナーは1人、スターは32; プレビューが一部でGPUレンダリングと異なる; Node.js 20とChromium系ブラウザーが必要.
- rive-mcpは誰に向いているか？
- Riveエディターを持たずに、エージェントにRiveアニメーションを作らせたり調整させたりしたいフロントエンド開発者や小規模なプロダクトチームに向いています。
- チームや本番環境でrive-mcpを使うと費用はいくらか？
- 利用者数に関係なく無料で、商用利用も含みます。有料プランやサポート契約は公開されていません。
- rive-mcpは企業データを扱っても安全か？
- ローカルで動きます。外部への通信は、アイコン検索時のIconify、FIGMA_TOKEN設定時のFigma、初回起動時のnpmに限られます。Studioは127.0.0.1にバインドされ、share: trueにすると、推測できないトークン付きURLの先にLAN向けの読み取り専用ビューが開きます。
- rive-mcpの代わりになるものは？
- 当サイトでレビューした中で最も近い代替はFigma MCP Server 、 Illustrator MCP Serverです。
回答確認日：2026年11月13日