agent-browserでブラウザ自動化｜Claude Code導入5ステップ

クイックサマリー: agent-browser は Vercel（vercel-labs）が公開している、AIエージェント専用に設計されたブラウザ自動化CLIです。Rust製のネイティブバイナリとして動作し、Claude Code のスキルとして組み込むと「ページを開いて、フォームに入力して、スクリーンショットを撮る」といった操作をエージェントに任せられます。Claude Code のほか、Cursor や Codex CLI など任意のコーディングエージェントからコマンド経由で利用できます。

agent-browserとは — コーディングエージェントに「ブラウザの手」を与えるOSS

Claude Code や Cursor でWebアプリを開発していると、「実装はできたが、動作確認は結局人間がブラウザを開いて行う」という課題に突き当たります。従来の解決策だった Playwright MCP は強力ですが、DOM構造をそのままコンテキストに流し込むため、トークン消費が大きくなりがちでした。実際、技術ブログメディア Towards AI の記事では「Playwright MCP は数千行のDOM構造をダンプしてしまう」ことが課題として指摘されています。

agent-browser はこの課題に対し、アクセシビリティツリーベースの「スナップショット」という軽量な表現でページを渡すアプローチを取ります。サードパーティの検証記事（Oflight）では、Playwright 系のアプローチと比較してトークン消費を大幅に削減できた（同記事の計測では82.5%減）と報告されています。GitHub リポジトリは Star 30,000 超（2026年7月時点）と活発で、スキルレジストリ経由のインストール数は本記事執筆時点で約53.5万件とされています。LICENSE ファイルが同梱されたOSSであり、ソースコードはすべて GitHub で公開されています。

• この記事でわかること①: agent-browser のインストールと Claude Code スキルとしての有効化手順
• この記事でわかること②: スナップショット（@ref）を使った基本操作と設定オプション
• この記事でわかること③: QA・スクレイピングなど実開発フローへの組み込み方
• この記事でわかること④: Playwright MCP との客観的な使い分け基準

何ができるか — 主要機能と対応CLI

agent-browser は特定のエディタに依存しない単体のCLIです。そのため Claude Code / Codex CLI / Cursor / Antigravity CLI など、シェルコマンドを実行できるエージェントならどれからでも利用できます。リポジトリには Claude Code 向けのスキル定義（skills/agent-browser ディレクトリ）が同梱されており、スキルとして登録すると Claude Code が適切なタイミングで自律的にブラウザ操作を選択するようになります。

• スナップショット操作: agent-browser snapshot でアクセシビリティツリーを取得し、@e2 のような参照（ref）で要素をクリック・入力できます
• 基本操作コマンド: open / click / fill / type / press / hover / select / check / scroll / drag / upload など、手動テストで行う操作をほぼ網羅
• 情報取得: get text / get html / get url / get count など、検証（アサーション）に使える取得系コマンド
• スクリーンショット・PDF: 全画面撮影（--full）や、要素に番号ラベルを付けた注釈付き撮影（--annotate）に対応
• agent-readableなページ読取: agent-browser read はChromeを起動せずにページをMarkdownとして取得し、llms.txt の探索にも対応
• AIチャットモード: agent-browser chat "<指示>" で自然言語からのブラウザ操作（単発・REPL両対応）
• CDP接続: agent-browser connect で既存のChromeに接続可能

公式READMEによると、デーモンの実行に Playwright も Node.js も不要で、Chrome は Google 公式の自動化チャネル「Chrome for Testing」からダウンロードされます。既存の Chrome・Brave・Playwright・Puppeteer のインストールも自動検出されます。

インストール・有効化手順（5ステップ）

ステップ1: CLI本体のインストール。公式READMEでは npm でのグローバルインストールが推奨されています。

npm install -g agent-browser
agent-browser install   # 初回のみ: Chrome for Testing をダウンロード

macOS なら Homebrew（brew install agent-browser）、Rust環境なら cargo install agent-browser でも導入できます。Linux ではブラウザ用のシステム依存ライブラリを含めて導入する agent-browser install --with-deps が用意されています。

ステップ2: 動作確認。インストール後、次の一連のコマンドが通れば準備完了です。

agent-browser open example.com
agent-browser snapshot        # @e1, @e2... のrefが返る
agent-browser get title
agent-browser close

ステップ3: Claude Code へのスキル登録。リポジトリの skills/agent-browser に SKILL.md が同梱されているため、これをプロジェクトの .claude/skills/agent-browser/（またはユーザー共通の ~/.claude/skills/）へ配置します。skills.sh のCLIを利用している場合は npx skills add vercel-labs/agent-browser のようにレジストリ経由での導入も可能です。

ステップ4: CLAUDE.md への連携指示。Claude Code が確実にこのツールを使うよう、プロジェクトの CLAUDE.md に一文を加えておくと安定します。

# CLAUDE.md への追記例
- UI変更を実装したら agent-browser で該当ページを開き、
  screenshot --annotate で表示確認を行うこと
- ページ内容の調査は Playwright ではなく agent-browser snapshot を使うこと

ステップ5: 更新。アップデートは agent-browser upgrade の1コマンドです。公式READMEによると、npm / Homebrew / Cargo のどれで入れたかを自動判別して適切な更新コマンドを実行してくれます。

設定例 — よく使うオプション

