Agent Browser
agent-browser-io · コーディング
Agent Browserは、AIエージェントが人間と同じように実際のWebブラウザを動かせるようにするブラウザ自動化ツールだ。ページをコンパクトなASCIIワイヤーフレームに変換するため、モデルは生のHTMLを丸ごと解析する代わりに、リンクやボタンを番号付きのテキストとして読む。CursorやClaude DesktopといったMCPクライアントの中で使い、Vercel AI SDKでNodeアプリに組み込み、コマンドラインから試すこともできる。
Agent Browser について
Agent Browserとは
Agent Browserは、agent-browser-ioによる実験的なパッケージで、AIエージェントにWeb上の手と目を与える。静的なHTMLをスクレイピングする代わりに、エージェントはPlaywright経由で生きたブラウザを開き、ワイヤーフレームを要求する。クリックできる要素の一つひとつに番号が振られた、簡素なテキストマップだ。エージェントが番号を選ぶと、ツールが代わりにクリックし、入力し、スクロールする。
肝心なのはトークンコストだ。完全なWebページは、モデルには不要なマークアップで数千トークンを消費しかねない。それが問題なのだ。ではエージェントは実際に何を見るのか。ページ全体ではなく、短いテキストマップだ。ワイヤーフレームはそれを必要な部分だけに削り、長めのタスクでもエージェントがコンテキストウィンドウに収まるようにする。まだ初期のソフトウェアだ。プロジェクトは自ら実験的と名乗り、最後の公開はバージョン0.3.0だった。粗さは覚悟したほうがいい。
主な制約はメンテナンスと完成度にある。リポジトリは公開かつ小規模で、対象サイトがレイアウトを変えてフローを壊しても、サポート窓口はない。動かすにはNode 18以上も必要だ。趣味のプロジェクトやツール作りなら問題ない。本番なら二度考えたほうがいい。
はじめかた
- Node 18+のプロジェクトで
npm install @agent-browser-io/browserを実行してパッケージをインストールする。 - AIアシスタントから使うなら、MCPサーバーをクライアント設定に追加する。コマンドは
npx、引数は["-y", "@agent-browser-io/browser", "mcp"]で、その後クライアントを再起動する。 - navigate、clickなどの残りは動いているブラウザに依存するため、まずエージェントに
launchツールを呼ばせる。 - ワイヤーフレームを要求するとページが番号付き要素として見えるので、どの番号をクリックするか、何を入力するかをエージェントに伝える。
- コードで使うなら、
new AgentBrowser(new PlaywrightBrowserBackend())でブラウザを作り、createBrowserTools(browser)をgenerateText呼び出しに渡す。
AIツール情報
Agent Browserの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- AIエージェントを作る開発者
- CursorやClaude Desktopのユーザー
- QAや自動化の遊び好き
タスク
- ページの読み取りと要約
- フォーム入力とフローの巡回
- 多段階のリサーチ
シーン
- いくつかのサイトを走査して報告する社内リサーチボットを作る。
- Webフローを手作業でクリックせず、スクリプトからテストする。
- ヘッドレスの取得ではなく、実際のブラウザ制御が要るエージェント機能を試作する。
主な機能
トークン効率の高いワイヤーフレーム
Agent Browserはページを番号付き要素のASCIIマップとして描画する。これがトークン節約の核心だ。エージェントは [11]upvote のようなラベルを読み、DOM全体を読み込む代わりに番号を選ぶ。情報の多いページでは、これが数百トークンと数千トークンの差になり、その余裕が長いタスクを途中で糸を切らずに終わらせる。
Playwrightによる実際のブラウザ制御
このツールはPlaywright経由で実物のブラウザを動かす。テストスクリプトではなくエージェントに向けた、いわゆる古典的なPlaywrightブラウザ自動化だ。JavaScript、Cookie、生きたセッションを必要とするページで動く。人間がクリックできるものは、エージェントもクリックできる。ブラウザのふりをするヘッドレススクレイパーではない。サイトが素のリクエストを弾くとき、この違いが効いてくる。
MCP統合
パッケージには、Cursor、Claude Desktop、あるいはstdioベースの任意のMCPクライアントに投入できるMCPサーバーが付属する。設定一項目でMCPブラウザツール一式を公開し、サーバーは追加の環境変数なしでstdinとstdout越しにJSON-RPCを話す。アシスタントがすでにMCPを使っているなら、これがブラウザを与える最短ルートだ。
Vercel AI SDKのツール
コードでは、createBrowserTools(browser) がツール一式を返し、それをそのまま generateText に渡す。一式はlaunch、navigate、getWireframe、click、type、fill、dblclick、hover、press、select、check、uncheck、scroll、screenshot、closeを網羅する。MCPサーバーと一致するので、どの呼び方でも挙動は同じだ。
対話型CLI
手動テストには npx @agent-browser-io/browser、またはインストール後の agent-browser-cli バイナリでCLIを実行できる。なぜわざわざ使うのか。ワイヤーフレームが正しいか確かめる最速の方法だからだ。スクリプトに踏み切る前に、セレクタが想定どおりの位置に当たることを確認しよう。
ワイヤーフレームと並ぶスクリーンショット
実際のピクセルを見たいときは、スクリーンショットツールがページを画像として取り込む。それだけのことだ。構造はワイヤーフレームが、視覚的な細部はスクリーンショットが担うので、エージェントが読むのか見るのかで切り替えられる。
メリットとデメリット
メリット
- ワイヤーフレームがページの多いタスクでトークン消費を削り、エージェントをコンテキストウィンドウ内に保つ。
- 設定ブロック一つでCursorやClaude DesktopといったMCPクライアントと連携する。
- オープンソースで無料、コードはすべてGitHubにあり、誰でも確認したりフォークしたりできる。
- 本物のPlaywrightブラウザを動かすので、JavaScriptの多いサイトも人間に対するのと同じように振る舞う。
- 同じツール一式がMCPサーバーとコード経路の両方を動かすため、結果が一貫する。
デメリット
- 実験的と明記され、最後のリリースは0.3.0なので、APIはまだ足元で変わりうる。
- ホスト型サービスもサポートもなく、問題は自分でデバッグすることになる。
- Node 18+と多少のセットアップが要るので、非開発者にとってワンクリックのツールではない。
- レイアウトを変えるページは保存したフローを壊しうるし、手順を組み直す必要がある。
よくある質問
AIエージェントが実際のブラウザを制御し、ページを移動し、クリックし、入力し、読めるようにする。リサーチボットの構築、Webフローの自動化、MCPアシスタントへの閲覧能力の付与に使われる。
関連コンテンツ
Agent Browserに関連するツール、スキル、記事を探す。
Agent Browserの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。