kunchenguid/chrome-devtools-axi

chrome-devtools-axi – エージェント向けChrome自動化

これは何か

• chrome-devtools-mcp（ヘッドレスChromeコントローラー）と通信し、大規模言語モデルエージェント向けに設計されたコンパクトでトークン効率の高い表現形式であるAXI形式で結果を提示するコマンドラインインターフェースです。
• このCLIは意図的にエージェント使いやすさを重視して構築されています。単一のコマンドでナビゲーション、ページスナップショットの取得、次のステップへの実行可能なヒントの返却をすべて行い、データサイズを低く抑えます（TOONエンコード出力により、生のJSONと比較して約40%のトークンを節約）。

AIエージェントにとっての重要性

• LLMを利用した多くのエージェントは、単純なHTTPフェッチでは処理できないタスク（複数ステップのフローをクリックする、ダイアログを処理する、JavaScriptを実行する、動的コンテンツを抽出するなど）を実行するために、実際のブラウザを必要とします。chrome-devtools-axiは、それらのエージェントにChromeへの安定した低オーバーヘッドのブリッジを提供します。
• このツールはAXIエコシステム（https://axi.md を参照）と統合されており、npx skillsを使用してAgent Skillとしてインストールでき、手動でnpm installすることなくエージェントが必要に応じてロードできます。

仕組み

1. ブリッジサーバー – デタッチされたプロセスがCLI呼び出しをまたいで永続的なMCPセッションを維持するため、コマンドごとにChromeが再起動されません。
2. CLI – 引数を解析し、HTTP（デフォルト localhost:9224）でブリッジにリクエストを送信し、TOONエンコードされたスナップショットを受信して、人間が読める要約と次のアクションのためのhelpヒントを出力します。
3. 永続化オプション –
   • スタンドアロン: ブリッジがローカルのchrome-devtools-mcp子プロセスを起動します（デフォルト）。
   • 共有サービス: CHROME_DEVTOOLS_AXI_MCP_SERVER_URLを既に実行中のMCPサーバーにポイントして、多くのエージェントで単一のChromeインスタンスを再利用します。
4. 出力 – アクセシビリティツリーのスナップショットがTOONでエンコードされ、インタラクティブ要素には安定した@g<N>:<uid>参照が与えられます。エージェントはそれらの参照をCLIにフィードバックして、クリックや入力などを行えます。

主要コマンド（エージェント向け）

コマンド	機能
open <url>	ページを読み込み、アクセシビリティスナップショットを取得し、短い要約とhelp提案（例: click link @g1:1）を返します。
click @<uid>	最新のスナップショットで識別された要素をクリックします。
fill @<uid> <text>	フォームフィールドに入力します。
eval <js>	ページコンテキストで任意のJavaScriptを実行し、結果（TOON値としてラップ）を返します。
snapshot	ナビゲーションなしで現在のページのアクセシビリティツリーを取得します。
screenshot …	ビューポートまたはページ全体のPNG/JPEG/WebPを保存します。
lighthouse …	Lighthouse監査を実行し、レポートをディスクに書き込みます。
perf-start / perf-stop	Chromeパフォーマンストレースを開始および停止します。
setup hooks	Claude Code、Codex、OpenCode用のセッション開始フックをインストールし、各チャットの開始時にエージェントが現在のブラウザコンテキストを自動的に受け取るようにします。

インストールとアクティベーション

1. Agent-skillルート（推奨）

   npx skills add kunchenguid/chrome-devtools-axi --skill chrome-devtools-axi -g
   

   このスキルは、AXI互換エージェントに、実際のブラウザが必要なときにnpx -y chrome-devtools-axi …を実行するように指示します。
2. ゼロセットアップ実行 – エージェントは事前インストールなしでnpx -y chrome-devtools-axiを使用してCLIを直接呼び出せます。
3. グローバルインストール（手動使用またはフック設定用）

   npm install -g chrome-devtools-axi
   chrome-devtools-axi setup hooks
   

4. ソースから – クローンし、pnpm install --frozen-lockfile、pnpm run build、pnpm linkを実行します。

パフォーマンスのハイライト（READMEのベンチマークから）

メトリック	chrome-devtools-axi	次点
タスクあたりの平均入力トークン	79,141	82,532 (dev-browser)
タスクあたりの平均コスト	$0.074	$0.078
平均所要時間	21.5秒	24.6秒
平均エージェントターン数	4.5	4.8
成功率	100%	99%
このツールは、生のchrome-devtools-mcpと比較してトークン使用量を約57%削減し、LLMエージェントのターン数を約27%削減します。

LLMエージェントの典型的な使用例

• 調査ワークフロー – Wikipediaページを開き、関連リンクをクリックし、テーブルを抽出し、エージェントに要約させます。
• GitHubナビゲーション – リポジトリを閲覧し、PRページを開き、「Files changed」をクリックし、差分を取得します。
• 複数サイト比較 – 並列タブで複数の製品ページを読み込み、価格要素をスクレイピングし、違いを計算します。
• パフォーマンス監査 – エージェントがSEOやUXを評価しているページでLighthouseやChromeトレースを実行します。
• フォーム自動化 – ログインフォームに入力し、送信し、続行する前に結果のページ状態を確認します。

制限事項/注意点

• このCLIはユーザー向けのスラッシュコマンドではありません。人間が直接入力するのではなく、エージェントが呼び出すことを意図しています。
• 新しいスナップショットなしでページが変更されると、参照（@g<N>:…）は古くなります。CLIはSTALE_REFで中止するため、エージェントは再スナップショットする必要があります。
• スナップショット出力は、--fullを使用しない限り約16KBに切り詰められます。非常に大きなページでは--fullが必要になる場合があります。
• ブリッジプロセスは~/.chrome-devtools-axi/にPIDファイルを書き込みます。このファイルが破損した場合、ブリッジを手動でクリーンアップする必要があるかもしれません。
• 多くのエージェントで単一のChromeインスタンスを共有するには、互換性のあるchrome-devtools-mcpサービスを実行し、適切な環境変数を設定する必要があります。

結論 chrome-devtools-axiは、LLMエージェントが実際のChromeブラウザを効率的に制御できるようにするために作られたブリッジです。結果をトークン節約型のTOON形式でエンコードし、組み込みの「次のステップ」ヒントを提供することで、モデルとツール間の往復を減らし、より安価で高速、かつ信頼性の高いエージェント駆動のWeb自動化を実現します。