browser-use-webuiでブラウザ操作を自動化しよう！

はじめに

browser-use-webuiは、AIエージェントによるブラウザ操作を簡単に実現できるツールです。今回は、セットアップから実際の使用例まで詳しく解説します。

browser-useのwebui を動かしてみた！
確かにこれは面白い！！！ https://t.co/Uzj8YOrRvb pic.twitter.com/D3JGkRX8EU

— Maki@Sunwood AI Labs. (@hAru_mAki_ch) January 4, 2025

🔧 セットアップ方法

前提条件

• Python 3.11以上が必要（この例ではPython 3.12.5を使用）
• パッケージマネージャーとしてuvを使用（高速なインストールが可能）

インストール手順

1. 仮想環境の作成:

uv venv --python 3.12
.venv\Scripts\activate

1. browser-useのインストール:

uv pip install browser-use

1. Playwrightのインストール:

playwright install

1. 依存パッケージのインストール:

uv pip install -r requirements.txt

1. 環境変数の設定:

   • .env.exampleを.envにコピー
   • 使用するLLMのAPI keyを設定
   • 自前のブラウザを使用する場合:
     • CHROME_PATH: Chromeの実行ファイルパス
     • CHROME_USER_DATA_DIR: ユーザーデータディレクトリ

2. 起動方法:

python webui.py --ip 127.0.0.1 --port 7788

ブラウザで http://127.0.0.1:7788 にアクセスして利用開始！

browser-use-webuiは、AIエージェントによるブラウザ操作を簡単に実現できるツールです。今回は、実際の使用例を交えながら、設定方法から実行までを詳しく解説します。

🎮 基本的な設定

エージェントの設定

1. Agent Type:

   • org: オリジナルのbrowser-useエージェント
   • custom: カスタマイズされた最適化エージェント（推奨）

2. max run steps:

   • エージェントが実行できる最大ステップ数
   • 通常のタスクでは100が適切

3. use vision:

   • ブラウザの視覚的情報を使用するかどうか
   • より正確な操作が可能になります

LLMの設定

1. LLM Provider:

   • サポートされているプロバイダーから選択（例：anthropic）
   • 各プロバイダーごとに適切なAPI Keyが必要

2. LLM Model Name:

   • 使用するモデルを指定
   • 例：claude-3-5-sonnet-20240620

3. LLM Temperature:

   • 生成の多様性を制御（0-1）
   • 1に近いほど創造的、0に近いほど一貫した結果

4. API Key:

   • 選択したプロバイダーのAPI Keyを設定

🚀 実行例：Google検索の自動化

以下の簡単なタスクを例に、実際の動作を見ていきましょう。

タスク: Google.comで'OpenAI'を検索し、最初のURLを取得する

Task: go to google.com and type 'OpenAI' click search and give me the first url

実行ログの解説

エージェントは以下のステップで処理を行います：

1. 初期化:

   • タスクを解析し、実行計画を立てる
   • Google.comへの移動を決定

2. 入力フェーズ:

   • 検索ボックスを特定（index: 7）
   • 'OpenAI'というテキストを入力

3. 検索実行:

   • 検索ボタンをクリック（index: 22）
   • 結果ページの読み込みを待機

4. 結果取得:

   • 最初の検索結果からURLを抽出
   • タスクを完了として報告

実行結果

Final Result: The first URL from the Google search results for 'OpenAI' is: 
https://openai.com/ja-JP/chatgpt/overview

モデルのアクション履歴

[
  {"go_to_url": {"url": "https://www.google.com"}},
  {"input_text": {"index": 7, "text": "OpenAI"}},
  {"click_element": {"index": 10}},
  {"click_element": {"index": 22}},
  {"done": {"text": "The first URL from the Google search results for 'OpenAI' is: https://openai.com/ja-JP/chatgpt/overview"}}
]

💡 活用のポイント

1. タスクの明確な記述:

   • 具体的な指示を心がける
   • 必要に応じてAdditional Infosでヒントを提供

2. 適切なモデルの選択:

   • タスクの複雑さに応じてモデルを選択
   • 複雑なタスクには高性能なモデルを使用

3. エラー処理:

   • Errorsセクションでエラーを確認
   • 必要に応じてmax run stepsを調整

🔍 その他の機能

• Browser Settings:

  • 自前のブラウザを使用可能
  • スクリーンショットの設定など

• Additional Infos:

  • タスク実行のためのヒントを追加可能
  • より正確な実行をサポート

まとめ

browser-use-webuiは、ブラウザ操作の自動化を直感的に実現できるツールです。適切な設定と明確なタスク記述により、様々な自動化シナリオに対応できます。

今回の例では基本的な検索タスクを実行しましたが、より複雑なワークフローにも対応可能です。ぜひ様々なユースケースで活用してみてください！