Zenn
Open3

【生成AI】Browser use について

生成 AI
Browser Use
まさぴょん🐱まさぴょん🐱

Browser use について📝

Repository

https://github.com/browser-use/browser-use

browser-use とは？

https://zenn.dev/gunjo/articles/8450e69537dbb6

browser-use は、Python で作られた「AI エージェントがウェブブラウザを操作できるようにする」ためのライブラリです。
具体的には、下記のような機能を提供しています。

  1. ビジョン機能や HTML 抽出
    ブラウザで読み込んだページの DOM（要素構造）を解析、スクリーンショットやテキスト情報を取得できます。

  2. マルチタブ管理
    自動で複数タブを開き、それぞれのタブを並行して操作できます。

  3. カスタムアクション機能
    たとえば「特定のファイルを保存」「データベースへ登録」「社内チャットに通知する」など、ユーザー独自のアクションを定義できます。

  4. 自己修正機能
    操作が失敗したり、要素を見つけられなかったりした場合に、自分で修正し再試行できる仕組みがあります。

  5. LangChain と各種 LLM の互換性
    GPT-4、Claude 3.5 など、複数の大規模言語モデル（LLM）と組み合わせて使えます。

  6. 複数エージェントの並列処理
    一度に複数のエージェントを走らせて、複数のタスクを同時に実行できます。

実用例

公式のリポジトリに実装例があり、アイデアとしては以下のようなものがあります。

  • Amazon で製品を検索し価格を取得する
  • CAPTCHA を突破する
  • 予約のチェックする
  • 普段使用しているブラウザを立ち上げ、文書を自動で作成する
  • 特定のサイトにアクセスし、データを取得、結果をファイルに保存する
  • ホテル予約サイトで複数の条件でホテルを探す

browser-use の構成要素

browser-use は、以下の 4 つのコンポーネントを組み合わせて構成されています。

  1. Agent（エージェント）
    ユーザーの指示（タスク）を受け取り、大規模言語モデル（LLM）を使って「どの要素をクリックするか」「どのページへ移動するか」といった操作手順（アクション）を計画します。

  2. Controller（コントローラー）
    Agent が出力したアクションを実際に実行する部分です。クリックや URL アクセス、テキスト入力など、ブラウザ操作に必要な基本アクションがあらかじめ用意されていますが、独自のアクションを追加することも可能です。

  3. Browser（ブラウザ）
    Playwright を利用し、実際にブラウザ（Chromium など）を立ち上げて操作します。ページの遷移や要素の取得などを行い、Controller からの指示を受けて動作します。

  4. DOM（ドキュメントオブジェクトモデル）
    Web ページの構造を解析して、Agent が要素を認識しやすいように整理します。内部では buildDomTree.js を注入してクリック可能要素をハイライトし、その情報を JSON 形式で取得することで「index=2 のボタンをクリック」といった要素指定を可能にしています。
    画像のように クリック可能な要素に対して index をつけていることがわかります。