AI Tools
ワークフロー初級

ProofShot

AIコーディングエージェントのフロントエンド作業を視覚的に記録・診断するツール

ProofShotは、ローカルブラウザ環境で動作する自律型AIコーディングエージェントによるフロントエンドおよびユーザーインターフェース開発作業を視覚的に記録し、リアルタイムで診断することで、人間の開発者が結果物を簡単にレビューできるように支援するオープンソースのCLIベースの検証ワークフロー管理ツールです。2026年3月12日に、開発者AmElmoが率いるプロジェクトチームによって初めて公開されたこのツールは、自律的にコードを修正し、ブラウザを操作するAIエージェントが、自身が構築した結果物がデザインガイドに適合しているか、あるいは実際に意図したとおりにレンダリングされているかを判断できないという視覚的な限界を克服するために設計されました。技術的には、Vercelが提供するagent-browserライブラリを内蔵しており、これを通じてheadless Chromiumセッションを安全に制御しながら、ビデオストリームをリアルタイムでキャプチャし、同時にコンソールとサーバーのさまざまなバックエンド/フロントエンドランタイムログを統合的に収集する構造を備えています。まるで車両に搭載されたドライブレコーダーが、走行状況全体を記録し、急ブレーキや衝突などの特定のイベント発生時のセンサーデータを連携させて保存するように、ProofShotは、エージェントが実行するすべてのクリック、キー入力、画面移動の動作を録画ビデオフレームとマッチングさせて、1つのパッケージ化されたレポートとして構築します。 従来のAIエージェント支援ツールは、単にブラウザを操作するPlaywrightやChrome DevTools Protocolを使用して、DOM構造をテキストで参照したり、スクリーンショットを1枚キャプチャする程度に留まり、エージェントが全体的なインタラクションを正しく完了したかどうかを確認することに深刻な制約がありました。さらに、エージェントの作業結果物を開発者が直接目で再現するために、ローカルサーバーを起動し、すべてのステップをクリックする必要があるため、自律型コーディングエージェントの生産性を人間が検証する過程でボトルネックが発生していました。ProofShotは、このような単純なブラウザ制御ツールとは異なり、エージェントが実行した全体的なナビゲーションパスをタイムラインとして構成し、各ステップでキャプチャされたスクリーンショットとミリ秒単位で同期されたインタラクションログを完全に整列させて、単一のHTMLビューワーで提供することで、差別化された価値を生み出します。開発者は、複雑なローカルデバッグ環境を構築する必要なく、HTMLレポートを開くだけで、エージェントの動作過程を10秒で視覚的に確認し、承認するかどうかを決定できます。 一般的なウェブアプリケーション開発ワークフローで、開発者がAIエージェントに、複雑なSaaSダッシュボードやリアルタイムグラフを含むチャートページの実装を依頼した場合、エージェントは直ちにローカルサーバーを起動し、`proofshot start`コマンドを通じて検証セッションを開始します。エージェントは、`agent-browser`を呼び出して、ログインフォームに記入し、ダッシュボードにアクセスし、データ更新ボタンをクリックする一連のシナリオを実行します。このとき発生したすべてのネットワークリクエストエラーとコンソール例外ログは、CLIに内蔵されたエラーパターンマッチング機能を介して自動的に検出し、記録されます。作業が終了すると、`proofshot stop`コマンドとともにセッションが安全に終了し、生成されたHTML証拠結果物は、GitHub Pull Requestを作成する際に、`proofshot pr`コマンドを通じて、そのPRにビデオとスクリーンショットの要約が付いたコメントとして自動的にアップロードされます。これにより、レビュー担当者は、複雑なフロントエンドビルドやDBマイグレーションなしに、エージェントが修正したコードが実際に完全に機能するかどうかをビデオで確認し、マージすることができます。この自律的なループを通じて、開発サイクル全体の誤りコストを劇的に削減することができます。

💻 必要なスペック

🧠RAM

0(CPU専用、別途外部GPUのハードウェア要件なし)

💾ストレージ

パッケージのインストールに50MB未満、ブラウザセッションのビデオとスクリーンショットの保存に500MB以上の空き容量を推奨

インストール

### 4-1. 簡単な始め方

```bash
npm install -g proofshot && proofshot install
```

### 4-2. 詳細なインストール

```bash
# ProofShot パッケージをグローバルにインストール
npm install -g proofshot

# AI コーディングツールを検出し、ローカルエージェントのスキルをインストール(Claude、Cursor などの連携)
proofshot install

# (オプション) 特定のエージェントツールに対してのみ、明示的にスキルをインストールする場合
proofshot install --only claude
```
📄 公式ドキュメント🐙 GitHub

📝 アップデートノート

まだアップデートノートはありません。

🧪 関連「生命のコード」

関連する「生命のコード」記事はまだありません。