agent-browser

Browser automation CLI for AI agents — Rust 製ネイティブ CLI が Chrome CDP 経由でページを操作し、アクセシビリティツリーと @eN 参照でエージェント向けにコンパクトな出力を返す。

1 — 概要
何か

agent-browser は vercel-labs/agent-browser が公開する、AI エージェント向けブラウザ自動化 CLI。Playwright や Puppeteer に依存せず、Chrome for Testing を CDP で直接制御する。Cursor・Claude Code・Codex など任意のエージェントからシェルコマンドとして呼び出せる。

Rustネイティブ CLI 本体
CDPChrome 直接制御
@eNスナップショット参照
MCPstdio サーバー

スナップショットは生 HTML より大幅に短く（目安 200〜400 トークン）、エージェントがページ構造を把握しやすい。CLI に同梱されたスキルは agent-browser skills get でインストール版と常に同期される。

インストール 
npm install -g agent-browser
agent-browser install   # 初回: Chrome for Testing を取得

Homebrew（brew install agent-browser）、Cargo（cargo install agent-browser）、プロジェクトローカル依存（npm install agent-browser）にも対応。Linux では agent-browser install --with-deps でブラウザ用システムライブラリも導入できる。

2 — アーキテクチャ
実行モデル

ユーザーまたはエージェントが bin/agent-browser.js 経由で Rust バイナリを起動し、バックグラウンドの daemon が Chrome セッションを保持する。連続コマンドは同一 daemon を再利用するため、起動コストを抑えられる。非アクティブな daemon は標準で 1 時間後に終了し、--idle-timeout または AGENT_BROWSER_IDLE_TIMEOUT_MS で調整できる。

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#dce6f5", "primaryTextColor": "#1b365d", "primaryBorderColor": "#1b365d", "lineColor": "#3d5a8a", "secondaryColor": "#f5f0e0", "tertiaryColor": "#eef3fa", "fontFamily": "Outfit, system-ui, sans-serif", "fontSize": "13px"}}}%%
flowchart LR
  Agent["AI Agent / Shell"]
  CLI["agent-browser CLI\n(Rust)"]
  Daemon["Browser daemon\ncli/src/native/"]
  Chrome["Chrome / Chromium\n(CDP)"]
  Agent --> CLI --> Daemon --> Chrome

ブラウザ自動化の中核は cli/src/native/（daemon・CDP クライアント・snapshot・state など）。--engine で Chrome と Lightpanda を切り替え可能。npm パッケージには skill-data/・skills/・postinstall スクリプトが同梱される。

モノレポ構成（主要パッケージ）
パス役割
cli/Rust CLI・daemon・MCP サーバー・CDP プロトコル
skill-data/エージェント向け SKILL 本文（core / slack / electron 等）
packages/dashboard/観測用ダッシュボード（ポート 4848）
packages/@agent-browser/sandbox/Vercel Sandbox 等クラウド実行
docs/Next.js 公式ドキュメントサイト（agent-browser.dev）
evals/ / benchmarks/スキル選択・コンテキスト量の評価
3 — コアループ（snapshot + @eN）
基本手順
1
open
agent-browser open <url> でページを開く。ブラウザはセッション中ずっと起動したまま。
2
snapshot -i
インタラクティブ要素だけのアクセシビリティツリーを取得。@e1 形式の参照が付く。
3
click / fill
agent-browser click @e3 など、スナップショット上の ref で操作する。
4
再 snapshot
ナビゲーション・フォーム送信・動的再描画のあとは必ず再スナップショット。ref はページ変更で無効になる。
agent-browser open https://example.com/login
agent-browser snapshot -i
# 出力例:
# @e3 [input type="email"] placeholder="Email"
# @e4 [input type="password"] placeholder="Password"
# @e5 [button type="submit"] "Continue"

agent-browser fill @e3 "user@example.com"
agent-browser fill @e4 "secret"
agent-browser click @e5
agent-browser wait --url "**/dashboard"
agent-browser snapshot -i
ref の鮮度: @eN はスナップショットごとに再採番される。クリックで遷移した直後に古い ref を使うと失敗する。別要素に被さってクリックできない場合も、カバー要素を操作してから再スナップショットする。
要素指定の優先順位
方式例向いている場面
推奨 snapshot + ref click @e2 AI エージェントの通常フロー。トークン効率が最も良い
次点 find（セマンティック） find role button click --name "Submit" 事前 snapshot なし、ARIA role / ラベル / placeholder で探す
CSS セレクタ click "#submit" 上記が効かないときのフォールバック

