【徹底解説】agent-browser完全ガイド｜Vercel発AIエージェント向けブラウザ自動化CLI

Vercel Labsが開発した「agent-browser」は、AIエージェントのために設計された革新的なブラウザ自動化CLIツールです。Rust製の高速なCLIと独自のRefシステムにより、従来のPlaywrightやPuppeteerよりも直感的かつ効率的にブラウザ操作を実現します。

本記事では、その基本概要から実践的な使い方、他ツールとの比較、実際の使用感レポートまでを完全網羅して解説します。

動画でも詳細に解説しているので、興味のある方はこちらからどうぞ

agent-browserとは？Vercelが放つAI専用ブラウザ操作ツール

近年、LLM（大規模言語モデル）を活用したAIエージェントの開発が急速に進んでいます。これらのエージェントがWebサイトを操作し、情報を収集したりタスクを実行したりするためには、従来のSeleniumやPlaywrightといったテストツールとは異なるアプローチが必要でした。そこでVercel Labsが開発したのが、コマンドラインインターフェース（CLI）から直感的にブラウザを操作できる「agent-browser」です。

agent-browserは、ヘッドレスブラウザ自動化を目的として設計されたオープンソースプロジェクト（Apache-2.0ライセンス）です。GitHubでのスター数は1,400を超えており、AIエージェント開発者の間で急速に注目を集めています。このツールの最大の特徴は、AIにとって扱いやすい「コマンド」の体系と、複雑なDOM操作を不要にする「Refシステム」にあります。

AIエージェントのために再設計されたブラウザ自動化

従来のブラウザ自動化ツールは、主に人間のエンジニアがテストコードを書くために設計されていました。これらはJavaScriptやTypeScriptなどのプログラミング言語でAPIを呼び出し、ブラウザを操作します。しかし、AIエージェントにとってコードを記述し、実行し、エラーを修正するプロセスは非常に効率が悪く、トークン数も消費してしまいます。

agent-browserはこの課題を解決するため、「コードを書く」のではなく「コマンドを実行する」スタイルを採用しました。例えば、ページを開くには`open`、要素をクリックするには`click`というシンプルな命令をCLI経由で送るだけで済みます。これにより、AIエージェントは自然な会話の延長线上でブラウザ操作を行えるようになり、開発者も複雑なラッパーを書く必要がなくなりました。

RustとNode.jsを組み合わせた独自のアーキテクチャ

agent-browserの高いパフォーマンスの秘密は、そのアーキテクチャにあります。フロントエンドには高速かつ軽量なRustを採用し、ユーザーが入力したCLIコマンドを瞬時に処理します。一方で、ブラウザの実際の操作には、定評のあるPlaywrightをNode.jsのデーモンプロセス経由で利用しています。

この「クライアント・デーモン構造」により、Rustの実行速度とPlaywrightの安定したブラウザ制御能力を両立しています。AIエージェントが頻繁にコマンドを送信しても、CLIの応答速度がボトルネックになりにくいため、スムーズな自動化を実現可能です。また、バックエンドでNode.jsが動作しているため、既存のPlaywrightエコシステムやブラウザエンジン（Chromium, Firefox, WebKit）をそのまま活用できるというメリットもあります。

主な機能と対応プラットフォーム

agent-browserは、macOS（ARM64/x64）、Linux（ARM64/x64）、Windows（x64）と主要なOSにネイティブ対応しており、環境を選びません。特にApple Silicon（M1/M2/M3）Macでの動作は最適化されており、非常に高速です。対応ブラウザもChromium、Firefox、WebKitの主要3エンジンをサポートしており、クロスブラウザ検証も可能です。

機能面も充実しており、単純なクリックやスクロールだけでなく、フォーム入力、ドラッグ＆ドロップ、ネットワークリクエストのインターセプト、PDF生成、ストレージ（Cookie/LocalStorage）の管理など、高度な操作がCLIコマンド一つで実行できます。これらの機能はすべてJSON形式での入出力に対応しているため、プログラムからの利用はもちろんのこと、AIエージェントとの連携もシームレスです。

なぜAIエージェント開発にこのツールが最適なのか

AIエージェントがWebブラウザを操作する際、最大の障壁となるのが「ページ内の要素を特定する」というプロセスです。従来の手法では、CSSセレクタやXPathを生成して要素を指定していましたが、これにはいくつかの重大な問題がありました。agent-browserは、これらの問題を解消するために「Refシステム」という画期的な仕組みを導入しました。

従来のDOM操作がAIにとって難しい理由

従来、SeleniumやPlaywrightを使用する場合、AIは以下のような手順を踏む必要がありました。まずページのHTML構造を解析し、目的の要素（例：「送信ボタン」）を見つけ出します。次に、その要素を一意に特定するためのCSSセレクタ（例：`button#submit-form.btn-primary`）を生成します。

