Agent Browserでブラウザを操作する方法

TL;DR

Agent Browserは、URLを開き、スナップショット内の参照IDを指定してクリックや入力を行うCLIツールである。簡潔な画面情報をAIエージェントへ渡せるため、発表者は従来のMCP経由より無駄なトークンを抑えやすいと評価している。

Transcript

おすです。本日はですね、バースルから エージェントブラウザーというAI エージェントが使うAI専用のね、 ブラウザ操作ツールみたいなのが登場して ますんで、これについてお話していきたい と思います。はい。これね、なかなかいい ツールでして、え、ま、今までだったらね 、AIエージェントがブラウザーを使おう と思うとMCP経由とかでね、え、ま、 あの、プレイライトMCPであったり、 デブツールMCP、ま、あるいはCLin Chromeとかでね、え、ブラウザーを 操作しながらやってたんですけど、ま、実 はそれて、それって、ま、使ってる人やっ たらね、え、体感したことあると思うん ですけども、トークをね、非常に使うとか 、あの、その影響化効率悪いなって思う こともあったかなと思うんですけども、え 、... Read More

Key Insights

• Agent Browserは、AIエージェントがCLIコマンドを通じてWebページを開き、クリックや入力などを実行するためのブラウザ操作ツールである。
• スナップショットは、ページの構成やテキスト、操作対象を簡潔な形式で返すため、AIエージェントが次の操作を判断する材料として利用できる。
• REFシステムは、スナップショット内の要素へE69などの参照IDを割り当て、複雑なセレクターを作らずに対象を指定できる仕組みである。
• 基本操作は、URLを開いた後にスナップショットを取得し、参照IDをクリックやフォーム入力のコマンドへ渡す流れで進められる。
• 対応機能は、ページ表示、クリック、フォーム入力、キー操作、情報選択、URL取得、スクリーンショット保存など多岐にわたる。
• クッキー操作はCLIから利用できる機能の一つであり、発表者は従来利用していたMCPツールとの差として注目している。
• ネットワーク機能とデバッグ機能は、通常の閲覧操作だけでなく、Webアプリ開発時の確認や問題調査にも活用できると紹介されている。
• トークン効率の良さは発表者の使用感に基づく評価であり、動画内ではMCP方式との定量的な比較結果や測定条件までは示されていない。
• 🎬 このチャンネルの他の動画:
  • GLM Imageは低コスト画像生成に使えるか？
  • Tencent Hy4 previewの実力と弱点は？
  • Claude Fable 5を効果的に使う方法
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: Agent Browserとは何ですか？

Agent Browserは、AIエージェントがCLIからブラウザを操作するためのツールです。URLを開く、ページ構造を取得する、要素をクリックする、フォームへ入力する、スクリーンショットを保存するといった一連の操作をコマンドで実行できます。

Q: Agent BrowserでWebページを操作する方法は？

最初に対象URLを開き、ページのスナップショットを取得して、操作したい要素の参照IDを確認します。続いて、そのIDをクリックや入力のコマンドへ指定します。ページが移動した後は再びスナップショットを取得し、同じ流れで操作を継続します。

Q: Agent BrowserのREFシステムとは何ですか？

REFシステムは、スナップショット内のページ要素へE69などの参照IDを割り当てる仕組みです。AIエージェントはCSSなどの複雑なセレクターを用意せず、そのIDをコマンドに渡してクリック対象などを指定できるため、操作手順を簡潔に記述できます。

Q: Agent Browserでスナップショットを使う方法は？

ページを開いた後にスナップショットを実行すると、画面の構成、テキスト、操作可能な要素が簡潔な形式で返されます。そこに表示された参照IDから目的の要素を選び、クリックや入力を実行します。画面遷移後には新しいスナップショットを取得します。

Q: Agent BrowserはMCP方式と何が違いますか？

動画で強調されている違いは、CLIから直接操作でき、AIエージェントへ返すページ情報が簡潔である点です。発表者はPlaywright MCPやDevTools MCPより無駄なトークンを抑えやすいと評価していますが、定量的な比較値や共通条件による検証結果は示されていません。

Q: Agent Browserではどのような操作ができますか？

ページを開く、スナップショットを取得する、要素をクリックする、フォームへ入力する、キーを押す、情報を選択する、URLを取得する、スクリーンショットを保存するといった操作が紹介されています。さらにクッキー、ネットワーク、デバッグ関連の機能も利用できます。

Q: Agent BrowserをWebアプリ開発で使う方法は？

AIエージェントにWebアプリを開かせ、スナップショットやスクリーンショットを取得させながら画面を確認させます。発表者は実際に、Agent Browserで複数の画面を確認させながら画面制作を進め、使用感が良かったと述べています。ネットワークやデバッグ機能も確認作業に利用できます。

Q: Agent Browserの操作をスキル化する方法は？

頻繁に行うブラウザ操作に必要なCLIコマンドを組み合わせ、AIエージェントが再利用できる手順として定義します。公式側にもスキルの例が用意されていると紹介されており、それを参考に、自分のサイト確認や画面制作に合う操作手順を組み立てる方法が提案されています。

Summary & Key Takeaways

• Agent Browserは、AIエージェントによるブラウザ操作をCLIから実行するためのツールである。ページを開く、構造をスナップショットとして取得する、要素をクリックする、フォームへ入力する、スクリーンショットを保存するといった基本操作に対応している。

• 操作の中心となるのがREFシステムである。スナップショットにはページ内の要素が簡潔な形式で表示され、各要素にE69などの参照IDが付く。AIエージェントは複雑なセレクターを組み立てず、このIDをクリックなどのコマンドへ渡して操作を続けられる。

• 発表者は、Playwright MCPやDevTools MCPなどと比べて、返される情報が単純で無駄なトークンを抑えやすい点を評価している。さらにクッキー、ネットワーク、デバッグ関連の機能もあり、Webアプリ開発や画面確認の手順をスキル化する用途に適すると述べている。