AI

【AIエージェント】brower-useを使ったウェブブラウザ操作

フリーランスエンジニアのまさです。

この記事では、brower-useを使用したウェブブラウザ操作を見ていこうと思います。
基本的なセットアップから活用方法などを説明していきます。

では、早速見ていきましょう。

brower-useの概要

Browser Useは、AIエージェントがウェブブラウザを自動操作できるようにするPython製のライブラリになります。

公式リポジトリはこちら

2024年に、マグナス・ミュラーとグレゴール・ズニックによって開発された、オープンソースのプロジェクトになります。

brower-useの主な特徴

Browser Useには以下のような機能と仕組みで構成されています。
またセキュリティ上の懸念もいくつかあるため記載しておきます。

機能

Browser Useには以下のような機能があります。

  1. ウェブ要素の抽出
    ボタン、リンク、フォームなどの要素を自動認識し操作します。

  2. 視覚情報とHTML構造の統合
    ウェブページの視覚情報とHTML構造を同時に処理し、複雑な操作も正確に実行します。

  3. 自動マルチタブ管理
    複数のタブを同時に開き並行して操作できます

  4. カスタムアクション
    ファイル保存、データベース操作、通知送信など、ユーザー独自のアクションを定義可能です。

  5. 自己修正機能
    操作失敗時や要素未検出時に、自動で修正し再試行します。

  6. 複数エージェントの並列処理
    複数のエージェントを同時に実行し、効率的なタスク処理が可能です。

仕組み

Browser Useは以下の4つのコンポーネントで構成されています

  1. Agent (エージェント)
    ユーザーの指示を受け取り、LLMを使用して操作手順を計画します。

  2. Controller (コントローラー)
    Agentが出力したアクションを実際に実行します。

  3. Browser (ブラウザ)
    Playwright※を利用して実際のブラウザを操作します。

  4. DOM (ドキュメントオブジェクトモデル)
    ウェブページの構造を解析し、Agentが要素を認識しやすいように整理します。


    ※Playwrightは、マイクロソフトが開発したオープンソースのテストフレームワークで動的なwebアプリケーションやシングルページアプリケーションのテストや自動化に適しています。

セキュリティ上の懸念点

セキュリティ上の懸念としては以下があります。

  1. ローカル環境での動作によるリスク
    Browser Useはユーザーのローカル環境で動作するため、マルウェアのリスクや情報流出の可能性があります。

  2. AIによる自動操作
    AIエージェントがブラウザを自動操作するため、意図しない操作や悪意のあるウェブサイトへのアクセスが発生する可能性があります。

  3. 拡張機能のリスク
    Browser Useは拡張機能を利用しますが、悪意のある拡張機能が勝手にインストールされるリスクがあります。

AIエージェントがブラウザを勝手に操作することになるため、セキュリティ面ではある程度の注意が必要そうです。

brower-useの使い方

では、早速環境をセットアップしてbrower-useを使用してみましょう。

python環境は、3.11以上のバージョンが必要になるため注意してください。

pip install browser-use
playwright install

.envファイルを作成し、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())

実行すると以下の順で操作を行い結果を出力してくれました。

  1. Chromeブラウザを立ち上げGoogleへアクセス
  2. 「京都 天気 本日」で検索
  3. 検索結果を表示
  4. 結果を出力

今日の京都の天気は晴れ、気温は7℃です。降水確率は 30%、湿度は 75%、風速は 1 m/s です。

brower-useを使ったデータ出力

次に、pydanticを使用して、指定の型で情報を取得し、データをテキストに出力するコードを作成しました。
以下は、株価のデータを取得するようなコードを作成して検証しています。

from langchain_openai import ChatOpenAI
from browser_use import Agent
from browser_use.controller.service import Controller
from pydantic import BaseModel
from typing import List
import asyncio

# データの保存用モデル
class StockResult(BaseModel):
    名称: str
    コード: str
    市場: str
    取引値: str
    前日比: str
    出来高: str

class StockResults(BaseModel):
    results: List[StockResult]

# Controllerをインスタンス化
controller = Controller()

# カスタムアクションを定義
@controller.action('Save Stock Data', param_model=StockResults)
def save_stock_data(params: StockResults):
    with open('stock_results.txt', 'w', encoding='utf-8') as f:
        for result in params.results:
            f.write(
                f"名称: {result.名称}, コード: {result.コード}, 市場: {result.市場}, "
                f"取引値: {result.取引値}, 前日比: {result.前日比}, 出来高: {result.出来高}\n"
            )
    print(f"{len(params.results)}件の結果が 'stock_results.txt' に保存されました。")

# 非同期のメイン関数
async def main():
    agent = Agent(
        task="""あなたは株価チェックエージェントです。
                与えられたURLには「ランキング(値上がり率)」の情報があります。
                すべてのデータを収集し、以下の条件に合致する会社をリストアップしてください。

                url: https://finance.yahoo.co.jp/stocks/ranking/up

                ### 条件
                - 前日比+20%以上

                ### タスク
                1. ページ内に表示されているすべての企業のデータを取得してください。
                2. 必要に応じてスクロールして、すべてのデータを収集してください。
                3. 条件を満たす会社をリストアップしてください。

                ### 出力形式
                - 名称
                - コード
                - 市場
                - 取引値
                - 前日比(%)
                - 出来高

                リストが複数件存在する場合は、すべての条件に一致する結果を出力してください。
                """,
        llm=ChatOpenAI(model="gpt-4o"),
        controller=controller,
    )
    # エージェントの実行
    result = await agent.run()
    print("タスク完了:", result)