しかし、この方法には2つの大きな問題があります。1つ目は、現代のWebサイトのHTML構造が非常に複雑であり、動的に変化するクラス名などが多いため、正確なセレクタを生成することが極めて難しいことです。2つ目は、AIがセレクタを生成するために多くの「推論」を行う必要があり、その分だけ処理時間がかかり、コスト（トークン数）がかさむことです。さらに、生成されたセレクタがサイトの更新によって無効になり、動作しなくなるリスクも常にありました。

セレクタ不要のRefシステム徹底解説

agent-browserが採用した「Refシステム」は、この問題を根本から解決します。まず、`snapshot`コマンドを実行すると、ブラウザは現在のページの「アクセシビリティツリー」を解析し、インタラクティブな要素に対して一意のID（`@e1`, `@e2`など）を自動的に割り振ります。

AIエージェントはスナップショットの結果を見て、「`@e2`がクリックしたいボタンだ」と判断するだけで済みます。セレクタを文字列操作で生成する必要はありません。操作時には`click @e2`と指定するだけで、内部的にIDとDOM要素が紐付けられているため、正確に要素をクリックできます。この仕組みにより、AIはDOMの構造的詳細を気にすることなく、ページの「意味的な構造」に基づいて操作を行えるようになります。

AIとの対話を前提としたコマンド設計

agent-browserは、AIがツールと対話することを前提に設計されています。すべてのコマンドは`--`オプションを指定することで、機械可読なJSON形式で結果を返します。これには成功したかどうかを示す`success`フラグや、スナップショットデータ、取得したテキストなどが含まれ、AIがパースして次のアクションを決定するのに最適です。

また、CLIという性質上、基本的にはステートレスなコマンドの積み重ねで処理を記述します。オブジェクト指向プログラミングのようにブラウザインスタンスへの参照を保持し続ける必要がなく、「今の状態でこのコマンドを実行せよ」という指示を出すだけで済みます。これはコンテキストウィンドウに制限のあるLLMにとって非常に扱いやすいインターフェースです。さらに、`--session`オプションを使えば、Cookieや履歴を独立したセッションとして管理することも可能で、並列タスク処理にも対応しています。

インストールから基本操作までの完全ステップガイド

ここからは実際にagent-browserを使い始めるための手順を解説します。インストールは非常にシンプルで、Node.js環境があれば数分でセットアップが可能です。まずは基本的なページ遷移から、スナップショットの取得、要素のクリックという一連の流れをマスターしましょう。

環境構築とインストール手順

agent-browserをインストールするには、npm（Node Package Manager）を使用するのが最も簡単です。以下のコマンドを実行してください。

npm install -g agent-browser

インストールが完了したら、ブラウザエンジン（Chromiumなど）をセットアップします。最初の実行時に自動的にダウンロードされますが、明示的に行う場合は以下のコマンドを使用します。

agent-browser install

Linux環境を使用している場合、システム依存のライブラリが必要になることがあります。その際は以下のコマンドを実行してください。

agent-browser install --with-deps

これで準備は完了です。`agent-browser --help`（注：現バージョンによっては実装状況が異なる場合があります）と入力して、コマンド一覧が表示されれば正常に動作しています。

ページ遷移とスナップショットの取得方法

まずは任意のWebサイトを開いてみましょう。例として、`example.com`にアクセスする場合は以下のように入力します。

agent-browser open "https://example.com"

実行すると、ブラウザがバックグラウンドで起動し、ページが読み込まれます。成功すると、ページタイトルとURLがコンソールに出力されます。

次に、このページの構造を解析するためにスナップショットを取得します。

agent-browser snapshot

このコマンドを実行すると、以下のようなYAMLライクな形式でページ構造が出力されます。これは生のHTMLではなく、スクリーンリーダーが利用するのと同じアクセシビリティツリーに基づいているため、AIにとって理解しやすい構造になっています。

- document:
  - heading "Example Domain" [ref=e1] [level=1]
  - paragraph: This domain is for use in documentation examples...
  - paragraph:
    - link "Learn more" [ref=e2]:
      - /url: https://iana.org/domains/example

ここで重要なのが`[ref=e1]`や`[ref=e2]`というIDです。これがRefシステムによる参照IDです。このIDを使って、後で要素を操作します。オプションとして、`-i`（インタラクティブ要素のみ）、`-c`（コンパクト表示）、`-d 3`（深さ制限）などがあり、目的に合わせて出力をフィルタリングできます。

RefIDを使ったクリックと入力の実践

スナップショットで取得したRef IDを使って、実際にページ上の要素を操作してみましょう。先ほどの例で「Learn more」というリンクに`e2`というIDが割り振られていました。このリンクをクリックするには、以下のコマンドを実行します。

agent-browser click @e2

成功すると「Done」と表示され、ページ遷移が完了します。このように、CSSセレクタを考える必要がなく、スナップショットで見つけたIDをそのまま指定するだけで操作できるのが大きな利点です。

次に、フォーム入力を行う例を見てみましょう。例えば、検索ボックスに`e5`というIDが割り振られているとします。ここにテキストを入力するには`fill`コマンドを使用します。

agent-browser fill @e5 "agent-browser"

