概要
https://note.com/timakin/n/n943a6e1d5216
詳細内容
## agent-browserに学ぶAI最適なブラウザ操作とツール提供の考え方
https://note.com/timakin/n/n943a6e1d5216
Vercel Labsが公開した`agent-browser`の設計思想を解読し、アクセシビリティツリーの活用と情報のフィルタリングによってAIエージェントのトークン消費を劇的に削減する手法を解説する。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 76/100 | **Annex Potential**: 73/100 | **Overall**: 76/100
**Topics**: [[agent-browser, AIエージェント, アクセシビリティツリー, トークン最適化, Web自動化]]
Vercel Labsからリリースされた`agent-browser`が、いかにして「トークン消費93%削減」という驚異的な効率を実現しているのか、その内部設計とAIエージェント向けツール設計の核心を、株式会社ベースマキナの高橋氏が深く考察している。
従来のPlaywright MCPなどのツールは、26種類以上の多すぎるメソッドや、複雑なページで数千ノードに及ぶアクセシビリティツリーをそのままLLMに送ってしまう「コンテキスト爆発」が課題であった。これに対し`agent-browser`は、ブラウザが内部で持つ「意味」ベースの構造化表現であるアクセシビリティツリー（AOM）を基盤に採用。DOMを直接渡すよりもノイズが少なく、AIが判断しやすい形式を選択している。
最大の特徴は「Snapshot + Refs」というワークフローにある。まず`snapshot`コマンドでページ解析を行い、各要素に`ref=e1`のような一意の識別子を付与する。以降の操作（clickやfill）はこの識別子を指定して実行される。これにより、毎回ページを再解析（DOM再クエリ）する必要がなくなり、決定論的な要素特定が可能になる。また、コマンドラインツール（CLI）として設計されているため、Vercelが推進するBashベースのサンドボックス環境とも極めて親和性が高い。
さらに、著者は強力なフィルタリングオプションの重要性を指摘する。特に`-i`フラグ（インタラクティブ要素のみ抽出）を使用することで、説明的なテキストを排除し、ボタンや入力フォームといった操作対象だけに絞り込むことが可能になる。著者は、AIエージェントにスクリーンショット（画像）ではなくテキストを送る理由として、トークン消費の予測可能性、加工の容易さ、デバッグのしやすさを挙げている。
本記事の結論として、著者はAI時代におけるツール設計の3つの原則を提示している。
1. **情報のフィルタリング**: 全部送るのではなく、必要なものだけを送る。
2. **構造化テキストへの変換**: 生データではなく、意味ベースの表現に変換する。
3. **参照ベースの操作**: 状態を持たせて、再クエリを減らす。
「何を送るか」以上に「何を送らないか」を徹底するこの設計思想は、ブラウザ操作のみならず、ドキュメント分析やコードレビューといったあらゆるAIツール開発において、コストと精度のトレードオフを解決する鍵となると主張している。