Vercel Agent Browser完全ガイド — AIエージェント向けブラウザ自動化CLIの導入と活用法【2026年版】

Agent Browserは、Vercel Labsが開発したAIエージェント専用のブラウザ自動化CLIツールです。従来のPlaywrightやPuppeteerが人間の開発者向けに設計されているのに対し、Agent BrowserはClaude CodeやCursor、GitHub Copilotなどの大規模言語モデル（LLM）駆動型AIエージェントが直接操作できるよう最適化されています。Rustで構築され、Apache 2.0ライセンスで公開されており、GitHubで25,000以上のスター、NPMでは週間31万ダウンロード以上を記録する急成長中のプロジェクトです。 最大の特徴は、CSS/XPathセレクタの代わりに「アクセシビリティref」（例: @e1、@e2）で要素を特定する仕組みです。これによりAIエージェントが最小限のトークンで的確な操作命令を生成でき、Playwright MCPと比較して82.5%のトークン削減を実現しています。クライアント-デーモンアーキテクチャを採用し、コマンド間でブラウザセッションが永続化されるため、後続操作が極めて高速です。2026年1月のv0.6.0リリースから4月までの3ヶ月間で60以上のバージョンアップが行われており、活発な開発が続いています。

Agent Browserは「AIエージェントのために設計された」点で、PlaywrightやPuppeteerと根本的に異なります。以下の比較表で主要な違いを確認できます。

PlaywrightやPuppeteerは開発者がコードを書いてテストスイートを構築することを前提としていますが、Agent BrowserはAIエージェントがシェルコマンドとして直接実行できるCLIツールです。このため、API呼び出しやライブラリのインポートが不要で、Claude CodeやCursorのようなAIコーディングアシスタントがそのまま利用できます。また、アクセシビリティツリーを活用したref方式により、動的に変化するWebページでも安定した操作が可能で、AIが生成するプロンプトのトークン数を大幅に削減できます。

Agent Browserは3層構造のアーキテクチャを採用しています。 1. Rust CLI（クライアント） — ユーザー（またはAIエージェント）が実行するコマンドラインインターフェース。軽量で起動が高速。 2. ネイティブRustデーモン — バックグラウンドで常駐し、Chromeプロセスとのセッションを管理。v0.16.0でネイティブRustデーモンが導入され、v0.20.0で完全Rust実装が完了しました。 3. Chrome DevTools Protocol — ChromeブラウザとデーモンがCDPで通信。低レベル操作を高速実行。 このクライアント-デーモン分離により、`agent-browser open https://example.com` でブラウザを起動した後、`agent-browser snapshot`、`agent-browser click @e1` などのコマンドを連続実行してもブラウザを再起動する必要がありません。デーモンがセッション状態（ログイン情報、Cookie、ローカルストレージ等）を保持し続けるため、認証フローやマルチステップ操作が大幅に高速化されます。 さらにv0.23.0からはObservabilityダッシュボードが追加され、コマンド実行履歴、スクリーンショット、ネットワークトラフィックをWebUIでリアルタイム監視できるようになりました。これによりAIエージェントのデバッグや監査が容易になっています。

Agent Browserのインストールは非常にシンプルです。以下の3つの方法から選択できます。 npm経由（推奨） ```bash npm install -g agent-browser agent-browser install ``` Homebrew（macOS/Linux） ```bash brew tap vercel/tap brew install agent-browser agent-browser install ``` Cargo（Rust開発者向け） ```bash cargo install agent-browser agent-browser install ``` `agent-browser install` コマンドを実行すると、Chrome for Testingが自動的にダウンロード・インストールされます。既存のChromeブラウザとは独立した環境なので、通常のブラウジングに影響を与えません。WindowsではWSL2環境の使用が推奨されますが、npm/cargoでネイティブインストールも可能です。 初回起動時にデーモンが自動起動し、以降はバックグラウンドで常駐します。デーモンの状態確認は `agent-browser status` で行えます。環境変数 `NO_COLOR=1` を設定すると、ANSIカラーコードが無効化され、AIエージェントがパース可能な機械可読形式で出力されます。

