💻

【AIエージェントからブラウザ操作】Vercel製のagent-browserを使ってみる

に公開
npm
Vercel
browser
Agent
AIエージェント
tech

agent-browserを使ってみる

はじめに

agent-browserは、Vercel Labsが提供するブラウザ自動化ツールです。CLIベースでブラウザ操作を行うことができ、AI エージェントによるブラウザ操作に最適化されています。

公式Github: https://github.com/vercel-labs/agent-browser

インストール

npmを使用してグローバルにインストールします。

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

Chromiumについて

Chromiumは、Googleが主導するオープンソースのWebブラウザプロジェクトであり、Google ChromeやMicrosoft Edge、Opera、Braveなど、現代の多くの主要ブラウザの基盤（エンジン）として機能しています。要するにGoogleChromeを主体としたブラウザの基盤を担っているオープンソースのコードです。

Quick Start

サイトを開く

デフォルトではバックグラウンドで起動するため、実際にPC上の画面にブラウザは表示されません。

agent-browser open https://www.google.com/
# 出力例:
# ✓ Google
#   https://www.google.com/

スナップショットを撮る

スナップショットを取ることで、サイトのリンクやボタン、入力フォームなどの要素にe1のような参照IDをつけて、agent-browserからの操作を容易にしています。

agent-browser snapshot

出力例:

- document:
  - navigation:
    - link "Googleについて" [ref=e1]:
      - /url: https://about.google/?fg=1&utm_source=google-JP&utm_medium=referral&utm_campaign=hp-header
    - link "ストア" [ref=e2]:
      - /url: https://store.google.com/JP?utm_source=hp_header&utm_medium=google_ooo&utm_campaign=GS100042&hl=ja-JP
    - link "Gmail" [ref=e3]:
      - /url: https://mail.google.com/mail/&ogbl
    - link "画像を検索する" [ref=e4]:
      - /url: https://www.google.com/imghp?hl=ja&ogbl
      - text: 画像
    - button "Google アプリ" [ref=e5]:
      - img
    - link "ログイン" [ref=e6]:
      - /url: https://accounts.google.com/ServiceLogin?hl=ja&passive=true&continue=https://www.google.com/&ec=futura_exp_og_so_72776762_e
  - search:
    - combobox "検索" [ref=e9]
    - button "音声で検索" [ref=e10]
    - button "画像で検索" [ref=e11]
    - button "Google 検索" [ref=e12]
    - button "I'm Feeling Lucky" [ref=e13]

クリック操作

参照IDを使用して要素をクリックします。

agent-browser click @e2
# 出力: ✓ Done

値を入力する

e9はcomboboxなので値を入力できます。

agent-browser fill @e9 "テスト"
# 出力: ✓ Done

注意: リンクなどクリック専用の要素に文字列を入力しようとするとエラーになります。

agent-browser fill @e1 "テスト"
# エラー: ✗ Element "@e1" not found or not visible. Run 'snapshot' to see current page elements.

文字列を取得する

指定した要素の文字列を取得します。

agent-browser get text @e1
# 出力: Googleについて

スクリーンショットを取得する

~/.agent-browser/tmp配下にスクリーンショットが保存されます。

agent-browser screenshot
# 出力: ✓ Screenshot saved to /Users/${PC名}/.agent-browser/tmp/screenshots/screenshot-2026-02-14T07-13-05-824Z-2wshn8.png

ブラウザを閉じる

agent-browser close
# 出力: ✓ Browser closed

要素の指定方法

参照ID以外にも、IDやARIAロールで要素を指定できます。

# IDで指定
agent-browser click "#submit"
agent-browser fill "#email" "test@example.com"

# ARIAロールで指定
agent-browser find role button click --name "Submit"

コマンド一覧

コアコマンド

