agent-browser × AI エージェント — ブラウザ操作を自動化する新しいアプローチ

はじめに

AI エージェントが Web ブラウザを操作する需要が急速に高まっています。フォーム入力の自動化、Web ページからの情報収集、E2E テストの実行など、これまで人間が手作業で行っていたブラウザ操作を AI に任せたい場面は多くあります。

従来は Playwright や Puppeteer を MCP サーバー経由で使う方法が主流でしたが、CSS セレクタの指定が煩雑で、LLM のコンテキストウィンドウを大量に消費するという課題がありました。

この問題を解決するのが、Vercel Labs が開発した agent-browser です。AI エージェント専用に設計されたブラウザ自動化 CLI で、アクセシビリティツリーベースの操作により、コンテキスト消費を最大93%削減できます。

この記事では、agent-browser の基本を押さえたうえで、AI エージェントとの連携方法を実践例とともに解説します。

agent-browser とは

agent-browser は、AI エージェント向けに設計された Rust 製のブラウザ自動化 CLI ツールです。GitHub で 27,000 以上のスターを獲得しており、2026年現在、AI コーディングアシスタントのブラウザ操作における事実上の標準になりつつあります。

主な特徴

• Rust 製ネイティブ CLI — Node.js 不要で高速に動作
• デーモンアーキテクチャ — 永続的なバックグラウンドプロセスがブラウザを管理し、コマンドごとの起動オーバーヘッドがない
• アクセシビリティツリー参照 — CSS セレクタの代わりに @e1, @e2 のようなセマンティックな参照を使用
• 60以上のコマンド — ナビゲーション、インタラクション、ネットワーク制御、ストレージ管理など網羅的にカバー
• --json 出力 — AI エージェントが解析しやすい機械可読フォーマット

対応する AI コーディングアシスタント

Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、Goose、OpenCode、Windsurf など、主要な AI コーディングアシスタントと連携できます。

従来ツールとの違い

Playwright MCP や Puppeteer との主な違いを比較します。

特に注目すべきはコンテキスト消費の差です。ある検証では、同じ6つのテスト操作を実行した場合、Playwright MCP が約 31,000 文字（約 7,800 トークン）を消費したのに対し、agent-browser は約 5,500 文字（約 1,400 トークン）で済みました。これは 約5.7倍の効率差 であり、同じコンテキストバジェットで5倍以上の操作が可能になります。

インストールとセットアップ

インストール

npm、Homebrew、Cargo のいずれかでインストールできます。

# npm（推奨）
npm install -g agent-browser

# Homebrew（macOS）
brew install agent-browser

# Cargo（Rust）
cargo install agent-browser

Chrome のセットアップ

インストール後、Chrome for Testing をダウンロードします。

agent-browser install

既存の Chrome、Brave、Playwright、Puppeteer のインストールも自動検出されます。

基本操作：アクセシビリティツリーで操作する

agent-browser の核となるワークフローは snapshot → ref → interact の3ステップです。

ステップ 1：ページを開く

agent-browser open https://example.com

ステップ 2：スナップショットを取得する

snapshot -i コマンドで、ページ上のインタラクティブ要素をアクセシビリティツリーとして取得します。

agent-browser snapshot -i

出力例：

@e1 link "Home"
@e2 link "About"
@e3 searchbox "Search..."
@e4 button "Sign In"

各要素には @e1, @e2 のような ref（参照） が付与されます。CSS セレクタではなく、アクセシビリティツリーから導出されたセマンティックな識別子です。

ステップ 3：ref を使って操作する

取得した ref を使い、要素を直接操作します。

# 検索ボックスにテキストを入力
agent-browser fill @e3 "agent-browser tutorial"

# ボタンをクリック
agent-browser click @e4

この snapshot → ref → interact のサイクルを繰り返すことで、ページの状態変化に追従しながら操作を続けられます。

CSS セレクタも使える

ref が最適ですが、特定の場面では CSS セレクタも使用可能です。

agent-browser click "css=#submit-button"

AI エージェントとの連携

ここからが本記事のメインです。agent-browser が AI エージェントとどのように連携するかを見ていきます。

エージェントループの基本パターン

AI エージェントが agent-browser を使うときの基本パターンは以下のとおりです。

1. タスクを受け取る — 「〇〇のサイトで△△を検索して」
2. ページを開く — agent-browser open <url>
3. スナップショットを取得 — agent-browser snapshot -i
4. LLM がスナップショットを解析 — どの要素をどう操作するか判断
5. 操作を実行 — agent-browser click @eN / agent-browser fill @eN "text"
6. 結果を確認 — 再度スナップショットを取得し、期待する状態か確認
7. 3〜6を繰り返す

このループにおいて、スナップショットの出力はテキストベースでトークン効率が高いため、LLM のコンテキストを圧迫しません。

--json フラグによる機械可読出力

AI エージェントがコマンドの結果をパースするには、--json フラグが便利です。

agent-browser snapshot -i --json

JSON 形式で構造化された出力が返るため、プログラムからの処理が容易になります。

アノテーション付きスクリーンショット

マルチモーダルな AI エージェント（画像認識が可能なモデル）には、アノテーション付きスクリーンショットも活用できます。

