agent-browser 完全ガイド：AI Agents 専用のコマンドライン ブラウザ自動化ツール

agent-browser の動作原理

agent-browser が従来のブラウザ自動化ツールと異なる点は、「Snapshot + Refs」という革新的なワークフローにあります。

Snapshot + Refs ワークフローの仕組み

# 1. インタラクティブ要素のスナップショットを取得
agent-browser snapshot -i --json

# 2. 返されるJSON内で要素参照(ref)を確認
# 例: button [ref=e2], link [ref=e5]

# 3. ref を使って直接操作を実行
agent-browser click @e2

この方式により、AI エージェントは以下の利点を得られます:

• 確定的な要素選択: 曖昧なセレクタではなく、一意の ref で要素を特定
• コンテキスト削減: DOM 全体ではなく、インタラクティブ要素のみを取得
• 高速な実行: DOM 再クエリが不要

従来の Playwright MCP との比較

インストールと基本設定

agent-browser のインストールは非常にシンプルです。

必要要件

• Node.js: 18.0.0 以上
• npm または pnpm

インストール手順

# グローバルインストール
npm install -g agent-browser

# ブラウザバイナリをインストール
agent-browser install

# 特定のブラウザを指定する場合
agent-browser install --browser firefox

動作確認

# バージョン確認
agent-browser --version

# ヘルプを表示
agent-browser --help

AI 編程助手との統合

agent-browser は MCP(Model Context Protocol)サーバーを必要としません。以下の AI コーディングアシスタントで直接使用できます:

• Claude Code – Anthropic の公式 IDE
• Cursor – AI ネイティブなコードエディタ
• GitHub Copilot – Visual Studio Code 拡張機能
• Codex – OpenAI のコーディングモデル
• Gemini Code Assist – Google の AI アシスタント

使用方法は簡単です。AI アシスタントに「agent-browser を使って〇〇のウェブサイトを開いて」と指示するだけで、自動的に適切なコマンドを実行してくれます。

コマンドリファレンス

agent-browser は 10 個のシンプルなコマンドで構成されています。

セッション管理

# 新しいブラウザセッションを開始
agent-browser start

# 特定のURLを開く
agent-browser start https://example.com

# ヘッドレスモードで起動
agent-browser start --headless

# セッションを停止
agent-browser stop

ナビゲーション

# URLに移動
agent-browser navigate https://github.com

# 戻る
agent-browser back

# 進む
agent-browser forward

ページの情報取得

# インタラクティブ要素のスナップショットを取得
agent-browser snapshot -i

# JSON形式で出力
agent-browser snapshot -i --json

# スクリーンショットを撮影
agent-browser screenshot

# 特定の要素のスクリーンショット
agent-browser screenshot @e5

要素操作

# 要素をクリック
agent-browser click @e2

# テキストを入力
agent-browser fill @e3 "検索キーワード"

# Enterキーを押す
agent-browser press @e3 "Enter"

# スクロール
agent-browser scroll down 500

高度な操作

# JavaScript を実行
agent-browser evaluate "document.title"

# 待機
agent-browser wait 2000

# 要素が表示されるまで待機
agent-browser wait @e4

実践例:GitHub リポジトリの検索

AI アシスタントを使って GitHub でリポジトリを検索するシナリオを見てみましょう。

シナリオ

「agent-browser を使って GitHub で "react" を検索し、最初の検索結果をクリックして」

AI が実行するコマンド

# 1. GitHub を開く
agent-browser start https://github.com

# 2. インタラクティブ要素を取得
agent-browser snapshot -i --json

# 3. 検索ボックスを特定(例: ref=e8)してテキストを入力
agent-browser fill @e8 "react"

# 4. Enterキーで検索実行
agent-browser press @e8 "Enter"

# 5. 検索結果ページのスナップショットを取得
agent-browser snapshot -i --json

# 6. 最初のリンクをクリック(例: ref=e12)
agent-browser click @e12

# 7. スクリーンショットで確認
agent-browser screenshot

JSON 出力例

{
  "elements": [
    {
      "ref": "e8",
      "role": "searchbox",
      "name": "Search GitHub",
      "tag": "input"
    },
    {
      "ref": "e12",
      "role": "link",
      "name": "facebook/react",
      "tag": "a"
    }
  ]
}

この JSON を AI が解析し、適切な ref を使って操作を実行します。

よくある問題と解決方法

1. ブラウザが起動しない

