AIエージェントがブラウザを操作：新しいCLIツール agent-browser

はじめに

システム開発では、軽微な変更であってもデグレや副作用が発生し、最終検証のコストが膨らむことがあります。しかし、タイトなスケジュール下では十分な確認プロセスを回すのが難しく、低コストで実施できる検証手段が求められる場面も少なくありません。

そこで今回試してみたのが agent-browser です。agent-browserはVercel が開発したCLI ツールで、AI エージェントが効率的にブラウザテストや動作確認を行えるように設計されています。

従来のブラウザ自動化ツール(Playwright MCPなど)では、操作の度にページ全体のアクセシビリティツリー情報が返されるため、AIが処理できるコンテキストを圧迫してしまうという課題がありました。agent-browser はこの問題を解決するため、必要なときだけ状態を確認できる仕組みを採用しています。

「デグレや意図しないバグを減らす助けになりそう」「導入が手軽で、忙しい案件でも試しやすそう」と感じたため、実際に触って使用感を確かめてみました。

本記事では、セットアップから基本操作、さらに Claude と組み合わせた動作確認の流れまでを、手順を踏んでご紹介します。

セットアップ

agent-browser のインストールは npm で簡単に行えます。 (npm推奨)

npm install -g agent-browser
agent-browser install

agent-browser install コマンドで、内部で使用する Playwright の Chromium ブラウザがインストールされます。

インストールが完了したら、バージョン確認で動作確認を行います。

agent-browser --version

正しくバージョンが表示されれば、セットアップ完了です。

基本的な使い方

ブラウザを開く

まずは基本的なコマンドから試してみます。open コマンドでブラウザを起動し、指定した URL を開きます。

agent-browser open <https://example.com>

ブラウザウィンドウは表示されませんが、バックグラウンドで Playwright が起動し、指定した URL を開いています。( --headed コマンドをつけることでブラウザウィンドウを表示できます。)開いたブラウザを閉じたい場合にはclose コマンドを使用します。

ページの状態を確認

現在開いているページの要素構造を確認するには、snapshot コマンドを使用します。

agent-browser snapshot

実行結果の例：

- document:
  - heading "Example Domain" [ref=e1] [level=1]
  - paragraph: This domain is for use in illustrative examples...
  - link "More information..." [ref=e2]:
    - /url: <https://www.iana.org/domains/example>

注目すべきは [ref=e1] や [ref=e2] という部分です。これは各要素に付与された参照 ID で、この ID を使って要素を操作できます。CSS セレクタを書く必要がなく、snapshot の結果から直接要素を指定できるため、AI にとって扱いやすい設計になっています。

snapshot → 参照 ID で操作という流れが agent-browser の基本的なワークフローになります。

その他の便利なコマンド

agent-browser click @e2                   # 取得した参照@e2の要素をクリック
agent-browser fill @e3 "test@example.com" # 参照@e3の入力欄にテキストを入力
agent-browser get text @e1                # @e1 のテキスト取得
agent-browser screenshot page.png         # スクリーンショットを保存
agent-browser close                       # ブラウザを閉じる

Claudeと組み合わせて使ってみる

Claudeが agent-browser を適切に使えるように、プロジェクトに設定を追加します。

公式の SKILL.md を使用

agent-browser の公式リポジトリには、 SKILL.md ファイルが用意されています。これをプロジェクトに配置することで、 agent-browser の使い方を教えることができます。

mkdir -p .claude/skills/agent-browser
curl -o .claude/skills/agent-browser/SKILL.md \\
  <https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md>

詳細は公式SKILL.mdを参照してください。

AGENTS.md / CLAUDE.md

公式 README で紹介されている、AGENTS.md / CLAUDE.md 向けのシンプルな記載例を使用することもできます。

## Browser Automation

Use `agent-browser` for web automation. Run `agent-browser --help` for all commands.

Core workflow:
1. `agent-browser open <url>` - Navigate to page
2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)
3. `agent-browser click @e1` / `fill @e2 "text"` - Interact using refs
4. Re-snapshot after page changes

実際のタスク実行

Playwrightの公式デモサイト（TodoMVC）を使って、agent-browserの実際の動作を確認してみます。

使用サイト：https://demo.playwright.dev/todomvc/

Claudeへの指示

<https://demo.playwright.dev/todomvc/> にアクセスして、
「agent-browserのテスト」というTodoを追加し、完了チェックを入れてください。
その後、完了したタスクが1件になっていることを確認してください。

実行されたコマンド

# ページを開く
agent-browser open <https://demo.playwright.dev/todomvc/>

# ページ構造を確認
agent-browser snapshot -i
  - link "real TodoMVC app." [ref=e1]                                                                                                                                     
  - textbox "What needs to be done?" [ref=e2]                                                                                                                             
  - link "Remo H. Jansen" [ref=e3]                                                                                                                                        
  - link "TodoMVC" [ref=e4]

# タスクを追加
agent-browser fill @e2 "agent-browserのテスト"
agent-browser press Enter

# 追加後の状態確認
agent-browser snapshot -i
  - link "real TodoMVC app." [ref=e1]                                                                                                                                        
  - textbox "What needs to be done?" [ref=e2]                                                                                                                                
  - checkbox "❯Mark all as complete" [ref=e3]                                                                                                                                
  - checkbox "Toggle Todo" [ref=e4]        # Todoアイテムの
チェックボックス                                                                                                  
  - link "All" [ref=e5]                                                                                                                                                      
  - link "Active" [ref=e6]                                                                                                                                                   
  - link "Completed" [ref=e7]                                                                                                                                                
  - link "Remo H. Jansen" [ref=e8]                                                                                                                                           
  - link "TodoMVC" [ref=e9]                                                 

# 完了チェックを入れる
agent-browser check @e4

# 状態が変わったので再度snapshot 
agent-browser snapshot -i
  - checkbox "Toggle Todo" [ref=e4] [checked]
  - button "Delete" [ref=e5]
  - link "All" [ref=e6]
  - link "Active" [ref=e7]
  - link "Completed" [ref=e8]
  - button "Clear completed" [ref=e9]

# 完了タブに移動
agent-browser click @e7

# 完了数を確認
agent-browser get count ".todo-list li"
  => 1

# スクリーンショット保存
agent-browser screenshot todomvc-completed.png

# 終了
agent-browser close

コマンドの出力から、タスクが正常に追加され、完了状態になったことが確認できました。