モチーフMCPがClaude CodeにUIバグ再現のための動画視聴能力を付与

Claude Codeはネイティブで動画を視聴できないため、ホバー状態やアニメーション、スクロール動作などの視覚的なUIバグを診断するのは面倒です。バグを言葉で説明しなければならないからです。motifは、Claude Codeにバグの画面録画を指定できるようにすることでこの問題を解決する新しいMCPサーバーです。

仕組み

バグを録画し、motifにファイルを指定すると、視覚的に何が起こっているか、根本原因、および差分の3つが返されます。内部ではGemini 2.5 Flashを使用しています。このモデルは動画を単一のスクリーンショットではなくフレームシーケンスとして処理するため、200msのオーバーシュートや誤ったタイミングでリセットされるホバー状態などのバグに効果的です。

セットアップ

Gemini APIキーが必要です。その後、mcp.jsonに2行追加します:

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-key-here"
      }
    }
  }
}

その後は、Claude Codeに録画を視聴するよう指示するだけです。

試してみる

npx motif-mcpを実行して始めてください。プロジェクトは初期段階のため、フィードバックをお待ちしています。

対象ユーザー

Claude Codeをフロントエンド開発に使用しており、視覚的な問題について手動でバグを説明する手間を省きたい開発者向けです。