ProofShot: AIコーディングエージェントのためのブラウザ検証

ProofShotは、オープンソースでエージェントに依存しないCLIツールであり、AIコーディングエージェントが構築したUI機能を、ブラウザセッションの記録、スクリーンショットの撮影、エラーの収集によって検証できるようにします。エージェントがコードを書くものの、ブラウザ上で実際にどのように表示されるか確認できず、レイアウトの問題やコンソールエラーを検出できないという課題を解決します。

仕組み

このツールは、開始、テスト、停止の3ステップのワークフローに従います。AIエージェントがagent-browserコマンドを使用してブラウザを操作する間、ProofShotがセッションを記録します。

基本的な使い方:

proofshot start --run "npm run dev" --port 3000
# エージェントがナビゲート、クリック、スクリーンショットを撮影
proofshot stop

詳細なワークフローの例:

# 1. 開始 — ブラウザを開き、記録を開始、サーバーログをキャプチャ
proofshot start --run "npm run dev" --port 3000 --description "ログインフォーム検証"

2. テスト — AIエージェントがブラウザを操作
agent-browser snapshot -i  # インタラクティブ要素を確認
agent-browser open http://localhost:3000/login  # ナビゲート
agent-browser fill @e2 "[email protected]"  # フォームに入力
agent-browser click @e5  # 送信をクリック
agent-browser screenshot ./proofshot-artifacts/step-login.png  # 証拠をキャプチャ
3. 停止 — 動画 + スクリーンショット + エラーを証明アーティファクトにバンドル
proofshot stop

主な機能

• シェルコマンドを実行できるあらゆるAIコーディングエージェントと連携（Claude Code、Cursor、Codex、Gemini CLI、Windsurf、GitHub Copilotなど）
• AIエージェントが使用方法を理解できるよう、スキルとしてパッケージ化
• Vercel Labsのagent-browserを基盤として構築（「Playwright MCPよりもはるかに優れ、高速」と評される）
• テストフレームワークではなく、合格/不合格を判断せず、証拠を提供するだけ
• 動画、スクリーンショット、ログを含む自己完結型HTMLファイルを生成
• proofshot prでアーティファクトをGitHub PRにインラインコメントとしてアップロード可能

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

npm install -g proofshot
proofshot install

最初のコマンドはCLIとagent-browser（ヘッドレスChromium付き）をインストールします。2番目のコマンドはAIコーディングツールを検出し、ユーザーレベルでProofShotスキルをインストールします。すべてのプロジェクトで自動的に動作します。

出力アーティファクト

各セッションは、./proofshot-artifacts/内にタイムスタンプ付きのフォルダを生成し、以下を含みます:

• session.webm — セッション全体の動画記録
• viewer.html — スクラブバー、タイムライン、Console/Serverログタブを備えたスタンドアロンインタラクティブビューア
• SUMMARY.md — エラー、スクリーンショット、動画を含むMarkdownレポート
• step-*.png — 重要な瞬間にキャプチャされたスクリーンショット
• session-log.json — タイムスタンプと要素データを含むアクションタイムライン
• server.log — 開発サーバーのstdout/stderr（--run使用時）
• console-output.log — ブラウザコンソールの出力

利用可能なコマンド

• proofshot install — AIコーディングツールを検出し、ProofShotスキルをインストール
• proofshot start — ブラウザ、記録、エラーキャプチャによる検証セッションを開始
• proofshot stop — 記録を停止、エラーを収集、証明アーティファクトを生成
• proofshot exec — パススルーコマンド

このツールは完全に無料でオープンソースであり、ベンダーロックインやクラウド依存はありません。AIエージェントを使用してUI機能を構築し、毎回手動でブラウザを開くことなく結果を検証したい開発者向けに設計されています。