コンピューター使用エージェント (CUA) の構築
コンピューター使用エージェントは、人が行うのと同じように、ブラウザを開き、ページを検査し、見た目に基づいて次に最適なアクションを取ることで、ウェブサイトと対話できます。このレッスンでは、Airbnbを検索し、構造化されたリスティングデータを抽出し、ストックホルムで最も安い宿泊先を特定するブラウザ自動化エージェントを構築します。
レッスンは、AI駆動のナビゲーションのための Browser-Use、ブラウザ制御のための Playwright と Chrome DevTools Protocol (CDP)、ビジョン対応の推論に Azure OpenAI、構造化抽出のための Pydantic を組み合わせています。
はじめに
このレッスンで扱う内容:
- APIのみの自動化よりもコンピューター使用エージェントが適している場面の理解
- 信頼性の高いブラウザライフサイクル管理のために Browser-Use と Playwright、CDP を組み合わせる方法
- Azure OpenAI ビジョンと構造化された Pydantic 出力を使って動的ウェブページからリスティングデータを抽出する方法
- エージェント優先、アクター優先、またはハイブリッドなブラウザ自動化ワークフローを使い分ける判断方法
学習目標
このレッスンを終えた後、以下ができるようになります:
- Azure OpenAI と Playwright を使って Browser-Use を設定する
- 実際のウェブサイトをナビゲートし、動的なUI要素を扱うブラウザ自動化ワークフローを構築する
- 表示ページの内容から型付き結果を抽出し、それを下流のビジネスロジックに変換する
- ブラウザ作業の予測可能性に応じてエージェントパターンとアクターパターンを選択する
コードサンプル
このレッスンには1つのノートブックチュートリアルが含まれます:
- 15-browser-user.ipynb: CDP経由でChromeセッションを起動し、Airbnbでストックホルムのリスティングを検索し、Browser-Useのビジョンで価格を抽出し、最安値のオプションを構造化データとして返します。
前提条件
- Python 3.12以上
- 環境に設定された Azure OpenAI デプロイメント
- ローカルにインストールされた Chrome または Chromium
- Playwright の依存関係インストール済み
- 非同期Pythonの基本的な知識
セットアップ
ノートブックで使用するパッケージをインストールします:
pip install browser_use playwright python-dotenv
playwright install chromium
ノートブックで使用される Azure OpenAI 環境変数を設定します:
AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# 任意：省略した場合は最新のAPIバージョンがデフォルトになります
AZURE_OPENAI_API_VERSION=...
アーキテクチャ概要
ノートブックはハイブリッドなブラウザ自動化ワークフローを示します:
- CDPを有効にしてChromeを起動し、PlaywrightとBrowser-Useの両方が同じブラウザセッションを共有できるようにします。
- Browser-UseエージェントがAirbnbのオープンエンドなナビゲーションタスク（ポップアップの解除、ストックホルムの検索など）を処理します。
- アクティブなページを構造化された Pydantic スキーマで検査し、リスティングのタイトル、1泊あたりの価格、評価、URLを抽出します。
- Pythonのロジックで抽出されたリスティングを比較し、最も安い結果を強調表示します。
このアプローチにより、Browser-Use が得意とする柔軟でビジョンベースの推論を維持しつつ、必要な時に決定論的なブラウザ制御を行えます。
重要なポイントとベストプラクティス
エージェントとアクターの使い分け
| シナリオ |
エージェントを使う |
アクターを使う |
| 動的レイアウト |
はい、AIがページ変化に適応可能 |
いいえ、壊れやすいセレクターになる |
| 既知の構造 |
いいえ、エージェントは直接制御より遅い |
はい、高速かつ正確 |
| 要素検出 |
はい、自然言語が有効 |
いいえ、正確なセレクターが必要 |
| タイミング制御 |
いいえ、予測しにくい |
はい、待機やリトライを完全制御可能 |
| 複雑なワークフロー |
はい、予期しないUI状態を処理可能 |
いいえ、明示的な分岐が必要 |
Browser-Use のベストプラクティス
- 探索的かつ動的なナビゲーションにはまずエージェントを使う。
- 操作が予測可能になったら直接ページ制御に切り替える。
- 抽出データの検証と型安全のために構造化出力モデルを使う。
- 目に見えるUI変化を引き起こす操作後は戦略的に遅延を入れる。
- 失敗時のデバッグを容易にするため、反復しながらスクリーンショットを取得する。
- ウェブサイトの変更を想定し、ポップアップやレイアウト変更に対応するフォールバック戦略を設計する。
- エージェントとアクターパターンを融合させて、柔軟性と精度の両方を獲得する。
実用的な応用例
- 旅行予約および価格監視
- ECの価格比較および在庫チェック
- 動的なウェブサイトからの構造化抽出
- ビジョン対応UIテストおよび検証
- ウェブサイト監視とアラート通知
- マルチステップのインテリジェントなフォーム入力
追加リソース
免責事項:
本書類はAI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を期していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご了承ください。原文のネイティブ言語による文書を正式な情報源とみなしてください。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の使用により生じた誤解や誤訳について、当方は一切の責任を負いません。