Keyframer Inspector

Keyframer Inspector

アプリ向けのモーションデバッガーです。すべてのアニメーションについて、開始したコード行、コスト、フレームがドロップした理由をデバイス上で記録し、動画のようにスクラブできます。期間やスプリングを調整し、その数値をソースコードに書き戻せます。MCP 経由で録画をコーディングエージェントに渡したり、CI でプルリクエストをチェックしたりできます。

https://github.com/user-attachments/assets/81d909d3-64fb-431b-a06f-1d20da5d5952

このリポジトリには、MIT ライセンスのもと、各プラットフォーム向けのアプリに組み込む SDK が含まれています。

プラットフォーム	フォルダー	インストール
React Native (Reanimated)	react-native/	npm i -D @keyframerdev/inspector
iOS (UIKit)	ios/	Swift Package Manager: https://github.com/keyframer-dev/inspector
Android (Views)	android/	debugImplementation("dev.keyframer:keyframer-inspector:<version>")
Flutter	flutter/	flutter pub add keyframer_inspector

アプリはデスクトップアプリ（以下）である Keyframer Inspector に接続します。React Native アプリでは、デスクトップアプリを使わずに、Expo の開発ツール内のパネルも利用できます。

クイックスタート

React Native。 開発環境で Babel プラグインを追加し（react-native-worklets/plugin より前に）、接続してから、Metro で shift+m を押し、@keyframerdev/inspector を開きます。 npm README では、Bare React Native も含めて詳しく説明しています。また、react-native/example は必要な設定がすべて済んだ Expo アプリです。

// babel.config.js (Expo)
plugins: process.env.NODE_ENV !== 'production' ? ['@keyframerdev/inspector/babel'] : []

// your root layout
if (__DEV__) require('@keyframerdev/inspector/devtools').connectDevTools({ app: 'MyApp' })

iOS。

import KeyframerInspector

#if DEBUG
KeyframerInspector.start()                              // simulator: ws://127.0.0.1:8790
KeyframerInspector.start(.init(host: "192.168.1.20"))   // a device: the Mac's LAN address
#endif

Android。

// Application.onCreate (debuggable builds only)
Keyframer.start(this)
ObjectAnimator.ofFloat(title, View.ALPHA, 0f, 1f).kfTrack("title").start()

Flutter。

void main() => runApp(const KeyframerInspector(app: 'My app', appPackage: 'my_app', child: MyApp()));

各フォルダーの README では、API、報告される内容とその方法、テストについて説明しています。

デスクトップアプリ

macOS（Apple シリコンおよび Intel）向けの Keyframer Inspector に、すべての SDK が接続します。Releases からダウンロードできます。無料で、署名および公証済みであり、自動的に最新の状態に保たれます。

• すべてのプラットフォームを一か所で。 iOS、Android、Flutter、React Native のアプリは ws://<your Mac>:8790 で接続します。シミュレーターとエミュレーターはそのまま、デバイスはステータスバーに表示されるアドレスを使って同じネットワーク上で接続します。複数のアプリを同時に接続でき、切り替えもできます。

• パネル。 録画してからドラッグしてスクラブすると、アプリの表示が録画時の画面まで戻ります。トラックにはすべてのアニメーションがセグメントとして表示され、クリックして期間、遅延、スプリングをその場で調整し、数値をソースコードに反映できます。問題は、消費したフレーム数の多い順に表示され、それぞれ発生箇所、実行中だった処理、修正方法を確認できます。変更前後の 2 つのセッションを比較できます。任意のステップを Cursor、VS Code、Zed、Xcode で開けます。

• コーディングエージェント向け MCP サーバー。 組み込み済みで、Settings のスイッチを切り替えるだけで使え、ほかにインストールするものはありません。Claude Code、Codex、Cursor、VS Code、Windsurf、Zed、Claude Desktop からアプリを録画し、シナリオを実行して、トレースや問題を読み取り、スクリーンショットを撮影できます。check と recheck を使うと、エージェントが修正のループを実行します。計測し、コードを変更し、問題がなくなり、モーションが引き続き動作するまで再計測します。Settings には各クライアントの設定方法が表示されます。Claude Code の場合：

  claude mcp add --transport http keyframer-inspector http://127.0.0.1:8789/mcp
  

• 録画ライブラリ。 パネル、テスターのデバイス、共有リンクからの録画（.kfrec.json）は、すべて 1 つのフォルダーに保存されます。録画をダブルクリックすると開き、共有リンクはアプリ内で開きます。

• メニューバー。 ウィンドウを閉じてもリレーは実行され続けます。メニューには接続中のアプリと MCP サーバーが表示され、サーバーのオン／オフやログイン時の起動を切り替えられます。

• 自動更新。 起動後と 6 時間ごとに更新を確認し、バックグラウンドでダウンロードして、再起動または終了時にインストールします。すべての更新は署名されており、アプリがほかのものをインストールすることはありません。

• ローカルで動作。 録画、リレー、MCP サーバーは Mac 上にとどまります。共有リンクを作成しない限り、データが Mac の外に送信されることはありません。

プロトコル

すべての SDK は、protocol/inspector.ts という単一のワイヤープロトコルを使用します。hello、アプリが公開するシグナル、呼び出し箇所を含むアニメーションイベント、フレーム、画面、記録、そしてエディターから送信される内容（記録、スクラブ、オーバーライド、シナリオ）が含まれます。新しいプラットフォームが対応する必要があるのは、このプロトコルだけです。

イシューとコントリビューション

あらゆるプラットフォーム、デスクトップアプリ、npm パッケージに関するイシューはこちらにお寄せください。このリポジトリは Keyframer 自身のリポジトリから公開されています。プルリクエストを歓迎しており、そちらでマージされると、こちらにも反映されます。

ライセンス

このリポジトリのすべてに MIT ライセンスが適用されます（LICENSE）。デスクトップアプリは無料ですが、クローズドソースです。npm パッケージでは、アプリ内で実行される部分（ソースは react-native/）は MIT ライセンスで、ツール（CLI、MCP サーバー、パネル）には Functional Source License が適用されます。詳しくは、そのLICENSE.mdをご覧ください。