AIブラウザ操作、どれが正解？ Agent-browserについて

こんにちは！kozokaAIの山下です。 「AIにWebブラウジングをさせて、特定のタスクを自動化したい」というニーズは爆発的に増えていますが、既存のツールだと「HTMLが複雑すぎてAIが迷子になる」「セレクタが不安定」といった課題にぶつかることがよくあります。

そんな中、Next.jsなどでおなじみの Vercel が、AIエージェントのために特化したブラウザ自動化ツール 「agent-browser」 を開発しました。

今回は、この agent-browser の特徴と使い方、そして Playwright や Claude in Chrome といった他のアプローチと何が違うのかを徹底比較します。

agent-browser とは？

一言で言うと、「AIエージェントがコマンドラインからサクサク操作できる、軽量なヘッドレスブラウザ」 です。

通常、ブラウザ自動化といえば Python や JavaScript のコードをガッツリ書くイメージがありますが、agent-browser は CLI（コマンドラインツール） として提供されています。

アーキテクチャの妙

このツールの面白いところは、中身が 「Rust製の高速CLI」 と 「Node.js（Playwright）デーモン」 のハイブリッドになっている点です。

1. ユーザー（またはAI）がCLIコマンドを打つ。

2. Rust製のCLIがそれを高速にパース。

3. 常駐しているNode.jsデーモン（Playwright）に命令を投げて実行。

この「クライアント-デーモン型」の構成によって、コマンドを打つたびにブラウザを起動し直す必要がなく、セッションを維持したままサクサク動かすことができます。

最大の特徴：AIのための「Snapshot」と「Ref」

agent-browser が他のツールと決定的に違うのは、「AIにどうWebページを見せるか」 というアプローチです。

通常のWebページのHTMLは膨大で、AI（LLM）にそのまま読ませるとトークン数を浪費したり、構造を理解できずにハルシネーション（幻覚）を起こしたりします。

そこで登場するのが snapshot コマンドです。

1. アクセシビリティツリーの取得

agent-browser snapshot を実行すると、生のDOMではなく、意味のある要素だけを抽出した「アクセシビリティツリー」を取得します。これにより、AIにとってノイズが劇的に減ります。

2. ユニークな「Ref（参照ID）」の付与

これが天才的なのですが、スナップショット取得時に、操作可能な要素に対して @e1、@e2 といった一意なID（Ref）を自動で振ってくれます。

AIエージェントはこのRefを使って、以下のように直感的に命令できます。

• 「button.login-btn をクリック」ではなく 「click @e2」

• 「input[name='email'] に入力」ではなく 「fill @e3 "test@example.com"」

これにより、DOM構造が多少変わってもAIが迷わず、決定的かつ高速に操作できる ようになります。まさに「AIファースト」な設計ですね。

使い方：人間もAIも使いやすい

インストールは npm 一発です。

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

基本的なワークフロー

人間がテストで使う場合も、AIが操作する場合も、流れはシンプルです。

1. ページを開く: agent-browser open example.com

2. 状況把握: agent-browser snapshot（ここで @e1, @e2... が表示される）

3. 操作: agent-browser click @e2

AIエージェントに組み込む場合（JSONモード）

AIエージェントから利用する場合は、--json フラグを使います。

agent-browser snapshot --json

こうすると機械可読なJSON形式でツリーとRefが返ってくるので、自作のPythonスクリプトやLangChainなどのエージェントから非常にパースしやすくなります。

徹底比較：他のツールと何が違うの？

ここが本記事のハイライトです。「Playwrightでいいのでは？」「Claudeの拡張機能と何が違うの？」という疑問に答えます。

1. vs Playwright (Raw HTML Approach)

「5万トークン」 vs 「1,000トークン」

Playwrightを使ってAIに「現在のページ」を渡そうとすると、通常は page.content() で取得した生のHTMLを渡すことになります。しかし、これには決定的なコスト差があります。

