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

## はじめに

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

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">browser-useのwebui を動かしてみた！<br>確かにこれは面白い！！！ <a href="https://t.co/Uzj8YOrRvb">https://t.co/Uzj8YOrRvb</a> <a href="https://t.co/D3JGkRX8EU">pic.twitter.com/D3JGkRX8EU</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1875450677750853921?ref_src=twsrc%5Etfw">January 4, 2025</a></blockquote> 

## 🔧 セットアップ方法

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

### インストール手順

1. **仮想環境の作成**:
```bash
uv venv --python 3.12
.venv\Scripts\activate
```

2. **browser-useのインストール**:
```bash
uv pip install browser-use
```

3. **Playwrightのインストール**:
```bash
playwright install
```

4. **依存パッケージのインストール**:
```bash
uv pip install -r requirements.txt
```

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

6. **起動方法**:
```bash
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
```

### モデルのアクション履歴

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

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

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>