agent-browser入門：VercelがOSS公開したAIエージェント向けRust製ブラウザ自動化CLI

agent-browserとは：なぜAIエージェント向けに設計されたのか

Vercel Labsが2024年にOSSとして公開したagent-browserは、AIエージェントによるブラウザ操作に特化したRust製CLIツールだ。従来のブラウザ自動化ツール（PlaywrightやSelenium）がエンジニアのテストコード向けに設計されているのに対し、agent-browserはLLM（大規模言語モデル）が直接コマンドを発行するワークフローを前提として設計されている。

最大の特徴は「アクセシビリティツリーのref参照」という仕組みだ。Webページをスナップショットとして取得すると、各インタラクティブ要素に@e1や@e2といった参照タグが付与される。LLMはこの参照タグを使って要素を確実に操作でき、HTMLのCSSセレクタを推測する必要がない。

Rust製のため起動が速く、Node.jsランタイムも不要。npm経由でインストールは可能だが、実行にはRustバイナリが使われる。Browser UseのようにPythonライブラリとして統合するのではなく、あくまでCLIツールとしてシェルから呼び出す設計で、言語非依存のエージェント統合を実現している。

主な機能：ブラウザ操作からセキュリティ機能まで

• スナップショット取得 — ページのアクセシビリティツリーを@e1, @e2, ...形式のrefタグ付きで返す。LLMが「AIにとって最適な」要素識別方法として活用
• refベースの操作 — click @e1、fill @e2 "テキスト"など、CSSセレクタ不要でrefタグのみで操作を完結
• スクリーンショット・PDF — screenshot output.pngやpdf output.pdfで視覚的な出力を取得。LLMへの視覚的フィードバックに使用
• JavaScriptの実行 — eval "document.title"でページ内のJSを直接実行
• ネットワーク傍受 — HTTPリクエストのモックやHAR（HTTP Archiveファイル）の記録が可能
• セッション管理 — 永続プロファイル、自動状態暗号化、マルチセッション分離に対応。ブラウザを閉じても認証状態を保持できる
• セキュリティ機能 — 認証ボルト、ドメイン許可リスト、アクションポリシー、確認ゲートを備え、エージェントの暴走を防止
• クラウドプロバイダー対応 — Browserless、Browserbase、Browser Use、Kernel、AgentCore、iOS Simulatorと連携可能

クイックスタート：インストールから最初の操作まで

インストール

3つの方法からプロジェクトに合うものを選べる。

# npm でグローバルインストール（最も手軽）
npm install -g agent-browser

# Homebrew でインストール（macOS向け）
brew install vercel-labs/agent-browser/agent-browser

# Cargo でインストール（Rustが入っている環境）
cargo install agent-browser

インストール後、Chromeが未検出の場合はGoogle Chrome for Testingチャンネルから自動ダウンロードが始まる。

基本的なページ操作フロー

agent-browserの典型的な操作は「open → snapshot → 操作」の3ステップだ。

# 1. URLを開く
agent-browser open https://example.com

# 2. スナップショットを取得（アクセシビリティツリー + refタグ）
agent-browser snapshot
# 出力例:
# [ref=@e1] button "ログイン"
# [ref=@e2] input[type=text] "メールアドレス" placeholder="[email protected]"
# [ref=@e3] input[type=password] "パスワード"

# 3. refタグで要素を操作
agent-browser fill @e2 "[email protected]"
agent-browser fill @e3 "password123"
agent-browser click @e1

# スクリーンショットで結果確認
agent-browser screenshot result.png

JSON パイプによるバッチ処理

複数ステップのワークフローをJSONパイプでまとめて実行できる。これにより起動オーバーヘッドを削減し、LLMからの一括命令に対応する。

[
  {"action": "open", "url": "https://news.ycombinator.com"},
  {"action": "snapshot"},
  {"action": "screenshot", "path": "/tmp/hn.png"}
]

cat workflow.json | agent-browser batch

LangChain からの呼び出し例

LangChainのToolとしてシェルコマンドをラップする方法が最も汎用的だ。

from langchain.tools import ShellTool
from langchain.agents import AgentType, initialize_agent
from langchain.chat_models import ChatAnthropic

shell_tool = ShellTool()