原因: ブラウザバイナリがインストールされていない

解決方法:

agent-browser install

2. コマンドが見つからない

原因: グローバルインストールが完了していない

解決方法:

npm install -g agent-browser
# または
npx agent-browser start

3. ref が見つからない

原因: ページの読み込みが完了していない

解決方法:

# ページ読み込みを待つ
agent-browser wait 3000

# その後スナップショットを取得
agent-browser snapshot -i --json

4. 複数セッションの管理

agent-browser は複数のブラウザセッションを並行実行できます:

# セッション1を開始
agent-browser start --session session1 https://github.com

# セッション2を開始
agent-browser start --session session2 https://google.com

# 特定のセッションで操作
agent-browser snapshot -i --session session1

ベストプラクティス

1. JSON モードを活用する

AI エージェントには常に --json フラグを使用させます:

agent-browser snapshot -i --json

これにより、AI がパースしやすい構造化データが得られます。

2. ヘッドレスモードで効率化

開発・テスト時は通常モード、本番では --headless を使用:

# 開発時:ブラウザを表示
agent-browser start https://example.com

# 本番時:バックグラウンド実行
agent-browser start --headless https://example.com

3. スクリーンショットで検証

重要な操作の後はスクリーンショットを撮影して、AI が正しく動作しているか確認:

agent-browser click @e5
agent-browser screenshot

4. 待機時間を適切に設定

動的コンテンツの読み込みには十分な待機時間を確保:

agent-browser navigate https://spa-app.com
agent-browser wait 2000  # 2秒待機
agent-browser snapshot -i --json

agent-browser vs 他のツール

Playwright MCP との比較

Puppeteer との比較

Selenium との比較

まとめ

agent-browser は、AI エージェントのためのブラウザ自動化において革新的なソリューションです。主な利点は:

✅ 93% のコンテキスト削減 – コスト節約と効率化
✅ ゼロコンフィグ – MCP サーバー不要、即座に利用可能
✅ 高速実行 – Rust CLI による高パフォーマンス
✅ 確定的な操作 – Ref ベースの要素選択
✅ 主要 AI ツール対応 – Claude、Cursor、Copilot など

AI コーディングアシスタントを使ってウェブ操作を自動化したい場合、agent-browser は最適な選択肢です。

次のステップ

1. agent-browser をインストールして試す
2. お気に入りの AI アシスタントと統合する
3. 実際のプロジェクトで活用する

おすすめの AI API サービス: APIYI – 安定性と信頼性を兼ね備えた AI 大規模言語モデル API 中継サービス。コストパフォーマンスに優れ、無料トライアルも提供しています。

agent-browser クイックスタート

インストールと設定

わずか2行のコマンドでインストールが完了します:

npm install -g agent-browser
agent-browser install  # Chromiumをダウンロード

Linuxシステムでシステム依存関係のインストールが必要な場合:

agent-browser install --with-deps

基本的な使い方

よく使われるコマンドの例です:

# Webページを開く
npx agent-browser open example.org

# ページのスナップショットを取得(インタラクティブな要素)
npx agent-browser snapshot -i

# 要素をクリック(ref参照を使用)
npx agent-browser click @e2

# 新しいタブで開く
npx agent-browser tab new vercel.com

# フォームに入力
npx agent-browser fill @e3 "[email protected]"

# スクリーンショット
npx agent-browser screenshot output.png

# ナビゲーション操作
agent-browser open <url>          # Webページを開く
agent-browser back                # 戻る
agent-browser forward             # 進む
agent-browser reload              # 再読み込み

# 要素とのインタラクション
agent-browser click <selector>    # クリック
agent-browser dblclick <selector> # ダブルクリック
agent-browser fill <sel> <text>   # 入力欄に入力
agent-browser type <sel> <text>   # 一文字ずつ入力
agent-browser press <key>         # キー入力
agent-browser hover <selector>    # ホバー
agent-browser select <sel> <val>  # ドロップダウン選択
agent-browser check <selector>    # チェック
agent-browser scroll <direction>  # スクロール
agent-browser drag <from> <to>    # ドラッグ&ドロップ
agent-browser upload <sel> <file> # ファイルアップロード

# 情報取得
agent-browser get text <selector>   # テキストを取得
agent-browser get html <selector>   # HTMLを取得
agent-browser get value <selector>  # 値を取得
agent-browser get attr <sel> <attr> # 属性を取得
agent-browser get title             # タイトルを取得
agent-browser get url               # URLを取得
agent-browser is visible <selector> # 表示されているか
agent-browser is enabled <selector> # 有効になっているか

