Browser Use徹底ガイド: AIエージェントで効率的にWebサイト操作を実現

こんにちは、スクーティー代表のかけやと申します。
​
弊社は生成AIを強みとするベトナムオフショア開発・ラボ型開発や、生成AIコンサルティングなどのサービスを提供しており、最近はありがたいことに生成AIと連携したシステム開発のご依頼を数多く頂いています。

「Browser Use」を聞いたことはあるけれど、具体的にどのようなものかイメージしづらいと感じていませんか？AIエージェントを活用してWebサイトを自在に操作できるというのは本当でしょうか？

実際、Browser UseはAIエージェントを用いてWebサイトを操作する革新的なツールであり、複雑なWebサイトの操作の自動化やデータ収集の効率化など、多岐にわたる可能性を秘めています。

この記事では、Browser Useの基本的な使い方からその特徴、さらには具体的な活用事例まで詳しく解説します。Browser Useをしっかりと理解し、AIエージェントによるWebサイト操作の可能性を最大限に引き出す方法を学びましょう！

Browser Useとは

まず生成AI導入について知りたいという方は、ぜひこちらの記事を先にご覧ください。
関連記事：【AIがブラウザを操作】Browser Use の Web UI を使ってみる　〜結局あきらめたDockerでの構築の作業履歴を添えて〜

Browser Useの概要

Browser Useは、AIエージェントを活用してWebサイトを操作するためのオープンソースのPythonライブラリです。LangChainとの連携により、さまざまなLLM（大規模言語モデル）と組み合わせて動作します。この連携により、ユーザーは高度な自然言語処理能力を持つエージェントを通じて、Webサイト上での複雑な操作を自動化することが可能となります。

これにより、従来の手動操作では難しかったタスクも、効率的に実行できるようになります。さらに、Browser Useはオープンソースであるため、開発者は自由にカスタマイズや拡張が可能です。これにより、特定のニーズに応じたソリューションを構築することができます。

Browser Useの目的

Browser Useの主な目的は、WebサイトをAIエージェントにとってよりアクセスしやすくすることです。従来のWebスクレイピングツールとは異なり、Browser UseはAIエージェントが人間のようにWebサイトの構造や内容を理解し、必要に応じて操作を行うことを可能にします。これにより、データ収集や情報整理といった作業が大幅に効率化されます。特に、動的なWebページや複雑なレイアウトを持つサイトでの操作が容易になります。

さらに、AIエージェントがWebサイトの内容を深く理解することで、より正確なデータ抽出や情報の整理が可能となり、業務の効率化に大きく貢献します。これにより、企業はより迅速に市場の変化に対応することができ、競争力を高めることができます。

Browser Useの始め方

インストール

Browser Useは、pipを使って簡単にインストールすることができます。以下のコマンドを実行してください。

```
pip install browser-use
```

必要に応じて、Playwrightもインストールします。

```
playwright install
```

この手順により、Browser Useの基本的な環境が整います。インストールが完了したら、次のステップに進む準備が整います。これにより、ユーザーはすぐにBrowser Useを試すことができ、実際のプロジェクトに適用することが可能です。

APIキーの設定

次に、.envファイルにOpenAIやAnthropicなどのAPIキーを設定します。以下のように記述してください。

```
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
```

これにより、Browser Useが適切なLLMと連携できるようになります。APIキーの設定は、エージェントが正確に動作するために不可欠です。APIキーを設定することで、エージェントは外部のAIサービスと通信し、必要なデータを取得することができます。これにより、エージェントの性能が最大限に引き出され、より高度なタスクを実行することが可能となります。

基本的な使い方

Browser Useのエージェントは、特定のタスクと使用するLLMを指定して実行します。以下はその基本的な使用方法の一例です。

```python
from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

async def main():
agent = Agent(
task="Find a one-way flight from Bali to Oman on 12 January 2025 on Google Flights. Return me the cheapest option.",
llm=ChatOpenAI(model="gpt-4o"),
)
result = await agent.run()
print(result)

asyncio.run(main())
```

このスクリプトは、Google Flights上で指定された条件のフライトを検索し、最も安価なオプションを返します。これにより、手動での検索作業を省略できます。さらに、この方法を応用することで、さまざまなWebサイトでの情報収集や操作を自動化することが可能です。これにより、業務の効率化が図られ、時間の節約につながります。

Browser Useの特徴

視覚情報とHTMLの抽出

Browser Useは、Webページの視覚情報とHTML構造を抽出し、AIエージェントに提供します。これにより、エージェントはWebページのコンテンツを深く理解し、適切な操作を判断することができます。視覚情報の提供は、特に動的なコンテンツや複雑なレイアウトを持つページにおいて有効です。