agent-browser open <url>              # URLに移動 (別名: goto, navigate)
agent-browser click <sel>             # 要素をクリック
agent-browser dblclick <sel>          # 要素をダブルクリック
agent-browser focus <sel>             # 要素にフォーカス
agent-browser type <sel> <text>       # 要素に入力
agent-browser fill <sel> <text>       # クリアして入力
agent-browser press <key>             # キーを押す (Enter, Tab, Control+a) (別名: key)
agent-browser keydown <key>           # キーを押し続ける
agent-browser keyup <key>             # キーを離す
agent-browser hover <sel>             # 要素にホバー
agent-browser select <sel> <val>      # ドロップダウンオプションを選択
agent-browser check <sel>             # チェックボックスをチェック
agent-browser uncheck <sel>           # チェックボックスのチェックを外す
agent-browser scroll <dir> [px]       # スクロール (up/down/left/right)
agent-browser scrollintoview <sel>    # 要素が見えるようにスクロール (別名: scrollinto)
agent-browser drag <src> <tgt>        # ドラッグアンドドロップ
agent-browser upload <sel> <files>    # ファイルをアップロード
agent-browser screenshot [path]       # スクリーンショットを撮影 (--full でページ全体)
agent-browser pdf <path>              # PDFとして保存
agent-browser snapshot                # 参照付きアクセシビリティツリー (AI用に最適)
agent-browser eval <js>               # JavaScriptを実行 (-b でbase64)
agent-browser connect <port>          # CDP経由でブラウザに接続
agent-browser close                   # ブラウザを閉じる (別名: quit, exit)

情報取得

agent-browser get text <sel>          # テキストコンテンツを取得
agent-browser get html <sel>          # innerHTMLを取得
agent-browser get value <sel>         # input要素の値を取得
agent-browser get attr <sel> <attr>   # 属性を取得
agent-browser get title               # ページタイトルを取得
agent-browser get url                 # 現在のURLを取得
agent-browser get count <sel>         # マッチする要素の数をカウント
agent-browser get box <sel>           # バウンディングボックスを取得

状態チェック

agent-browser is visible <sel>        # 表示されているかチェック
agent-browser is enabled <sel>        # 有効かどうかをチェック
agent-browser is checked <sel>        # チェックされているかチェック

要素検索 (セマンティックロケーター)

agent-browser find role <role> <action> [value]       # ARIAロールで検索
agent-browser find text <text> <action>               # テキストコンテンツで検索
agent-browser find label <label> <action> [value]     # ラベルで検索
agent-browser find placeholder <ph> <action> [value]  # プレースホルダーで検索
agent-browser find alt <text> <action>                # alt属性のテキストで検索
agent-browser find title <text> <action>              # title属性で検索
agent-browser find testid <id> <action> [value]       # data-testid属性で検索
agent-browser find first <sel> <action> [value]       # 最初にマッチする要素
agent-browser find last <sel> <action> [value]        # 最後にマッチする要素
agent-browser find nth <n> <sel> <action> [value]     # N番目にマッチする要素

ブラウザ設定

agent-browser set viewport <w> <h>    # ビューポートサイズを設定
agent-browser set device <n>          # デバイスをエミュレート ("iPhone 14")
agent-browser set geo <lat> <lng>     # 位置情報を設定
agent-browser set offline [on|off]    # オフラインモードを切り替え
agent-browser set headers <json>      # 追加のHTTPヘッダーを設定
agent-browser set credentials <u> <p> # HTTP Basic認証
agent-browser set media [dark|light]  # カラースキームをエミュレート

agent-browser cookies                 # すべてのCookieを取得
agent-browser cookies set <n> <val>   # Cookieを設定
agent-browser cookies clear           # Cookieをクリア
agent-browser storage local           # すべてのlocalStorageを取得
agent-browser storage local <key>     # 特定のキーを取得
agent-browser storage local set <k> <v>  # 値を設定
agent-browser storage local clear     # すべてクリア
agent-browser storage session         # sessionStorageも同様

ネットワーク

