Riveはインタラクティブアニメーションのツールとしてかなり気に入って使っています。ただ、.rivファイルをプログラムから直接いじる手段がほぼありませんでした。公式のMCPサーバーはエディタが起動している前提だし、サードパーティのものは有料。「.rivさえあれば動く、なんならAIに最初から.rivを作らせたい」というのが動機で、バイナリフォーマットを自分で解析してMCPサーバーを書きました。rive-mcpという名前で公開しています。
これは実際にこのツールだけで生成した天気ウィジェットです。太陽・雲・稲妻のアートワークはプロ製（Twemoji）をSVGで取り込み、配色と動きはサーバーが提供するトークンとプリセットで組んでいます。Riveエディタは一度も開いていません。
npmで入ります。
npm install -g rive-mcp-server
claude mcp add --scope user rive -- rive-mcp
Claude Codeを使っている場合は、プラグインとして入れる方が楽です。リポジトリ自体がプラグインマーケットプレイスになっていて、2コマンドでMCPサーバー本体・後述のデザインガイドラインSkill・Rive制作専用のサブエージェント（rive-designer）がまとめて入ります。
/plugin marketplace add ODU33104/rive-mcp
/plugin install rive-mcp@rive-tools
あとはClaudeに日本語で「跳ねるボールのrivを作って」とか頼むだけです。.rivバイナリを直接生成して、プレビューまで返してくれます。
何ができるか
ツールは全部で28個あります。大きく分けると
- 生成: JSONでシーンを指定すると.rivに変換する
riv_create。キャラのPNG1枚からリグ済み.rivを作るriv_rig_characterという変わり種もあります - 取り込み: SVG・Lottie・既存の.rivをシーン仕様に変換する
riv_import_svg/riv_lottie_import/riv_decompile。Iconifyのアイコンを検索してそのまま取り込むriv_asset_searchもここです - 設計支援: 配色を組む
riv_design_tokensと、できあがった動きを批評するための材料を返すriv_critique - 編集: プロパティやテキストの変更はもちろん、キーフレームの追加・削除まで無損失でできる
riv_edit - 解析:
riv_inspectやriv_dump、riv_diffなど、中身を覗くためのツール一式。壊れた構造を診断するriv_lintもここに含まれます - 出力: PNG、GIF、透過対応のAPNG、WebM動画、スプライトシート
- 実行: ステートマシンに入力を送って、どう遷移するか確認できる
riv_play_state_machine - 統合: React/Vue/Svelte/Flutter向けの組み込みコードを吐く
riv_generate_code - UI: ローカルで動くWebスタジオ
riv_studio
レンダリングは公式ランタイム（@rive-app/canvas-advancedのWASM）をheadless Chromiumで動かしています。見た目は本番とまったく同じです。自前でレンダラを実装するのは怖かったので、ここは公式に乗っかりました。
Webスタジオはこんな見た目です。階層ツリー、キャンバス上でのドラッグ操作、インスペクタでの数値編集、キーフレームのタイムラインが一通り揃っています。
右側にある「AIへの指示」ボックスがこのツールの肝です。ブラウザ上で人間が修正依頼を書くと、Claudeがそれをriv_studio_notesツールで拾ってriv_editで直す、というループになっています。AIに大枠を作らせて、細かい位置調整や色味だけ人間が手で詰める、という分業がここで成立します。
ツールバーからはPNG/APNG/GIF/WebMへのその場エクスポートもできます。MCP経由で往復しなくても、ブラウザだけでさっと確認用の書き出しが完結します。
ステートマシンの実行もブラウザ内で完結します。bool入力のON/OFFやtriggerの発火をパネルから操作して、遷移の挙動をその場で確かめられます。
AIが「それっぽく」作れるようにする
riv_createは放っておくと図形が全部直線、色は単色べた塗り、イージングも全部linearという、いかにも仮置きっぽい絵になりがちです。これを踏まえて、頂点にベジェハンドルを付けて有機的な曲線を描けるようにしたのと、バネのように弾むelastic系のイージングを追加しました。あわせて、この手のコツ（色の選び方、曲線の作り方、イージングの意味など）をまとめた設計ガイドラインをMCPのprompts機能で公開し、同じ内容をskills/rive-design-guidelines/SKILL.mdとしてリポジトリにも同梱しています。MCPのpromptsに対応していないクライアントでも、このファイルをそのままSkillとして読み込めば同じ知見を使えます。冒頭で触れたプラグイン経由で入れた場合は、このSkillと、制作ワークフロー（生成→lint→critique→修正のループ）を仕込んだ専用サブエージェントが自動でセットアップされます。
この仕組みで宇宙背景のアニメーションを1本作ってみて、当時はそれなりに満足していたのですが、今見返すと出来は微妙です。曲線とイージングの質は確かに上がったものの、AIがフリーハンドで描いた図形はどこか説明的で、プロが描いたイラストと並べると見劣りします。ガイドラインという「散文」を渡すだけでは、絵そのものの品質に天井がある——それが次の方針転換につながりました。
壊れた.rivを機械的に見つける
似た領域の有料ツールを調べていて、「AIが生成した.rivが実際に動くかどうかをランタイムで検証する」機能を売りにしているのを見かけました。たしかにこれは弱点で、riv_createやriv_editは公式ランタイムでの読み込み確認まではしていても、「どのstateにも遷移できない」「入力を宣言したのに誰も参照していない」といった構造上の問題までは見ていませんでした。
そこでriv_lintというツールを追加しました。バイナリを静的に走査して、参照切れ、埋め込み画像が肥大化していないか、ステートマシンの中で絶対に到達しないstateがないか、条件なしの自己遷移（無限ループの原因になる）がないか、宣言だけして使っていない入力がないか、を機械的に洗い出します。ついでに、前述のeasingの仕様（キーフレームのeasingは「そのフレームへ向かう区間」に効く）を逆手に取って、「トラックの最後のキーフレームに設定したeasingは実は何の効果もない」という、地味に気づきにくいミスも検出できるようにしました。
0から描かせるのをやめた
「跳ねるボール」ならフリーハンド生成でもごまかせますが、「夜の街を配達トラックが走る」のような絵になると通用しません。
そこで方針を2つ決めました。品質の担保をサーバー側の構造に焼き込むこと（ガイドラインの文章を読ませるだけでは守られないからです）。そして、イラスト的な要素はAIに描かせず、プロが作ったアセットを取り込むことです。
前者でまず追加したのがriv_design_tokensです。ベースの色相を渡すとOKLCH色空間で調和の取れたパレットを組み、テキストと背景のコントラストがWCAG基準を満たすかまで検証して返します。動きの側は、pop-inやslide-in-bounceのようなセマンティックなモーションプリセットを28種類用意しました。キーフレームへの展開はサーバー側の決定論的なコードがやるので、イージングの数値をAIが毎回考える必要がありません。さらにriv_lintに動きの検査を足して、「全キーフレームがlinear」「瞬間移動」「複数要素が時差なしで一斉に動く」といった素人っぽさの兆候も機械的に検出するようにしました。
もうひとつがriv_critiqueです。AIは静止画しか見られないので、そのままでは「動き」の良し悪しを自分で確認できません。全フレームを横一列に並べたフィルムストリップ、全フレームを重ね焼きして軌跡を残像で見せるオニオンスキン、各オブジェクトの移動量や回転をファイルから直接抜き出したモーションレポートの3点セットを返すことで、生成→批評→修正のループをAIが自力で回せるようにしています。
後者のアセット取り込みが、このツールの一番の差別化点だと思っています。AIにベクターを描かせる試み自体は他のMCPサーバーにもありますが、フリーハンドで描かせる限り品質の天井は低いままです。rive-mcpは「AIは構図と動きを担当し、絵はプロの素材を取り込む」を本線に据えていて、経路は3つあります。SVG（Iconifyの約20万アイコン、Twemojiなどのnpmパッケージ、Figma書き出し）、Lottie（LottieFilesの無料プロ製アニメーション。形状だけでなくキーフレームとイージングごと変換するので、プロが調整した「振付」をそのまま持ち込めます）、そして既存の.rivです。riv_decompileはRiveエディタで作られたファイルをシーン仕様に逆変換するもので、逆変換→再生成の画素差は0.05%まで詰めました。リミックスの素材として実用になる精度です。
このパイプラインで作ったのが次の2本です。1本目は全アートワークがプロ製SVG（Twemoji）で、AIは構図と動きだけを担当しています。2本目はRive公式サンプルのトラックをdecompileして、プロが付けた車体の振動アニメーションごと夜の配達シーンに流用しました。
地味な改善ですが、フォントの埋め込みも直しました。以前はTTFをまるごと埋め込むしかなく、テキストを1行入れるとファイルが800KB超えということもありえました。使っているグリフだけを抜き出すサブセッターを書いて、30KB前後で収まるようになっています。
実装で詰まっていた点
ここは私が手を動かした部分ではなく、Claudeに実装を任せながら見えてきた話です。指示を出しつつ隣で見ていると、地味にハマっていたポイントがいくつかありました。
一番厄介だったのは.rivのバイナリを直接組み立てるところ。typeKeyとpropertyKeyベースの可変長フォーマットで、型定義自体は公式ランタイム（rive-runtimeリポジトリ、MIT）から機械的に抜き出して同梱しています。ただ、オブジェクトの親子関係やキーフレームがどのオブジェクトに属するかは、明示的なIDではなくバイトストリーム上に出てくる順番で決まっていて、そこに気づくまで何度か作り直していました。挿入や削除のたびにインデックスを付け直す必要があり、riv_editの実装はほぼこの処理に費やされています。
APNG出力も地味に苦労した部分です。GIFは256色までしか出せませんし、透過も苦手。画像デコードライブラリに頼らずに済ませたかったので、レンダリング済みのPNGフレームからチャンク（IHDR/IDATあたり）だけ抜き出し、acTL/fcTL/fdATを組み立て直す方式に落ち着きました。CRC32だけ自前で書けば、あとはNode標準の機能で完結します。
もう一つ、意外と手間取ったのがStudioのリロード周りです。AIがファイルを書き換えている最中にブラウザ側の古いリクエストが返ってくると、画面が一瞬古い状態に巻き戻ることがありました。読み込みごとに世代番号を振って、古い世代の応答は握りつぶすガードを入れてようやく直りました。
v0.4.0での追加
公開後しばらく触っていて、前段で「今後の課題」に挙げていたことのうち2つを実際に埋めました。Studio側にカーブエディタ・ステートマシンのグラフビュー・オニオンスキンなど、UI面の機能をいくつか足しています。画面つきの詳しい紹介は別記事にまとめました。
Studio以外では、riv_optimizeという28個目のツールも追加しました。AIとのやり取りを繰り返していると、削除したはずのinterpolatorやeventが参照されないまま残ったり、linear区間のキーフレームが冗長に細かく打たれたりして.rivが膨らんでいくことに気づいたのがきっかけです。未参照オブジェクトの除去と、全区間linearのトラックに限定したDouglas-Peucker圧縮（cubic/holdの区間には触れないので見た目は変わりません）を実装し、dryRunで書き込み前に削減量を確認できるようにしています。
デザインガイドラインのSkillにも、数値レシピ（余白・タイミングのトークン、構図やレイヤリングのルール、避けるべきアンチパターン）を扱うセクションを6つ足し、モーションプリセットも21種から28種に増やしました（stagger-in、parallax-drift、shimmerなど）。
今後の課題
正直まだ足りていない部分もあります。今考えているのは次のあたりです。
- Lottie変換の未対応領域: テキストレイヤー、マスク、リピーターあたりはまだ変換できません。未対応の機能は黙って落とさず件数付きで警告する方針なので、何が落ちたかは分かるようになっています
- データバインディング: Rive側の比較的新しい機能で、対応しているツールがまだほぼありません。ここはランタイム仕様がまだ動いている最中なので、様子を見ながら進めるつもりです
制約
無料で使えますがOSSではなく、source-availableというライセンスです（改変や再配布は不可、生成物の利用は自由）。あとLuauのスクリプティングとLayoutエンジンはまだ対応していません。ランタイム側の仕様がまだ固まっていない印象なので、そこも様子見です。Rive, Inc.とは関係のない非公式のツールです。
Riveを本番で使っている方がいたら、「これがあれば実戦投入できる」みたいな話を聞きたいです。