これにより、エージェントはより人間に近い形でWebページを操作できます。さらに、視覚情報を活用することで、エージェントはユーザーインターフェースの変化にも柔軟に対応することが可能です。これにより、Webサイトの更新や変更にも迅速に対応でき、常に最新の情報を取得することができます。

自動マルチタブ管理

Browser Useは、複数のタブを自動的に管理します。エージェントはタスクに応じて新しいタブを開いたり、既存のタブを切り替えたりすることができます。これにより、複数の作業を同時に進行させることが可能となり、効率的な作業環境を構築できます。特に、複数の情報源からデータを収集する際に便利です。

さらに、タブ管理機能を活用することで、エージェントは異なるWebサイト間でのデータの比較や統合を容易に行うことができます。これにより、より包括的なデータ分析が可能となり、意思決定の質が向上します。

クリック要素のXPath取得

Browser Useは、エージェントがクリックした要素のXPathを取得し、その情報を再利用することができます。この機能により、エージェントは同じ操作を繰り返し行う際に正確な位置を特定し、誤操作を防ぐことができます。これにより、操作の一貫性が保たれ、効率的なタスク実行が可能となります。さらに、XPathの取得と再利用により、エージェントは複雑なWebページ上での操作を正確に再現することができます。これにより、テストやデバッグの際に非常に役立ちます。

カスタムアクションの追加

Browser Useでは、カスタムアクションを定義することが可能です。たとえば、ファイルの保存、データベースへのデータプッシュ、通知の送信、人間からの入力取得など、さまざまなアクションをエージェントに実行させることができます。

これにより、特定のニーズに応じた柔軟な操作が実現できます。ユーザーは自分のワークフローに合わせてエージェントをカスタマイズできます。さらに、カスタムアクションを活用することで、エージェントは特定の業務プロセスに特化した機能を持つことができ、業務の自動化をさらに推進することが可能です。

自己修正機能

Browser Useのエージェントは、操作中にエラーが発生した場合に自己修正を試みます。例えば、クリックできない要素が見つかった場合には別の要素をクリックしたり、ページをリロードしたりすることで、問題を解決しタスクを続行します。この自己修正機能により、エージェントの信頼性が向上します。

これにより、エージェントはより安定してタスクを完了できます。さらに、エージェントはエラーの原因を分析し、次回の操作に活かすことで、より効率的なタスク遂行を目指します。これにより、エージェントは継続的に学習し、改善を続けることができます。

LangChainとの連携

Browser UseはLangChainと連携して動作するため、LangChainがサポートするさまざまなLLMを利用することができます。具体的には、gpt-4o、gpt-4o mini、claude 3.5 sonnet、llama 3.1 405b など、多様なLLMを選択して組み合わせることが可能です。

この柔軟性により、ユーザーは最適なモデルを選択し、用途に応じたカスタマイズが可能となります。これにより、エージェントの性能を最大限に引き出すことができます。さらに、LangChainとの連携により、エージェントは最新のAI技術を活用し、より高度なタスクを実行することが可能です。

エージェントの並列化

Browser Useでは、複数のエージェントを並列して実行することができます。これにより、複数のタスクを同時に処理したり、大量のデータを効率的に収集したりすることが可能です。エージェントごとに独自のコンテキストを持つため、各エージェントが独立して動作し、相互の干渉を防ぎます。

これにより、作業の効率が大幅に向上します。さらに、並列化により、エージェントは大規模なデータセットを迅速に処理することができ、リアルタイムでのデータ分析や意思決定をサポートします。

Browser Useの活用事例

Google Docsでの文書作成

Browser Useのエージェントは、Google Docsでの文書作成を自動化することができます。例えば、「パパへの感謝の手紙をGoogle Docsで作成し、PDFとして保存する」といったタスクを実行することが可能です。

この機能を利用することで、手間のかかる文書作成作業が自動化され、大幅な時間の節約が可能です。特に、定型文書の作成において効果を発揮します。さらに、エージェントは文書のフォーマットやスタイルを自動的に調整することができ、プロフェッショナルな仕上がりを実現します。

求人情報の検索と応募

Browser Useのエージェントは、求人情報の検索から応募までを自動化することができます。具体的には、「私の履歴書を読み込み、機械学習の求人を探し、ファイルに保存し、新しいタブで応募を開始する。助けが必要な場合は、私に尋ねてください。」といったタスクを実行します。

これにより、求職活動が効率化され、迅速に応募を進めることができます。特に、複数の求人に対する一括応募が可能です。さらに、エージェントは応募プロセスの進捗を追跡し、必要に応じてユーザーに通知を送信することができます。これにより、求職者は常に最新の情報を把握し、適切なタイミングでのアクションが可能となります。

フライトの検索