| 項目             | Playwright (Raw HTML)              | agent-browser (Snapshot)           |
|------------------|------------------------------------|------------------------------------|
| 入力データ       | 生のHTMLソース全文                 | アクセシビリティツリー (JSON)     |
| トークン数目安   | 約 50,000 〜 100,000 tokens        | 約 500 〜 2,000 tokens             |
| コスト (GPT-4o)  | 1リクエスト 約15〜30円            | 1リクエスト 約0.3〜0.6円          |
| AIの処理速度     | 遅い（大量のテキスト読解が必要）   | 爆速（必要な情報のみ）            |

結論: Amazonのような複雑なECサイトのTOPページをHTMLのまま渡すと、一瞬でコンテキストウィンドウを圧迫し、コストも跳ね上がります。agent-browser は情報を「操作に必要な要素」だけに圧縮（Snapshot）するため、トークン消費量を95%以上削減でき、現実的なコストで運用可能です。

2. vs Claude in Chrome (Browser Extension Agent)

「隣の秘書」か「裏方のロボット」か

最近登場した「Claude in Chrome」（Chrome拡張機能として動作するAIエージェント）との比較は、「誰のブラウザで動くか」という視点で考えると分かりやすいです。

| 特徴           | Claude in Chrome (Extension)        | agent-browser (Headless CLI)        |
|----------------|-------------------------------------|--------------------------------------|
| 実行場所       | ユーザーのブラウザ（GUI）           | サーバー / CLI（Headless）          |
| 主な用途       | ユーザーの作業補助、調査、要約       | 大量処理、E2Eテスト、定期実行       |
| セッション     | ユーザーのログイン状態を共有         | 独立したクリーンなセッション        |
| スケーラビリティ | 1人1ブラウザまで                   | サーバーで100並列も可能             |

役割

Co-pilot (副操縦士)

Worker (作業員)

結論: 「今見ているページを要約して」「このフォーム入力を手伝って」という対話的なアシスタント用途なら、Claude in Chrome が最強です。 一方で、「毎朝100サイトを巡回して価格をチェックする」「CI/CDパイプラインの中でE2Eテストを行う」といった完全自動化・バックグラウンド処理には、軽量で並列実行しやすい agent-browser が圧倒的に向いています。

3. vs Browser-Use (Python Library)

「Python密結合」か「言語非依存CLI」か

人気のPythonライブラリ browser-use との比較です。

| 特徴   | Browser-Use                          | agent-browser                                  |
|--------|--------------------------------------|------------------------------------------------|
| 形態   | Pythonライブラリ                     | CLI実行バイナリ                                |
| 柔軟性 | Python環境内での制御に特化           | 言語非依存 (Node, Go, Shell から呼べる)       |
| AI連携 | LangChain 等とシームレスに統合       | JSON 入出力を通じて疎結合に連携              |

結論: PythonでガッツリAIアプリを作るなら browser-use も素晴らしい選択肢ですが、agent-browser は CLIツールとして独立している ため、Claude Codeのような「コーディングエージェント」に道具として渡したり、シェルスクリプトに組み込んだりと、ツールの「部品」としての使い勝手が良いのが特徴です。

まとめ

Vercelの agent-browser は、単なる自動化ツールではなく、「LLMとWebブラウザの間の通訳」 です。

• 生HTMLより95%以上トークンを節約（対 Playwright）

• サーバーサイドでの大量自動化に最適（対 Claude in Chrome）

• CLIだからどんな環境・言語のエージェントにも組み込める

「AIエージェントにWeb操作をさせたいけど、コストや速度が心配…」と悩んでいるなら、agent-browser は間違いなく試すべき解決策です。

FAX受注業務入力にお悩みの方は、お気軽にご相談ください。

「FAXを受信したら”自動で”データ入力が完了したらいいのに・・。」と感じたことはありませんか？kozokaAIでは、FAXはそのままに業務を効率化する「kozokaAI FAX受注入力」をご用意しています。最新のAI技術で皆様の業務負荷軽減のための新たな選択肢をご提供いたします。

• 詳しくはこちら → 『公式サイトを見る 』

• ウェイティングリストはこちら → 『ウェイティングリストに登録する』

▼ kozokaAI公式note

▼ kozokaAI エンジニアチームによる技術ブログ

▼ kozokaAI エンジニアチームによるAI NEWS