agent-browser network route <url>              # リクエストをインターセプト
agent-browser network route <url> --abort      # リクエストをブロック
agent-browser network route <url> --body <json>  # レスポンスをモック
agent-browser network unroute [url]            # ルートを削除
agent-browser network requests                 # 追跡されたリクエストを表示
agent-browser network requests --filter api    # リクエストをフィルタ

タブ & ウィンドウ

agent-browser tab                     # タブ一覧を表示
agent-browser tab new [url]           # 新しいタブを作成
agent-browser tab <n>                 # タブnに切り替え
agent-browser tab close [n]           # タブを閉じる
agent-browser window new              # 新しいウィンドウを作成

ナビゲーション

agent-browser back                    # 戻る
agent-browser forward                 # 進む
agent-browser reload                  # ページを再読み込み

デバッグ

agent-browser trace start [path]      # トレース記録を開始
agent-browser trace stop [path]       # トレース記録を停止して保存
agent-browser console                 # コンソールメッセージを表示
agent-browser console --clear         # コンソールをクリア
agent-browser errors                  # ページエラーを表示
agent-browser errors --clear          # エラーをクリア
agent-browser highlight <sel>         # 要素をハイライト

状態管理

agent-browser state save <path>       # 認証状態を保存
agent-browser state load <path>       # 認証状態を読み込み
agent-browser state list              # 保存された状態ファイルを一覧表示
agent-browser state show <file>       # 状態の概要を表示
agent-browser state rename <old> <new> # 状態ファイルの名前を変更
agent-browser state clear [name]      # セッションの状態をクリア
agent-browser state clear --all       # すべての保存された状態をクリア
agent-browser state clean --older-than <days>  # 古い状態を削除

主要オプション

--headedオプション

バックグラウンドではなく、実際に動いているブラウザを可視化できます。

agent-browser open https://www.google.com/ --headed

--sessionオプション

session別にブラウザを起動することが可能です。ログインが必要なサイトがあった場合、異なるユーザーで別々にログインすることができます。

# 異なるセッション
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

--profileオプション

cookies、localStorage、login sessionsなどの保持を行うことができます。

ログイン認証が必要なサイトの場合、本来であれば都度認証をする必要がありますが、profileオプションをつけることでその情報をローカルに保存し、毎回の認証をスキップすることができます。要するに普通にユーザーが使っている状態と同じ感じでCLIを動かせるということです。

# 永続的なプロファイルディレクトリを使用
agent-browser --profile ~/.myapp-profile open myapp.com

試しにGoogleのサイトで実行すると、~/.google-profileが作成されます。ここにcookieやローカルストレージなどの情報が保管されます。

agent-browser --profile ~/.google-profile open https://google.com/

まとめ

agent-browserは、ブラウザ自動化を簡単に行えるCLIツールです。参照IDベースの要素指定やセマンティックロケーター、豊富なコマンド、セッション管理など、AIエージェントによるブラウザ操作に必要な機能が揃っています。テスト自動化やスクレイピング、ブラウザ操作の自動化など、様々な用途で活用できます。

AIエージェントからの使用について

AIエージェントからの使用を試していますが、agent-browserはまだリリースされたばかりのツールのため、うまく動作しないケースがあります。精度の高いアウトプットを得るためには、公式のREADME.mdなどのドキュメントを明示的にAIに提供することが効果的です。

類似ツールとの比較

ほぼ同時期にplaywright-cliもリリースされています。今後は両ツールを試用しながら、それぞれの特徴や使い勝手を比較していく予定です。

今後の検証ポイント

実用化に向けて、以下の点を検証していく必要があります：

Token消費量: AIエージェント使用時のコスト効率
コンテキスト消費量: 処理効率とメモリ使用量

将来性と活用の方向性

AIエージェントによるブラウザ操作は、面倒な事務作業やデバッグ作業を効率化する強力なツールになり得ると考えています。常にアンテナを張り、実際の業務フローにどのように組み込めるかを日々模索していきたいと思います。

Discussion