agent-browser は設定ファイルよりもコマンドラインフラグ中心の設計です。実務でよく使うオプションを挙げます。

# スクリーンショットの保存先・形式を指定（デフォルトは一時ディレクトリにPNG）
agent-browser screenshot --screenshot-dir ./shots
agent-browser screenshot --screenshot-format jpeg --screenshot-quality 80

# フルページ撮影・注釈付き撮影
agent-browser screenshot --full page.png
agent-browser screenshot --annotate

# ヘッドレス時のネイティブスクロールバーを表示したまま撮る（既定は非表示）
agent-browser open example.com --hide-scrollbars false

# refではなく従来のCSSセレクタも使用可能
agent-browser click "#submit"
agent-browser find role button click --name "Submit"

デフォルト値のまま使い始めて支障はありませんが、ビジュアルリグレッション比較を行う場合は保存先ディレクトリ（--screenshot-dir）をプロジェクト内に固定しておくと、before/after の diff が取りやすくなります。

実開発フローに組み込む方法 — QA・スクレイピングの実例

例1: フロントエンド開発者のセルフQAフロー。Claude Code にフォームのバグ修正を依頼した後、そのまま検証まで任せる流れです。公式READMEのクイックスタートに沿うと、操作は次のようになります。

agent-browser open localhost:3000/signup
agent-browser snapshot                     # フォーム要素のrefを取得
agent-browser fill @e3 "test@example.com"
agent-browser click @e5
agent-browser get url                      # 遷移先URLで成功を確認
agent-browser screenshot signup-after.png

公式ドキュメントには「クリック対象が同意バナーやモーダルに覆われている場合、クリックは早期に失敗し、覆っている要素が報告される」と明記されており、その要素を先に閉じてから再スナップショット→リトライする、というエラー回復の型が示されています。曖昧に失敗しない設計は、エージェントに検証を任せるうえで重要なポイントです。

例2: テクニカルライター・リサーチ用途のドキュメント収集。read コマンドはブラウザを起動せず、Markdown優先でページを取得します。llms.txt に対応したドキュメントサイトなら、必要なセクションだけを絞り込めます。

agent-browser read https://docs.example.com --llms index --filter auth
agent-browser read https://example.com/article --outline

例3: QAエンジニアの回帰テスト補助。Claude Code の hooks でビルド成功後に「主要3ページを開いてスクリーンショットを保存する」スクリプトを実行させれば、デプロイ前の目視確認を半自動化できます。スクリプト自体は上記コマンドを並べたシェルスクリプトで十分です。マーケティング担当者が競合LPの文言変化を定期取得する、といった非エンジニア寄りのユースケースでも、read コマンドだけで完結します。

なお、開発者コミュニティでの評判として、Medium の解説記事では「Claude Code の内側からWebページを操作できるようになる」点が導入動機として紹介されており、Claude Code・OpenCode など複数エージェントとの組み合わせ事例が公開されています。

類似ツールとの比較 — Playwright MCPとどう使い分けるか

使い分けの目安は次のとおりです。コーディングエージェントの検証・QA用途で、トークン効率と速度を重視するなら agent-browser、MCPのツール呼び出しとして統一的に管理したい・Firefox / WebKit も対象にしたいなら Playwright MCP、Pythonで独自の自律エージェントを組むなら browser-use が候補になると考えられます。

注意点・制約・セキュリティ

• 実サイトへの副作用: フォーム送信・クリックは実際に実行されます。投稿・購入・削除など不可逆な操作を含むページをエージェントに任せる際は、対象URLを限定するか確認ステップを挟むべきです
• 認証情報の扱い: fill でパスワードを渡すとコマンド履歴に残ります。シークレットは環境変数経由にするなど、履歴への平文残留を避ける運用が必要です
• eval は任意JS実行: agent-browser eval はページ上で任意のJavaScriptを実行できるため、エージェントへ無制限に許可する場合はリスクを理解した上で使うことが求められます
• 外部通信: 通信は基本的に対象サイトへのアクセスと、初回の Chrome for Testing ダウンロードです。chat コマンド（自然言語操作）はAIプロバイダーへの接続を伴うため、送信先は公式ドキュメントで確認してください
• スクレイピングの規約: 対象サイトの利用規約・robots.txt を尊重する責任は利用者側にあります
• バージョン依存: Node.js 24+ / pnpm 11+ / Rust が必要なのはソースからビルドする場合のみで、通常利用では不要です

まとめ — こんな人におすすめ

• agent-browser は Vercel 製のブラウザ自動化CLIで、スナップショット＋ref方式によりAIエージェントのトークン消費を抑えながらブラウザ操作を任せられます
• 導入は npm install -g agent-browser と agent-browser install の2コマンドで完了し、Claude Code には同梱スキルの配置と CLAUDE.md への一文追記で統合できます
• 実装→ブラウザ検証→スクリーンショット確認までをエージェントに一気通貫で任せたい開発者に向いています。一方、MCPでのツール統一管理や多ブラウザテストが必須の場合は Playwright MCP のほうが適していると考えられます

より詳しいコマンドリファレンスは agent-browser 公式リポジトリのREADMEおよびdocsディレクトリを参照してください。Claude Code を日常的に使っている方なら、まずは手元のプロジェクトで agent-browser open から試してみると操作感がつかめます。