# agent-browserのコマンドをLangChainツールとして登録
def browser_snapshot(url: str) -> str:
    """指定URLのアクセシビリティツリーを返す"""
    import subprocess
    subprocess.run(["agent-browser", "open", url], check=True)
    result = subprocess.run(
        ["agent-browser", "snapshot"],
        capture_output=True, text=True
    )
    return result.stdout

llm = ChatAnthropic(model="claude-opus-4-6")
# ツール定義と組み合わせてエージェントを構成

アーキテクチャ：AIエージェントとブラウザの連携フロー

agent-browserの設計は「LLMがCLIを呼び出し、結果を受け取ってループする」シンプルなアーキテクチャだ。Mermaid図で全体像を示す。

ポイントは「LLMが直接Webページ構造を解析しない」点だ。agent-browserがアクセシビリティツリーを中間表現として提供することで、LLMは生のHTMLを扱う必要がなく、refタグという安定した識別子で操作できる。

セキュリティレイヤーとして「アクションポリシー」と「確認ゲート」も設計されており、エージェントが意図しないアクション（決済ボタンのクリックなど）を実行しようとした際に人間の承認を要求できる。

競合ツールとの比較：Browser Use / Playwright MCP との違い

AIエージェントによるブラウザ操作を実現するツールは複数存在する。それぞれの特性を整理する。

Browser UseはPythonネイティブでLLMとの統合が密なのに対し、agent-browserはCLIとして言語非依存で使える。OpenHandsのような汎用コーディングエージェントがブラウザ操作をサブタスクとして呼び出す場合はagent-browserのCLI設計が向いている。

実践的な使い方：エージェントへの組み込みパターン

パターン1：セッション付きログインフロー

認証が必要なサービスへのアクセスは、セッション永続化機能を使う。

# 名前付きセッションを作成（暗号化して保存）
agent-browser session create myapp

# セッションを使って操作（ログイン状態が維持される）
agent-browser --session myapp open https://app.example.com/dashboard
agent-browser --session myapp snapshot

パターン2：ドメイン許可リストによる安全なエージェント

エージェントが意図しないドメインにアクセスしないよう、ポリシーで制限できる。本番環境でLLMに自律的なブラウザ操作を委ねる際に有効だ。

{
  "policy": {
    "allowedDomains": ["app.example.com", "api.example.com"],
    "requireConfirmation": ["checkout", "delete", "submit"],
    "blockThirdPartyRequests": true
  }
}

パターン3：Vercel AI SDK との統合

Vercel AI SDKのtool定義とagent-browserを組み合わせることで、Next.jsアプリからブラウザエージェントを呼び出せる。

import { tool } from 'ai';
import { z } from 'zod';
import { execSync } from 'child_process';

const browserSnapshot = tool({
  description: 'Webページのアクセシビリティツリーを取得する',
  parameters: z.object({
    url: z.string().describe('取得するURL'),
  }),
  execute: async ({ url }) => {
    execSync(`agent-browser open ${url}`);
    const output = execSync('agent-browser snapshot').toString();
    return { snapshot: output };
  },
});

Vercel AI SDKのmulti-stepエージェント（maxSteps設定）と組み合わせると、LLMがスナップショットを確認→refを選択→操作→再確認のループを自律的に回せる。LangChainでのエージェント構築についてはLangChainのエージェント構築ガイドも参照されたい。

まとめ：agent-browserを使うべきケースと注意点

agent-browserが最も力を発揮するのは以下のシーンだ：

• 言語非依存のエージェント統合 — Python・TypeScript・Goどのスタックからもシェルコマンドとして呼び出せる
• 本番環境での自律的なブラウザ操作 — ドメイン許可リストや確認ゲートで安全性を担保しながらLLMに操作を委ねる
• マルチセッション管理 — 複数のユーザーや状態を切り替えながら操作するエージェント

注意点として、agent-browserのCLIスタイルは「シンプルなコマンドのシーケンス」に向いており、DOMの複雑なイベント処理や高度なネットワーク制御が必要な場面ではPlaywrightのAPIを直接使う方が柔軟な場合もある。また、2024年公開のOSSとして開発が続いているため、APIは変更される可能性がある点も留意が必要だ。

AIエージェントがブラウザを操作する基盤ツールとして、agent-browserはRust製の高速性とアクセシビリティツリーによるLLMフレンドリーな設計で、今後の自律エージェント実装に有力な選択肢を提供している。

参照ソース

• vercel-labs/agent-browser - GitHub
• agent-browser ドキュメント（公式README）