Agent BrowserのコアとなるAI操作パターンが「Snapshot-Refワークフロー」です。以下の4ステップで構成されます。 ステップ1: ページを開く ```bash agent-browser open https://example.com/login ``` ステップ2: スナップショット取得（アクセシビリティツリー） ```bash agent-browser snapshot -i ``` これにより、ページ内の全インタラクティブ要素にref（例: @e1、@e2、@e3）が付与されたアクセシビリティツリーが出力されます。AIエージェントはこのツリーを解析し、操作対象を特定します。 ステップ3: 要素操作（クリック・入力等） ```bash agent-browser click @e2 agent-browser type @e3 "username" agent-browser type @e4 "password" agent-browser click @e5 ``` ステップ4: 視覚的確認（スクリーンショット） ```bash agent-browser screenshot -o result.png ``` このワークフローにより、AIエージェントは「見る（snapshot）→判断（AI処理）→操作（click/type）→確認（screenshot）」のループを自律的に実行できます。特に `-i` フラグ付きスナップショットは、CSS/XPathセレクタを生成する必要がないため、Playwright MCPと比較して約6分の1のトークンで同等の操作が可能です。

Agent Browserの主要機能を分類別に整理します。

特に注目すべきは認証Vault機能です。`agent-browser vault save mysite` でユーザー名・パスワードをローカル暗号化保存し、`agent-browser vault use mysite` で使用できます。これによりAIエージェントのプロンプトに生のパスワードが含まれることがなく、セキュリティリスクが大幅に低減されます。また、HAR（HTTP Archive）記録機能により、ネットワークトラフィックを完全にキャプチャしてデバッグや監査に活用できます。

Agent Browserは、シェルコマンドを実行できるあらゆるAIエージェントで利用可能です。公式に動作確認されている主要プラットフォームは以下の通りです。 - Claude Code — Anthropic公式CLI。`Bash` ツールでagent-browserコマンドを直接実行 - Cursor — VSCodeベースのAIエディタ。ターミナル経由で操作 - GitHub Copilot — GitHub公式AIアシスタント。Workspaceで利用可能 - OpenAI Codex — OpenAI APIベースのエージェント - Google Gemini CLI — Geminiモデルのコマンドラインインターフェース - Goose — オープンソースAIエージェントフレームワーク - OpenCode — コード生成特化型エージェント - Windsurf — 次世代AIペアプログラミングツール いずれのプラットフォームでも、AIエージェントがBashコマンドとして `agent-browser` を呼び出すだけで動作します。ライブラリのインストールやAPI認証は不要で、AIがプロンプト内で「agent-browser open URL を実行して、snapshot でページ内容を取得してください」と指示すれば自動実行されます。 特にClaude Codeでは、Anthropic社が公式にAgent Browserの統合を推奨しており、ドキュメント生成やテスト実行の際にAgent Browserを活用する事例が多数報告されています。

Agent Browserの実際の活用シーンを5つ紹介します。 1. 動的Webスクレイピング JavaScriptで動的生成されるコンテンツ（SPA、無限スクロール等）からデータを抽出。従来のcurlやwgetでは取得できないデータをAgent Browserで収集し、AIエージェントがそのまま分析可能。 2. フォーム自動入力 30フィールド以上の複雑なフォーム（保険申込、官公庁申請等）を約90秒で自動入力完了。手動では12分以上かかる作業を約8倍高速化。AIエージェントがスナップショットからフィールドを特定し、適切な値を自動入力します。 3. Webアプリ自動テスト Claude CodeでHTMLプロトタイプを作成後、Agent Browserで即座に動作検証。「ログインフォームに無効なパスワードを入力してエラーメッセージが表示されることを確認」といった複雑なテストシナリオをAIが自律実行。 4. 競合価格モニタリング 複数のECサイトから商品価格を定期的に取得し、価格変動をトラッキング。Agent Browserがクローラーとして動作し、取得データをAIが分析してレポート生成。 5. エンタープライズ自動化 SalesforceやWorkdayなどのWebベースSaaSダッシュボードを自動操作。レポート生成、承認フロー実行、データエクスポートをAIエージェントが代行。認証Vault機能により安全に認証情報を管理。 これらのユースケースでは、従来はSeleniumやPlaywrightでスクリプトを書く必要がありましたが、Agent Browserを使えばAIエージェントに「この商品価格を毎日チェックして」と指示するだけで自動化が完了します。