Browser Useのエージェントは、フライトの検索も自動で行います。例えば、「kayak.comで、2024年12月25日から2025年2月2日までのチューリッヒ発北京行きのフライトを探してください。」という指示に基づき、最適なフライトオプションを見つけ出します。

この機能を利用することで、旅行の計画が迅速かつ効率的に行えます。特に、複数の航空会社のオプションを比較する際に便利です。さらに、エージェントはフライトの価格変動を監視し、最適な購入タイミングをユーザーに通知することができます。これにより、旅行者は最もお得な条件でフライトを予約することが可能です。

Hugging Faceでのモデル検索

Browser Useのエージェントは、Hugging Face上でのモデル検索も自動化します。具体的には、「Hugging Faceで、cc-by-sa-4.0のライセンスを持つモデルを検索し、『いいね』の多い順に並べ替え、上位5つをファイルに保存する」といったタスクを実行します。これにより、必要なモデルを効率的に見つけ出し、整理することができます。

特に、研究や開発において必要なモデルを迅速に特定するのに役立ちます。さらに、エージェントはモデルの更新情報を定期的にチェックし、ユーザーに最新の情報を提供することができます。これにより、常に最適なモデルを利用することが可能となります。

Browser Useのカスタマイズ

カスタムアクションの登録

Browser Useでは、同期関数と非同期関数の両方を使用してカスタムアクションを登録することが可能です。これにより、ユーザーの特定のニーズに合わせた機能を追加できます。

• Controllerクラスを使った登録

Controllerクラスを利用してカスタムアクションを登録する方法です。

```python
from browser_use.agent.service import Agent
from browser_use.browser.service import Browser
from browser_use.controller.service import Controller

• Controllerを初期化

controller = Controller()

@controller.action('Ask user for information')
def ask_human(question: str, display_question: bool) -> str:
return input(f'\n{question}\nInput: ')
```

この例では、ユーザーに情報を尋ねるカスタムアクションを定義しています。これにより、エージェントが動的にユーザーからの入力を取得できます。さらに、この方法を応用することで、エージェントはユーザーのフィードバックをリアルタイムで反映し、より柔軟な操作を実現することが可能です。

• Pydanticを使ったパラメータ定義

Pydanticを使用してカスタムアクションのパラメータを定義することもできます。

```python
from pydantic import BaseModel
from typing import Optional

class JobDetails(BaseModel):
title: str
company: str
job_link: str
salary: Optional[str] = None

@controller.action('Save job details which you found on page', param_model=JobDetails, requires_browser=True)
async def save_job(params: JobDetails, browser: Browser):
print(params)

• ブラウザを通常通り使用

page = browser.get_current_page()
page.go_to(params.job_link)
```

このスクリプトでは、求人情報の詳細を保存するカスタムアクションを定義しています。これにより、特定のデータを効率的に収集できます。さらに、Pydanticを活用することで、データのバリデーションや変換を自動化し、より信頼性の高いデータ処理が可能となります。

エージェントの実行

カスタムアクションを登録した後、エージェントを実行します。

```python
from langchain_openai import ChatAnthropic

model = ChatAnthropic(model_name='claude-3-5-sonnet-20240620', timeout=25, stop=None, temperature=0.3)
agent = Agent(task=task, llm=model, controller=controller)

await agent.run()
```

この例では、カスタムアクションを含むエージェントを実行しています。これにより、ユーザーの特定のニーズに応じたタスクを実行できます。さらに、エージェントの実行中にリアルタイムでのフィードバックを受け取り、タスクの進行状況を監視することが可能です。これにより、エージェントのパフォーマンスを最適化し、より効果的なタスク遂行が実現します。

エージェントの並列化

Browser Useでは、1つのブラウザインスタンスを使用して複数のエージェントを並列化することができます。各エージェントは独自のコンテキストを持ち、独立して動作します。

• コンテキストの作成と再利用

`new_context()`メソッドを使用して新しいコンテキストを作成し、`async with`ステートメントを用いてコンテキストを自動的に閉じることができます。

```python
from browser_use.browser.service import Browser

browser = Browser()

for i in range(10):
# 新しいコンテキストを作成し、エージェントの終了後に自動的に閉じる
async with browser.new_context() as context:
agent = Agent(task=f"Task {i}", llm=model, browser_context=context)

# ... コンテキストを再利用
```

この方法により、効率的に複数のエージェントを管理できます。特に、大量のデータを同時に処理する際に有効です。さらに、各エージェントが独立したコンテキストで動作するため、データの整合性が保たれ、信頼性の高い結果を得ることができます。

• コンテキストとブラウザの違い

`browser`または`browser_context`を指定しない場合、エージェントは新しいブラウザインスタンスとコンテキストを作成します。これにより、各エージェントが独立した環境で動作します。これにより、エージェント間の干渉を防ぎます。さらに、独立した環境での動作により、エージェントは異なるタスクを同時に実行することが可能となり、全体の処理効率が向上します。