read — Chrome なしでテキスト取得

agent-browser read [url] は HTTP でドキュメントを取得し、Markdown 交渉・llms.txt 探索・HTML からの readable 抽出を行う。URL を省略するとアクティブタブのレンダリング済み DOM を読む（ログイン状態を含む）。

batch — 複数コマンドを 1 回で

agent-browser batch は引用引数または JSON stdin で複数ステップを 1 プロセスにまとめる。cookie 設定 → ルート → navigate など、ナビゲーション前セットアップに使う。

4 — スキルと MCP
バージョン同期スキル

skills/agent-browser/SKILL.md は discovery stub。実際の手順は CLI が配信する:

agent-browser skills get core             # ワークフロー・トラブルシュート
agent-browser skills get core --full      # コマンドリファレンス込み
agent-browser skills list                 # インストール版で利用可能な一覧
スキル名用途
core通常の Web 操作（ナビゲート・フォーム・スクショ・待機）
electronVS Code・Slack・Discord・Figma 等の Electron アプリ
slackSlack ワークスペースの未読確認・メッセージ送信
dogfood探索的テスト・QA・バグハント
vercel-sandboxVercel Sandbox microVM 内での実行
agentcoreAWS Bedrock AgentCore クラウドブラウザ
MCP サーバー 
agent-browser mcp
agent-browser mcp --tools core,network,react
agent-browser mcp --tools all

stdio 上の JSON-RPC。デフォルトプロファイルは core（コンテキストを小さく保つ）。session 引数または AGENT_BROWSER_SESSION でブラウザセッションを分離できる。

プロファイル主なツール群
coreナビゲーション・snapshot・操作・wait・read・screenshot・eval・タブ基本
networkルート・HAR・リクエスト検査・オフライン
stateCookie・storage・認証・保存 state・profiles・skills
debugconsole・trace・profiler・doctor・dashboard・batch
reactReact DevTools hook 経由の tree / inspect / renders
mobileデバイスエミュレーション
allCLI との完全パリティ
5 — セッションと拡張
セッション永続化
session id → --session + --restore → auth / cookies 復元 → open / 操作 
SESSION="$(agent-browser session id --scope worktree --prefix my-app)"
agent-browser --session "$SESSION" --restore open https://app.example.com
agent-browser --session "$SESSION" snapshot -i

auth save / auth login で認証情報を vault に保存できる。タブは t1 形式の ID またはユーザー定義ラベル（docs 等）で切り替える。

その他の主要機能
  • ダッシュボード: ポート 4848 でセッション・ストリームを観測（https://dashboard.agent-browser.localhost 等のプロキシ URL も可）
  • stream: runtime WebSocket ストリーミング（stream enable）
  • diff: snapshot / screenshot / URL 間の差分比較
  • chat: 自然言語での単発または REPL ブラウザ操作
  • doctor: Chrome・daemon・設定の診断（--fix で修復）
  • React / vitals: --enable react-devtools 起動時に fiber tree・Web Vitals 計測
  • プラグイン: 認証 vault・cloud browser provider・カスタム command.run
ブラウザプレビューのストリーミング

各セッションは WebSocket のビューポート配信を持ち、AI エージェントの操作を人が見ながら介入する「ペアブラウジング」に使える。画質とフレームサイズは daemon 単位、配信頻度はクライアント単位で設定する。

設定標準値役割
AGENT_BROWSER_STREAM_QUALITY80JPEG 品質（0〜100）
AGENT_BROWSER_STREAM_MAX_WIDTHビューポート幅エンコードするフレーム幅の上限
AGENT_BROWSER_STREAM_MAX_HEIGHTビューポート高エンコードするフレーム高の上限
 
AGENT_BROWSER_STREAM_QUALITY=20 agent-browser open example.com
agent-browser stream status
agent-browser stream disable
配信の挙動: サーバーは最新フレームを優先し、遅いクライアント向けに古いフレームをキューへ積まない。クライアントは maxFps（1〜120、0 は無制限）や pacing=ack を指定できる。入力イベントはフレーム送信とは別に処理され、マウス・キーボード操作の応答性を保つ。
公式・関連

この HTML は docs-site 側の要約。コマンド一覧・フラグの正は README.md と agent-browser skills get core --full の出力に合わせる。