AIエージェント開発者のためのトークン節約術：Vercelが公開したagent-browserの魅力と使い方

AIエージェント開発者のためのトークン節約術：Vercelが公開したagent-browserの魅力と使い方

AIによるプログラミング支援ツールが普及する中で、AIにブラウザを操作させたい場面が増えています。しかし、従来のPlaywright MCPなどのソリューションを利用すると、膨大なDOMツリーがコンテキストを圧迫し、トークン消費が跳ね上がってしまうという課題がありました。

こうした課題を解決するためにVercel Labsが公開したのが、AIエージェント専用のブラウザ自動化ツールであるagent-browserです。本記事では、MCPと比較してなぜagent-browserが優れているのか、その理由と具体的な使い方を詳しく解説します。

従来のMCPが抱えていた課題

これまでのPlaywright MCPベースのツールは、ウェブページのアクセシビリティツリーをまるごとAIに送信する仕組みが一般的でした。しかし、複雑なウェブページではこのツリーが数千行に及ぶことも珍しくありません。

その結果、AIは「情報の海」に溺れてしまい、目的のボタンを見つけるだけでコンテキストウィンドウが満杯になり、トークンコストも激増するという「トークン不安」を引き起こしていました。また、MCPサーバーの設定が複雑で、複数のツールを使い分ける際のオーバーヘッドも大きな負担となっていました。

agent-browserがもたらす革新

agent-browserは、MCPの弱点を克服するために設計されています。最大の特徴は、コンテキストの使用量を最大93%削減できる点にあります。

この驚異的な効率化を支えているのが、Snapshot + Refsという独自の仕組みです。agent-browserはページ全体をAIに渡すのではなく、操作可能な要素だけに「@e1」「@e2」といった短い参照ID（Refs）を割り振った簡潔なスナップショットを生成します。AIはこの短いIDを指定するだけで操作ができるため、トークンを大幅に節約でき、操作の確実性も向上します。

また、アーキテクチャ面でも工夫されています。高速なRust製のCLI、ブラウザ管理を担うNode.jsデーモン、そして環境を選ばないフォールバック機構の三層構造により、パフォーマンスと安定性を両立しています。

5分でできる導入・設定チュートリアル

agent-browserの導入は非常にシンプルで、従来のMCPのような複雑な設定は不要です。

1. インストール

Node.js環境があれば、以下のコマンドでグローバルにインストールできます。 npm install -g agent-browser

2. ブラウザエンジンの準備

次に、ブラウザ本体（Chromium）をダウンロードします。 agent-browser install （Linux環境などで依存関係が必要な場合は agent-browser install --with-deps を実行してください）

3. 基本的な操作方法

インストール完了後、ターミナルからすぐにブラウザを操作できます。

• ページを開く: npx agent-browser open <URL>
• スナップショットを取得: npx agent-browser snapshot -i を実行すると、操作可能な要素がリストアップされます。
• 要素をクリック: スナップショットで確認したIDを使い、npx agent-browser click @e1 のように入力します。
• フォーム入力: npx agent-browser fill @e2 "入力したいテキスト" でテキスト入力が可能です。

3.1 可視化ウィンドウ例：Blog の最新記事を開く

可視化ブラウザで Blog に移動し、先頭の記事を開く例です。画面遷移ごとに snapshot -i で ref を更新してください。@e5/@e12 は例なので、実際のスナップショットに従ってください。 npx agent-browser --headed open https://example.com npx agent-browser eval "window.location.href='https://vibetools.net'" npx agent-browser wait 20000 npx agent-browser snapshot -i npx agent-browser click @e5 npx agent-browser wait 20000 npx agent-browser snapshot -i npx agent-browser click @e12

AIエージェントとの連携

agent-browserはCLIツールであるため、Claude Code、Cursor、Copilotなどの主要なAIツールと簡単に連携できます。

AIに対するプロンプトで「agent-browserを使ってGoogleを開き、検索を実行してください」と指示するだけで、AIは自動的に最適なコマンドを選択し、効率的にタスクを遂行します。MCPプロトコルに依存せず、標準的なBashコマンドとして実行できるため、互換性の幅が広いのも大きなメリットです。

よくあるトラブル（インストール/起動）

1. 起動エラー：chromium_headless_shell が見つからない

以下のようなエラーが出る場合:

browserType.launch: Executable doesn't exist at .../chromium_headless_shell-1200/...

Playwright のブラウザがバージョン不一致の可能性があります。以下で揃えられます: npx playwright@1.57.0 install chromium chromium-headless-shell

npx agent-browser を使う場合は、インストールと実行のバージョンを合わせてください: npx agent-browser@0.4.4 install npx agent-browser@0.4.4 open <URL>

2. --executable-path が無視される

--executable-path ignored: daemon already running が表示されたら、一度閉じて再実行します: npx agent-browser close npx agent-browser --executable-path "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" open <URL>

3. open のタイムアウト（10 秒）

open は load を最大 10 秒待ちます。重いサイトは軽いページ経由で遷移すると安定します: npx agent-browser open https://example.com npx agent-browser eval "window.location.href='https://vibetools.net'" npx agent-browser wait 20000

まとめ

Vercelのagent-browserは、これまでのMCPソリューションが抱えていた「トークン消費」と「設定の煩雑さ」という二大問題をスマートに解決しました。

ウェブサイトの情報を4Kのパノラマ写真のようにAIに見せるのが従来のMCPなら、agent-browserは必要な場所だけを記した簡潔な路線図を渡すようなものです。開発コストとトークンコストの両方を抑えたいのであれば、今すぐagent-browserを試してみることをおすすめします。