Agent BrowserはVercelが提供する「Vercel Sandbox」とネイティブ統合されています。Vercel Sandboxは、エフェメラル（一時的）なLinux VM上でコードを安全に実行できるサーバーレス環境です。 `@vercel/sandbox` パッケージを使用すると、以下のような形でAgent Browserをサーバーレス環境で実行できます。 ```javascript import { sandbox } from '@vercel/sandbox'; const result = await sandbox({ command: 'agent-browser', args: ['open', 'https://example.com', 'snapshot', '-i'], }); ``` Vercel Sandboxの最大の利点はスナップショット起動です。Agent Browser + Chromeの起動済み状態をスナップショット化しておくことで、コールドスタートをサブ秒レベルまで短縮できます。これにより、Vercel FunctionsやEdge Functionsから高速にブラウザ自動化を実行可能になります。 ユースケース例: - APIエンドポイントでWebページのスクリーンショット生成 - OGP画像の動的生成 - PDF請求書の自動生成 - Webスクレイピング結果のキャッシュ配信 Vercel Sandboxは無料枠で月1,000実行まで利用可能で、Pro/Enterpriseプランでは無制限です。Agent BrowserとVercel Sandboxの組み合わせにより、従来サーバー常駐型だったブラウザ自動化がサーバーレス化され、インフラコストを大幅削減できます。

Agent Browserの最大の技術的優位性は、AIエージェントが消費するトークン数の劇的な削減です。Vercel公式ベンチマークでは、Playwright MCP（Model Context Protocol）と比較して82.5%のトークン削減が実証されています。 比較例: GitHubログインフローの操作

この差が生まれる理由は、Playwright MCPではAIが「button[data-test-id='login-submit']」のような詳細なCSSセレクタを生成・保持する必要があるのに対し、Agent Browserでは「@e5」のような短いrefで済むためです。 API課金への影響 仮にClaude 3.5 Sonnetを使用する場合（入力トークン単価: 3ドル/100万トークン）、1,000回のブラウザ操作を実行すると: - Playwright MCP: 12,000トークン × 1,000回 = 1,200万トークン → 約36ドル - Agent Browser: 2,100トークン × 1,000回 = 210万トークン → 約6.30ドル 約30ドル（約4,500円）のコスト削減が可能です。さらに、同じコンテキストバジェット（例: 20万トークン）内でAgent Browserなら5.7倍のテスト実行が可能になります。大規模なE2Eテストスイートや24時間稼働の監視エージェントでは、この差が年間数万円から数十万円のコスト差につながります。

Agent Browserは2026年1月のv0.6.0公開以降、わずか3ヶ月で60以上のバージョンアップを重ねています。主要マイルストーンは以下の通りです。

特にv0.20.0での完全Rust実装は大きな転換点でした。これにより起動時間が約40%短縮され、メモリ使用量も約30%削減されています。また、v0.23.0のObservabilityダッシュボードは、AIエージェントの動作をリアルタイムで監視できる画期的な機能で、エンタープライズ導入時の監査要件を満たすために重要です。 v0.24.0でAWS Bedrock AgentCoreに対応したことで、Amazon BedrockのAIエージェント（Claude on AWS、Titan等）からもAgent Browserを直接利用できるようになり、AWSエコシステムとの統合が強化されました。 今後のロードマップとしては、モバイルブラウザ対応（iOS Safari、Android Chrome）、並列セッション管理、クラウドレコーディング機能などが予定されています。

