Vercel Labs がagent-browser を公開した
agent-browser は、AI エージェント向けに設計されたブラウザ自動化 CLI ツール
「AI エージェント専用のブラウザ自動化ツール」という位置づけになるらしく、単なるスクレイピングツールではなく、AI が人間の代わりにブラウザを操作することを前提に設計されている
CLI 本体は Rust で実装されており、高速な起動と軽量な動作を実現。実際のブラウザ操作は Node.js 上で Playwright を使用している。Rust バイナリが使えない環境では自動的に Node.js フォールバックモードに切り替わる
インストール
公式の推奨
npm install -g agent-browser agent-browser install # Chromium のダウンロード
基本的な使い方
ページを開く
agent-browser open https://example.com
スナップショットの取得
ページのアクセシビリティツリーを取得し、各要素に ref（参照ID）を付与する
agent-browser snapshot -i --json
出力例：
{"success":true,"data":{ "refs": [ { "@e1": { "role": "heading", "name": "Example Domain" } }, { "@e2": { "role": "link", "name": "More information..." } }, { "@e3": { "role": "textbox", "name": "Email" } } ] }, "error": null}
Ref を使った操作
スナップショットで得た ref を使って要素を操作する：
# クリック agent-browser click @e2 # テキスト入力 agent-browser fill @e3 "user@example.com" # スクリーンショット agent-browser screenshot result.png # ブラウザを閉じる agent-browser close
主要コマンド一覧
| コマンド | 説明 |
|---|---|
open <url> |
指定 URL を開く |
snapshot |
アクセシビリティツリーと refs を取得 |
click <ref> |
要素をクリック |
fill <ref> <text> |
テキストを入力 |
screenshot <file> |
スクリーンショットを保存 |
get-text <ref> |
要素のテキストを取得 |
close |
ブラウザを閉じる |
snapshot のオプション
# インタラクティブ要素のみ agent-browser snapshot -i # JSON 形式で出力 agent-browser snapshot --json # ツリーの深さを制限 agent-browser snapshot -d 3 # 全要素（コンテンツ含む） agent-browser snapshot -c
なぜ AI エージェントに最適なのか
1. トークン効率の大幅な改善
従来の Playwright MCP や DOM ベースのアプローチでは、AI に渡すコンテキストが肥大化しがち
agent-browser の snapshot は必要な情報のみを抽出するため、約90%のトークン削減 が報告されている
従来の方式：DOM 全体 + CSS セレクタ → 大量のトークン消費 agent-browser：snapshot + refs → 最小限のトークン
2. 決定論的な要素指定
ref を使うことで、DOM の変化や複数の類似要素があっても、AI が常に同じ要素を操作できる
CSS セレクタや XPath と比較して、操作の安定性が高い
# CSS セレクタ方式 click "button.submit-btn.primary" # agent-browser 方式 click @e5
実践的なワークフロー例
フォーム自動入力
#!/bin/bash # ログインページを開く agent-browser open "https://app.example.com/login" # スナップショットを取得 agent-browser snapshot -i --json > snapshot.json # AI がスナップショットを解析し、入力フィールドの ref を特定 # → @e3: email, @e4: password, @e5: submit button # フォームに入力 agent-browser fill @e3 "user@example.com" agent-browser fill @e4 "password123" agent-browser click @e5 # ログイン後のページを確認 agent-browser snapshot -i
デバッグモード
# GUI を表示してブラウザの動きを確認 agent-browser open --headed "https://example.com"
--headed フラグでブラウザの GUI を表示
AI エージェントの挙動を目視確認しながらデバッグできる