# スナップショットとスクリーンショット
agent-browser snapshot         # 完全なスナップショット
agent-browser snapshot -i      # インタラクティブな要素のみ
agent-browser snapshot --json  # JSON形式で出力
agent-browser screenshot       # スクリーンショット

# セッション管理
agent-browser --session mytest open url  # 名前付きセッション
agent-browser close                      # セッションを閉じる

おすすめ: --jsonパラメータを使用すると構造化された出力が得られ、AI Agentでの解析処理が簡単になります。

Snapshot + Refs ワークフローの詳細解説

これがagent-browserの最も革新的なコア機能です——アクセシビリティツリーのスナップショットと要素参照によって、確定的な操作を実現します。

スナップショットの取得

agent-browser snapshot -i

出力例:

button "Submit" [ref=e2]
input "Email" [ref=e3]
link "Learn more" [ref=e4]

Refsを使った操作の実行

# @e# 構文で要素を参照
agent-browser click @e2        # Submitボタンをクリック
agent-browser fill @e3 "[email protected]"  # メールアドレスを入力

ワークフローの利点

agent-browser と Playwright MCP の比較

AIプログラミングアシスタントでの使用方法

Claude Codeとの統合

Claude Codeとの対話で、agent-browserの使用を指示します:

agent-browserを使ってexample.orgを開き、ログインボタンをクリックしてください

Claude Codeは以下を実行します:

npx agent-browser open example.org
npx agent-browser snapshot -i
# スナップショットを分析してログインボタンを探す
npx agent-browser click @e5

Cursor / Copilot / Codexとの統合

これらのツールはすべてBashコマンドの実行に対応しているため、agent-browserを直接使用できます。ポイントは、fetchやweb-searchツールではなく、agent-browserを使用することをプロンプトで明確に指示することです。

ベストプラクティス

1. ツールを明示的に指定: AIに対してagent-browserを使用するよう伝え、他のブラウザツールを呼び出さないようにします
2. JSON出力を活用: --jsonパラメータでAIが結果を解析しやすくします
3. スナップショットを活用: まずスナップショットを取得してから操作を実行します
4. セッションに名前を付ける: --sessionで複数のブラウザインスタンスを管理します

よくある質問

agent-browser --headed open example.org

まとめ

agent-browser の主なポイント:

1. 93% のコンテキスト削減: Playwright MCP と比較してトークン消費を大幅に削減し、長いコンテキスト警告を回避
2. ゼロコンフィグで即利用可能: MCP のインストール不要、npm でグローバルインストールするだけですぐに使用可能
3. Snapshot + Refs: 革新的なワークフロー設計により、確定的な要素選択を実現し、DOM への繰り返しクエリが不要
4. 幅広い互換性: Claude Code、Cursor、Codex、Copilot、Gemini など、Bash に対応するすべての AI Agent で利用可能

AI アシスタントにブラウザ操作を実行させる場面では、agent-browser が現時点で最も効率的な選択肢です。

AI プログラミングアシスタントを使って Web 開発やテストを行っている方は、ぜひ agent-browser を試してみてください。APIYI apiyi.com が提供する AI モデルサービスと組み合わせることで、より効率的な自動化ワークフローを構築できます。

参考資料

⚠️ リンク形式について: すべての外部リンクは 資料名: domain.com の形式で表記しています。コピーは簡単ですがクリックはできません。これによりSEO権重の流出を防いでいます。

1. agent-browser GitHubリポジトリ: Vercel Labsの公式プロジェクト、完全なドキュメントとサンプルを含む

   • リンク: github.com/vercel-labs/agent-browser
   • 説明: 最新の機能アップデートと使用方法を確認できます

2. Chris Tate Twitter: agent-browserの作者のTwitterアカウント

   • リンク: x.com/ctatedev
   • 説明: プロジェクトの最新情報や使い方のコツを入手できます

3. Playwright MCP比較ドキュメント: Playwright MCPツール乱立問題の分析

   • リンク: speakeasy.com/blog/playwright-tool-proliferation
   • 説明: agent-browserが解決する課題について理解できます

著者: 技術チーム
技術交流: コメント欄でのディスカッションを歓迎します。より詳しい資料はAPIYI apiyi.com 技術コミュニティでご覧いただけます