Agent Browserを本番環境で運用する際の推奨設定とベストプラクティスを紹介します。 1. 機械可読出力の有効化 ```bash export NO_COLOR=1 ``` 環境変数 `NO_COLOR=1` を設定すると、ANSIカラーコードが無効化され、AIエージェントが正確にパース可能な出力形式になります。 2. セッション永続化でログイン状態維持 ```bash agent-browser session save myapp-session # 後で復元 agent-browser session restore myapp-session ``` 認証フローを毎回実行せず、ログイン済みセッションを保存・再利用することで実行時間を短縮。 3. スナップショット-refパターンの徹底 CSS/XPathセレクタを直接指定せず、必ず `snapshot -i` で取得したrefを使用。動的に変化するWebページでも安定動作します。 4. エラー処理とアラートダイアログ自動解除 Agent Browserはアラートダイアログを自動解除しますが、予期しないポップアップが発生する場合は `agent-browser dismiss` で明示的に閉じることも可能。 5. ヘッドレスモードとCI/CD統合 ```bash agent-browser --headless open https://example.com ``` GitHub ActionsやCircleCIで実行する場合は、`--headless` フラグでUIなし実行。 6. タイムアウトとリトライ設定 ネットワーク遅延やページ読み込み遅延に備え、`--timeout 30000`（30秒）のようにタイムアウトを設定し、失敗時のリトライロジックをAIエージェント側に実装。 7. セキュリティとVault活用 パスワードや機密情報は必ず `agent-browser vault save` で暗号化保存し、プロンプトやログに生データが残らないようにします。Vault内のデータはAES-256で暗号化されます。 これらのプラクティスにより、Agent Browserをエンタープライズ環境で安全かつ効率的に運用できます。

Q1: Agent Browserは無料で使えますか？ A1: はい、完全無料です。Apache 2.0ライセンスで公開されており、商用利用も無制限に可能です。Vercel Sandboxと組み合わせる場合、Vercelの料金プランに従います（無料枠は月1,000実行まで）。 Q2: Windows環境で動作しますか？ A2: npm/cargo経由でWindowsネイティブインストールが可能ですが、WSL2環境の使用が推奨されます。macOSとLinuxでは完全にサポートされています。 Q3: Playwright経験があれば移行は簡単ですか？ A3: はい。Playwrightで書いていたスクリプトをAIエージェントがCLIコマンドとして実行する形に変換するだけです。API呼び出しの書き換えは不要で、AIが自然言語指示から適切なコマンドを生成します。 Q4: プライベートサイトの認証情報はどう管理しますか？ A4: 認証Vault機能を使用します。`agent-browser vault save mysite` でユーザー名・パスワードをローカル暗号化保存し、`agent-browser vault use mysite` で使用。LLMプロンプトに生パスワードが渡らないため安全です。 Q5: どのAIエージェントで使用できますか？ A5: Bashコマンドを実行できるあらゆるAIエージェントで利用可能です。Claude Code、Cursor、GitHub Copilot、Goose、Windsurf等、主要なAIコーディングアシスタントすべてで動作確認済みです。 Q6: CI/CDパイプラインに組み込めますか？ A6: はい。GitHub Actions、CircleCI、Jenkins等でheadlessモード（`--headless`）で実行できます。DockerイメージもGitHub Container Registryで公開されており、コンテナ環境でも利用可能です。 Q7: Puppeteerと比べて速度はどうですか？ A7: Rustネイティブ実装により、起動時間は約40%高速化されています。またクライアント-デーモンアーキテクチャによりセッション維持が効率的で、連続操作では体感速度が大幅に向上します。 Q8: スクリーンショット機能の画質は調整できますか？ A8: はい。`agent-browser screenshot --quality 90` のように品質指定が可能です。また、`--full-page` でページ全体、`--clip` で特定領域のみのキャプチャもできます。

Oflightは、Agent Browserを活用したブラウザ自動化・AIエージェント導入支援サービスを提供しています。 支援内容: - Agent Browser環境構築・初期設定サポート - 既存Playwright/PuppeteerスクリプトのAgent Browser移行 - AIエージェント（Claude Code/Cursor等）とのワークフロー最適化 - カスタム自動化シナリオの設計・実装 - Vercel Sandboxを活用したサーバーレスブラウザ自動化 - エンタープライズ向けセキュリティ監査対応 - 24時間稼働監視エージェントの構築 料金目安: - 初期導入支援: 20万円から30万円（環境構築・トレーニング含む） - カスタムシナリオ開発: 5万円から15万円/シナリオ - 月額運用保守: 3万円から10万円（監視・改善含む） Agent Browserを活用した業務自動化により、フォーム入力作業で年間約120時間削減、E2Eテスト実行時間を約70%短縮した実績があります。AIエージェントによるブラウザ自動化でビジネスプロセスを効率化したい企業様は、ぜひOflightのAIコンサルティングサービスをご検討ください。 詳細はこちら: OflightのAIコンサルティングサービス お問い合わせは、Webサイトのお問い合わせフォームまたはメールでお気軽にどうぞ。