SawyerHood/dev-browser

解決する課題

dev-browser は、AIコーディングエージェントがWebブラウザと対話する際、毎回のアクションでブラウザセッションを再起動するオーバーヘッドなしに操作を行える手段を提供します。エージェントは複数のスクリプト呼び出し間で状態（ログインセッションやナビゲーション履歴など）を維持できるため、より効率的な「観察 $\rightarrow$ 行動 $\rightarrow$ 検証」ワークフローが可能になります。

仕組み

このツールは、Chromeインスタンスを管理するデーモンとして動作します。コーディングエージェントは、CLIまたはMCP (Model Context Protocol) サーバーを使用して、このデーモンに短いJavaScriptスクリプトを送信できます。これらのスクリプトは、変更されたPuppeteer APIを使用してブラウザを制御します。

主な技術的メカニズムは以下の通りです：

• 永続的ページ：異なるスクリプト実行間で状態を保持する名前付きタブ。
• アクセシビリティツリースナップショット：生のHTMLの代わりに、LLMが読みやすく、安定した要素参照（例：e12）を含むコンパクトなアクセシビリティツリーを提供します。
• 柔軟な接続：独自の隔離されたChromeプロファイルを起動するか、ユーザーのマシンで既に開いているブラウザにアタッチできます。
• 実行コンテキスト：各スクリプトは、グローバル変数を分離するために新しい node:vm コンテキストで実行されます。

対象者

ブラウザタスクの自動化、Webページの検査、およびアクションの結果のリアルタイム検証を行う必要があるAIエージェント（特にコーディングエージェント）を構築する開発者向けに設計されています。

ハイライト

• ステートフルセッション：名前付きタブを介して複数回の呼び出し間でブラウザ状態を維持します。
• AI最適化出力：アクセシビリティツリーを使用して、コンパクトで読みやすいページスナップショットを提供します。
• Puppeteer統合：実際のPuppeteer Page APIを活用し、AIエージェント用のヘルパーを追加します。
• ブラウザアタッチ：CDP (Chrome DevTools Protocol) 経由で既存のChromeインスタンスに接続する機能。
• MCPサポート：Claudeなどのツールとシームレスに統合するための組み込みMCPサーバーが含まれています。