browser-useの基礎理解
はじめに
最近話題になっている browser-use について自己理解のために基本的なところをまとめてみます。
公式リポジトリはこちら
browser-use とは？
browser-use は、Python で作られた「AI エージェントがウェブブラウザを操作できるようにする」ためのライブラリです。具体的には、下記のような機能を提供しています。
-
ビジョン機能や HTML 抽出
ブラウザで読み込んだページの DOM（要素構造）を解析、スクリーンショットやテキスト情報を取得できます。 -
マルチタブ管理
自動で複数タブを開き、それぞれのタブを並行して操作できます。 -
カスタムアクション機能
たとえば「特定のファイルを保存」「データベースへ登録」「社内チャットに通知する」など、ユーザー独自のアクションを定義できます。 -
自己修正機能
操作が失敗したり、要素を見つけられなかったりした場合に、自分で修正し再試行できる仕組みがあります。 -
LangChain と各種 LLM の互換性
GPT-4、Claude 3.5 など、複数の大規模言語モデル（LLM）と組み合わせて使えます。 -
複数エージェントの並列処理
一度に複数のエージェントを走らせて、複数のタスクを同時に実行できます。
実際の使い方
- インストール
pip install browser-use
playwright install
- Python は 3.11 以上が必要です。
- API キーの設定
.env ファイルを作成し、OpenAI や Anthropic の API キーを設定します。
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
- 基本的な実行例
from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio
async def main():
agent = Agent(
task="Googleで最新の天気予報を調べてください",
llm=ChatOpenAI(model="gpt-4o"),
)
result = await agent.run()
print(result)
asyncio.run(main())
-
taskにやりたいことを日本語で書けば、AI エージェントが自動的にブラウザ操作を考えます。
処理の流れ
ユーザーからの入力に対して、Agentがタスクが完了するまでステップ毎にControllerに指示を出していきます。
browser-use は、以下の 4 つのコンポーネントを組み合わせて構成されています。
-
Agent（エージェント）
ユーザーの指示（タスク）を受け取り、大規模言語モデル（LLM）を使って「どの要素をクリックするか」「どのページへ移動するか」といった操作手順（アクション）を計画します。 -
Controller（コントローラー）
Agent が出力したアクションを実際に実行する部分です。クリックや URL アクセス、テキスト入力など、ブラウザ操作に必要な基本アクションがあらかじめ用意されていますが、独自のアクションを追加することも可能です。 -
Browser（ブラウザ）
Playwrightを利用し、実際にブラウザ（Chromium など）を立ち上げて操作します。ページの遷移や要素の取得などを行い、Controller からの指示を受けて動作します。 -
DOM（ドキュメントオブジェクトモデル）
Web ページの構造を解析して、Agentが要素を認識しやすいように整理します。内部ではbuildDomTree.jsを注入してクリック可能要素をハイライトし、その情報を JSON 形式で取得することで「index=2 のボタンをクリック」といった要素指定を可能にしています。
画像のように クリック可能な要素に対して index をつけていることがわかります。
実用例
公式のリポジトリに実装例があり、アイデアとしては以下のようなものがあります。
- Amazon で製品を検索し価格を取得する
- CAPTCHA を突破する
- 予約のチェックする
- 普段使用しているブラウザを立ち上げ、文書を自動で作成する
- 特定のサイトにアクセスし、データを取得、結果をファイルに保存する
- ホテル予約サイトで複数の条件でホテルを探す
実際の使い方などは以下の記事にまとめてあります。
さいごに
エージェントがブラウザを制度高く自動操作してくれるとなると色々活用の幅が広がりそうです。
うまく活用すれば自前で Google の Deep Research を作ることもできそうです。
Discussion