ProofShot: UIコードをブラウザ記録で検証するAIエージェント向けCLI

ProofShotの機能

ProofShotは、AIコーディングエージェントに視覚的検証機能を提供するCLIツールです。エージェントが構築したUIがブラウザで実際にどのように表示されるかを確認し、レイアウトの問題を検出し、コンソールエラーをキャプチャすることができます。

動作の仕組み

このツールは、主に3つのコマンドで動作します：

• proofshot start --run "npm run dev" --port 3000 - 開発サーバーを起動し、ヘッドレスChromiumを開いてビデオ録画を開始します
• AIエージェントはその後、proofshot exec navigate "http://localhost:3000"やproofshot exec screenshot "homepage"などのアクションを実行して、ナビゲート、クリック、フォーム入力、スクリーンショット撮影を行います
• proofshot stop - エラーを収集し、録画を停止し、無駄な時間をトリミングして、証明用の成果物を生成します

出力と機能

ProofShotは、以下の内容を含むスタンドアロンHTMLファイルを生成します：

• アクションタイムラインと同期したブラウザセッションのビデオ再生
• セッション中に撮影されたスクリーンショット
• 各アクションに対する要素ラベル
• セッション中にキャプチャされたブラウザコンソールエラー
• JavaScript、Python、Go、Rustなどの言語用にパターンマッチングでスキャンされたサーバーログ
• PR準備用の成果物（SUMMARY.mdやプルリクエスト用のフォーマット済み出力を含む）
• ベースラインに対する視覚的差分比較

技術的詳細

このツールは：

• Vercel Labsのagent-browserを基盤として構築されています（「Playwright MCPよりもはるかに優れて高速」と評されています）
• テストフレームワークではありません - エージェントは合格/不合格を決定せず、証拠を提供するだけです
• エージェント非依存 - Claude Code、Cursor、Codex、Gemini CLI、Windsurf、および任意のMCP互換エージェントで動作します
• AIエージェントが正確に動作方法を理解できるよう、スキルとしてパッケージ化されています
• MITライセンスのオープンソースです

インストールとセットアップ

$ npm install -g proofshot

$ proofshot install

このツールは録画から無駄な時間を自動的にトリミングするため、エージェントが実際に行ったアクションのみが表示され、アイドル状態の待機時間は含まれません。