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

Web開発

はじめに

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

🔧 セットアップ方法

前提条件

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

インストール手順

  1. 仮想環境の作成:

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

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

    uv pip install browser-use

  3. Playwrightのインストール:

    playwright install

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

    uv pip install -r requirements.txt

  5. 環境変数の設定:

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

  6. 起動方法:

    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
openai.com

モデルのアクション履歴

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

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

コメント

タイトルとURLをコピーしました