agent-browser screenshot --annotate

--annotate フラグを付けると、スクリーンショット上のインタラクティブ要素に番号ラベル [N] がオーバーレイされます。各ラベルはスナップショットの ref @eN と対応しているため、視覚的な分析とテキストベースの操作をシームレスに組み合わせられます。

Claude Code スキルとしての統合

agent-browser は Claude Code のスキルとして簡単に統合できます。

npx skills add vercel-labs/agent-browser

このコマンドを実行すると、Claude Code が agent-browser のコマンド体系を理解し、ブラウザ操作タスクを自然言語で指示できるようになります。

たとえば、Claude Code に次のように指示するだけで、agent-browser が裏側で動きます。

GitHub の vercel-labs/agent-browser リポジトリを開いて、
最新のリリースバージョンを確認してください

Claude Code はこの指示を以下のコマンド列に変換して実行します。

agent-browser open https://github.com/vercel-labs/agent-browser/releases
agent-browser snapshot -i
# スナップショットを解析し、最新リリースの情報を取得
agent-browser text @eN  # 該当要素のテキストを取得

実践例：Web フォームの自動入力

AI エージェントが問い合わせフォームを自動入力するシナリオを見てみましょう。

# 1. フォームページを開く
agent-browser open https://example.com/contact

# 2. インタラクティブ要素を確認
agent-browser snapshot -i
# @e1 textbox "Name"
# @e2 textbox "Email"
# @e3 textbox "Subject"
# @e4 textarea "Message"
# @e5 button "Send"

# 3. フォームに入力
agent-browser fill @e1 "山田太郎"
agent-browser fill @e2 "yamada@example.com"
agent-browser fill @e3 "お問い合わせ"
agent-browser fill @e4 "サービスについて質問があります。"

# 4. 送信
agent-browser click @e5

# 5. 結果を確認
agent-browser snapshot -i

AI エージェントはステップ2のスナップショット出力を見て、どの ref にどんな値を入力すべきかを判断します。CSS セレクタの知識は不要で、アクセシビリティ情報から意味的に要素を理解できる点がポイントです。

実践例：情報収集タスク

Web ページから特定の情報を収集するタスクも得意分野です。

# 1. ニュースサイトを開く
agent-browser open https://news.ycombinator.com

# 2. ページのテキストを取得（セレクタ指定で範囲を絞る）
agent-browser text "css=.titleline"

# 3. 特定のリンクをクリックして詳細を確認
agent-browser snapshot -i
agent-browser click @e5

# 4. 記事の本文を取得
agent-browser text "css=body"

コマンドの結果をそのまま LLM に渡して要約や分析をさせることで、ブラウザ操作 → 情報取得 → AI 分析のパイプラインが構築できます。

セキュリティ機能

AI エージェントにブラウザ操作を任せる際、セキュリティは重要な考慮点です。agent-browser はこの点でも充実した機能を提供しています。

コンテンツ境界マーカー

--content-boundaries フラグを使うと、ツールの出力とページコンテンツの境界が明示されます。これにより、悪意のあるページコンテンツが AI エージェントへのプロンプトインジェクションとして機能するリスクを低減できます。

ドメイン許可リスト

操作対象のドメインをホワイトリストで制限できます。

{
  "allowedDomains": ["example.com", "*.example.com"]
}

認証ボールト

認証情報を暗号化して保存し、LLM に認証情報を直接露出させることなくログイン操作を実行できます。

クラウドプロバイダ連携

ローカル環境だけでなく、クラウド上のリモートブラウザとも連携できます。CI/CD パイプラインやプロダクション環境での利用に適しています。

たとえば Browserbase を使う場合：

BROWSERBASE_API_KEY=your-key agent-browser open https://example.com --connect-to browserbase

環境変数でプロバイダの認証情報を設定し、--connect-to でプロバイダを指定するだけで、リモートブラウザに接続できます。

まとめ

• agent-browser は Vercel Labs が開発した AI エージェント専用のブラウザ自動化 CLI。Rust 製で高速に動作する
• アクセシビリティツリー参照（@e1, @e2）により、CSS セレクタ不要でページ要素をセマンティックに操作できる
• Playwright MCP と比較してコンテキスト消費を約93%削減（約5.7倍の効率）
• snapshot → ref → interact の3ステップで、AI エージェントが効率的にブラウザを操作するループを構築できる
• Claude Code のスキルとして npx skills add vercel-labs/agent-browser で簡単に統合可能
• セキュリティ機能（コンテンツ境界、ドメイン許可リスト、認証ボールト）により、AI エージェントへの安全なブラウザ操作の委任が可能
• Browserless、Browserbase、AWS AgentCore 等のクラウドプロバイダとの連携で、CI/CD やプロダクション環境でも活用できる

参考

• vercel-labs/agent-browser — GitHub
• agent-browser SKILL.md — GitHub
• agent-browser commands reference — GitHub
• AI エージェントのために CLI でブラウザを操作する agent-browser
• Self-Verifying AI Agents: Vercel's Agent-Browser — Pulumi Blog
• Best Agent Browsers for 2026 — Medium