XPath履歴の取得

エージェントが実行したすべてのアクションの履歴を取得するには、`run`メソッドの出力を利用します。

```python
history: list[AgentHistory] = await agent.run()

print(history)
```

このスクリプトは、エージェントのアクション履歴を出力します。これにより、過去の操作を追跡し、必要に応じて再利用することができます。さらに、履歴を分析することで、エージェントの動作を最適化し、将来のタスクにおける改善点を特定することが可能です。これにより、エージェントのパフォーマンスを継続的に向上させることができます。

ブラウザの設定

`BrowserConfig`クラスと`BrowserContextConfig`クラスを使用してブラウザを詳細に設定することができます。
主な設定オプション

• headless: ヘッドレスモードでブラウザを実行するかどうか
• keep_open: スクリプト終了後もブラウザを開いたままにするかどうか
• disable_security: ブラウザのセキュリティ機能を無効にするかどうか（iframeなどのクロスオリジンリクエストを扱う場合に非常に便利）
• cookies_file: 永続化のためのクッキーファイルへのパス
• minimum_wait_page_load_time: LLM入力のためにページの状態を取得する前に待機する最小時間
• wait_for_network_idle_page_load_time: ページの状態を取得する前にネットワークリクエストが完了するまで待機する時間
• maximum_wait_page_load_time: 処理を続行する前にページの読み込みを待機する最大時間

これらの設定を適切に調整することで、ブラウザの動作を最適化できます。特に、特定の環境や要件に応じたカスタマイズが可能です。さらに、ブラウザの設定を細かく調整することで、エージェントの動作をより効率的にし、特定のタスクに最適化することが可能です。これにより、エージェントはより迅速かつ正確にタスクを遂行することができます。

Browser Useの貢献

バグ報告と機能リクエスト

Browser Useを使用している際にバグを発見した場合や、新機能のリクエストがある場合は、GitHub上でIssueを作成して報告することができます。これにより、プロジェクトの改善に貢献できます。ユーザーからのフィードバックは、開発者にとって非常に貴重です。さらに、コミュニティの協力により、Browser Useは継続的に改善され、新しい機能が追加されることが期待されます。これにより、ユーザーは常に最新の技術を活用することができます。

ローカル環境のセットアップ

Browser Useをローカル環境で開発するには、以下の手順に従います。
1. 仮想環境を作成し、依存関係をインストールします。

```
# 開発用の依存関係を含むすべての依存関係をインストールする
pip install . ."[dev]"
```

2. .envファイルにAPIキーを追加します。

```
cp .env.example .env
```

または、以下の内容を.envファイルにコピーします。

```
OPENAI_API_KEY=
ANTHROPIC_API_KEY=
```

LangChainがサポートする任意のLLMモデルを使用することができます。適切な環境変数を設定してください。利用可能なオプションについては、[langchain models]を参照してください。これにより、開発環境が整い、カスタマイズが可能になります。さらに、ローカル環境での開発により、ユーザーは独自の機能を追加し、特定のニーズに応じたソリューションを構築することが可能です。

パッケージのビルド

```
hatch build
```

このコマンドを実行することで、パッケージをビルドすることができます。これにより、開発した機能をテストし、デプロイする準備が整います。さらに、ビルドプロセスを通じて、パッケージの品質を確認し、必要に応じて修正を加えることが可能です。これにより、ユーザーは高品質なソフトウェアを提供することができます。

Browser Useのテレメトリ

Browser Useは、ライブラリの使用方法を理解し、潜在的な問題を特定するために、匿名の利用状況データを収集しています。個人情報は収集されないため、プライバシーリスクはありません。データはPostHogを使用して収集されます。

テレメトリをオプトアウトするには、`ANONYMIZED_TELEMETRY=false`環境変数を設定します。これにより、ユーザーはプライバシーを保護しつつ、ライブラリの改善に貢献できます。さらに、テレメトリデータを活用することで、開発者はユーザーのニーズをより深く理解し、より良い製品を提供することが可能です。これにより、Browser Useは継続的に進化し、ユーザーの期待に応えることができます。

まとめ

Browser Useは、AIエージェントを活用してWebサイトを操作するための強力なツールです。豊富な機能と柔軟性により、Webスクレイピング、データ収集、Webアプリケーションのテストなど、さまざまな用途に対応できます。Browser Useを活用して、AIエージェントによるWebサイト操作の新たな可能性を探求してみてください。

これにより、業務の効率化や新たなビジネスチャンスの創出が期待できます。さらに、Browser Useを通じて、ユーザーは最新のAI技術を活用し、より高度なタスクを実行することが可能です。これにより、企業は競争力を高め、持続的な成長を実現することができます。