情報の取得も簡単です。現在のURLやページタイトルを取得するには、以下のコマンドを使用します。

agent-browser get url
agent-browser get title

また、特定の要素のテキストを取得したい場合は、以下のように入力します。

agent-browser get text @e1

これらの一連の操作（Open -> Snapshot -> Click -> Fill）を組み合わせることで、複雑なWebサイト上のタスクも自動化できます。

PlaywrightやPuppeteerとの違いと実機レビュー

ブラウザ自動化といえば、PlaywrightやPuppeteer、Seleniumが定番ですが、agent-browserはこれらとは根本的に異なる立ち位置にあります。ここでは、実際にagent-browserをmacOS環境で使用したレビューに基づき、既存ツールとの違いやメリット・デメリットを比較します。

既存ライブラリと根本的に異なるアプローチ

PlaywrightやPuppeteerは、主にE2Eテストやスクレイピングを行うために開発者がコードを書くための「ライブラリ」です。それらを使用するには、TypeScriptやJavaScriptでテストスクリプトを記述し、非同期処理やページライフサイクルを適切に管理するプログラミングスキルが必要です。

対してagent-browserは、あくまで「CLIツール」です。コードを書くのではなく、シェルスクリプトやターミナルからコマンドを実行します。この違いは、AIエージェントにとって決定的です。AIにとってコードを記述・デバッグするよりも、定義されたCLIコマンドを呼び出す方がはるかに容易であり、エラー率も低くなります。Playwrightは「人間がテストを書くための最良解」ですが、agent-browserは「AIがブラウザを動かすための最良解」と言えるでしょう。

実際の動作速度と操作性の実機検証

実際にmacOS (ARM64) 環境でagent-browserを使用したところ、その操作感は非常に快適でした。まず、コマンドの起動速度がRustのおかげで極めて速く、待ち時間がほとんど感じられません。PlaywrightのようなNode.jsプロセスの立ち上げ待ちが軽減されています。

操作のフィードバックも優れています。コマンド成功時には緑色のチェックマーク（✓）、失敗時には赤いエラーメッセージが表示され、視覚的に結果が一目でわかります。また、Refシステムによる要素操作の体験は、セレクタを探るストレスから解放されるため、一度使うと手放せなくなる感覚があります。

一方で、まだ開発初期段階であることも感じられました。例えば、バージョン確認の`--version`オプションが実装されていない（Unknown commandエラーになる）点や、公式ドキュメントがGitHubのREADMEに留まっている点など、エンタープライズ用途で利用するには情報が不足している部分もあります。しかし、コアとなる自動化機能は非常に安定しており、日常的な自動化タスクには問題なく対応できそうです。

具体的な活用シーンとおすすめのユーザー

agent-browserが最も力を発揮するのは、やはりAIエージェントの開発現場です。特に、LLM（ClaudeやGPTなど）にツール使用能力を持たせる場合、PlaywrightのAPIを学習させるよりも、agent-browserのコマンドセットを教える方が遥かに効率的です。また、Vercel製であることから、Next.jsなどのVercelエコシステムとの親和性も期待されます。

また、AI開発者だけでなく、簡単なスクレイピングや定型業務の自動化を行いたいユーザーにもおすすめです。「コードを書くまでもないけど、ブラウザ操作を自動化したい」という場合に、シェルスクリプトと組み合わせて強力なツールとなります。

逆に、複雑なテストシナリオ、詳細なアサーション、大規模な並列テストなどを実行する場合は、Playwrightなどの本格的なテストフレームワークを使用する方が適しています。現在のところ、agent-browserはPlaywrightの置き換えではなく、AIのための新しいレイヤーとして捉えるべきでしょう。

まとめ

本記事では、Vercel Labsが開発したagent-browserの概要、特徴的なRefシステム、インストール方法、そして他ツールとの比較について解説しました。agent-browserは、AIエージェントがWebブラウザを操作するという新しいユースケースに特化して設計されており、そのアプローチは非常に新鮮かつ実用的です。

従来の「コードを書いて操作する」方法から、「コマンドで指示する」方法へのシフトは、AIエージェントの開発効率を大幅に向上させるでしょう。特にRustによる高速なCLIと、Playwrightの安定性を組み合わせたアーキテクチャは、技術的にも非常に優秀です。

現在はまだプロジェクト初期ですが、GitHubでの人気や開発のペースを考えると、今後のAI開発エコシステムにおいて重要なツールの一つになることは間違いありません。AIエージェントの開発に興味のある方は、ぜひこの機会にagent-browserを触ってみて、その使い勝手を体験してみてください。

agent-browserは、AIとWebの距離を縮める画期的なツールです。使い勝手の良さと拡張性の高さを兼ね備えており、これからのエージェント開発の強力な味方になってくれるでしょう。ぜひ実際に手元で試してみてください。筆者は、AI×開発の実戦コミュニティをnoteで運営しています
経験豊富な"本職の開発者"が「本当に使える」AIの情報・学習環境をお届けしています
相談し放題、勉強会有、限定コード&記事あり
興味のある方は、是非以下のリンクから