# 実行
asyncio.run(main())

コードについて一部解説します。

データモデルの定義

class StockResult(BaseModel):
    名称: str
    コード: str
    市場: str
    取引値: str
    前日比: str
    出来高: str

class StockResults(BaseModel):
    results: List[StockResult]

まずデータモデルを定義しています。

StockResult:
株式データを保存するためのモデルです。
各属性(名称, コード, 市場, 取引値, 前日比, 出来高)は文字列型で定義しています。

StockResults:
一度に複数の株式データを扱うためのモデルになります。

コントローラーの設定とカスタムアクション

controller = Controller()

@controller.action('Save Stock Data', param_model=StockResults)
def save_stock_data(params: StockResults):
    with open('stock_results.txt', 'w', encoding='utf-8') as f:
        for result in params.results:
            f.write(
                f"名称: {result.名称}, コード: {result.コード}, 市場: {result.市場}, "
                f"取引値: {result.取引値}, 前日比: {result.前日比}, 出来高: {result.出来高}\n"
            )
    print(f"{len(params.results)}件の結果が 'stock_results.txt' に保存されました。")

@controller.action:
'Save Stock Data'というアクション名でカスタム機能を登録しています。
入力データの形式はStockResultsモデルに基づきます。

save_stock_data関数:
取得した株式データをstock_results.txtというファイルに保存します。
保存時には、各データ項目を読みやすい形式でテキストファイルに書き込みます。

エージェントのタスク設定

async def main():
    agent = Agent(
        task="""あなたは株価チェックエージェントです。
                与えられたURLには「ランキング(値上がり率)」の情報があります。
                ・・・・
                """,
        llm=ChatOpenAI(model="gpt-4o"),
        controller=controller,
    )
    # エージェントの実行
    result = await agent.run()
    print("タスク完了:", result)

task:
エージェントが実行する具体的な指示をここに記載しています。
今回は、Yahooファイナンスの「ランキング(値上がり率)」ページから条件(前日比+20%以上)を満たす企業のデータを収集するというタスクを記載しています。

このコードを実行すると、stock_results.txtというテキストファイルが作成され、以下のようにデータを出力することができます。

名称: 京極運輸商事(株), コード: 9073, 市場: 東証STD, 取引値: 1,599, 前日比: +58.32%, 出来高: 1,644,000株
名称: (株)BlueMeme, コード: 4069, 市場: 東証GRT, 取引値: 1,337, 前日比: +28.93%, 出来高: 93,500株
名称: (株)Eストアー, コード: 4304, 市場: 東証STD, 取引値: 1,904, 前日比: +26.60%, 出来高: 28,500株
名称: (株)visumo, コード: 303A, 市場: 東証GRT, 取引値: 2,036, 前日比: +24.45%, 出来高: 2,253,900株
名称: (株)デ・ウエスタン・セラピテクス研究所, コード: 4576, 市場: 東証GRT, 取引値: 201, 前日比: +23.31%, 出来高: 15,842,100株
名称: ブランディングテクノロジー(株), コード: 7067, 市場: 東証GRT, 取引値: 1,638, 前日比: +22.42%, 出来高: 83,000株
名称: (株)Veritas In Silico, コード: 130A, 市場: 東証GRT, 取引値: 882, 前日比: +20.49%, 出来高: 583,700株

サイトを指定することで、必要な情報を簡単に的確に取得することができます。
そのため、これまでスクレイピングなどをプログラムで行っていた方は、今後このツールを利用することで効率的に情報を取得することができるようになると考えます。

実用例

brower-useを使用した実用例をいくつか挙げてみました。
まだ、公開されたばかりですので、今後も様々な使い方が検証されていくと思われます。

  • データ収集と市場調査
    競合他社の価格情報や製品詳細を自動的に収集し、市場動向を効率的に分析できそうです。
    競合他社の商品価格や在庫状況を定期的にモニタリングし、自社の価格戦略に反映させることが考えられます。

  • マーケティング活動の効率化
    ソーシャルメディアの投稿管理や広告キャンペーンの自動最適化を行うことができそうです。
    複数のソーシャルメディアプラットフォームに同時に投稿したり、広告のパフォーマンスデータを自動収集して分析レポートを作成したりすることが考えられます。

  • 在庫管理と供給チェーンの最適化
    小売業や製造業で、複数のサプライヤーの在庫状況や価格を自動的にチェックし、最適な発注タイミングや数量を決定するのに役立てることができそうです。

まとめ

今回は、ウェブブラウザ操作を自動で行うbrower-useを使用しました。
調べた感じだと、まだログイン等はうまくできないようで実運用などですぐに使用するのは難しい印象を受けましたが、簡単なWeb上でのデータ収集/データまとめであれば、brower-useで簡単にできてしまうという印象でした。

OpenAIも1月中に「Operator」というAIエージェントを発表予定であり、今後も、AIエージェント関連の話題をキャッチアップしていこうと思います。