ai-agents-for-beginners

コンピューター利用エージェント（CUA）の構築

コンピューター利用エージェントは、人間がブラウザを開いてページを検査し、見た情報から次の最適な行動を取るのと同じようにウェブサイトと対話できます。このレッスンでは、Airbnbを検索し、構造化されたリスティングデータを抽出し、ストックホルムで最も安い宿泊先を特定するブラウザ自動化エージェントを構築します。

このレッスンでは、AI駆動ナビゲーションのためのBrowser-Use、ブラウザ制御のためのPlaywrightとChrome DevToolsプロトコル（CDP）、ビジョン対応推論のためのAzure OpenAI、構造化抽出のためのPydanticを組み合わせています。

はじめに

このレッスンでは以下を扱います：

学習目標

このレッスンを終えた後、あなたは以下ができるようになります：

コードサンプル

このレッスンには1つのノートブックチュートリアルが含まれています：

前提条件

セットアップ

ノートブックで使用するパッケージをインストールします：

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=...

アーキテクチャ概要

このノートブックではハイブリッドブラウザ自動化ワークフローを示します：

  1. CDPを有効にしてChromeを起動し、PlaywrightとBrowser-Useが同じブラウザセッションを共有できるようにします。
  2. Browser-UseエージェントがAirbnbのオープンナビゲーションやポップアップの閉鎖、ストックホルムの検索などを処理します。
  3. アクティブなページを構造化されたPydanticスキーマで検査し、リスティングのタイトル、1泊あたりの価格、評価、URLを抽出します。
  4. Pythonのロジックで抽出されたリスティングを比較し、最も安い結果をハイライトします。

このアプローチでは、Browser-Useが得意とする柔軟なビジョンベースの推論を保持しつつ、必要なときに決定論的なブラウザ制御も可能にします。

重要ポイントとベストプラクティス

エージェントとアクターの使い分け

シナリオ エージェントを使う場合 アクターを使う場合
動的レイアウト はい、AIがページ変更に適応可能 いいえ、脆弱なセレクターは壊れやすい
構造が既知 いいえ、エージェントは直接制御より遅い はい、高速かつ正確
要素の検索 はい、自然言語が有効 いいえ、正確なセレクターが必要
タイミング制御 いいえ、予測が難しい はい、待機やリトライを完全制御可能
複雑なワークフロー はい、予期しないUI状態も処理できる いいえ、明示的な分岐が必要

Browser-Useのベストプラクティス

  1. 探索的かつ動的なナビゲーションにはエージェントから始める。
  2. 操作が予測可能になったら直接ページ制御に切り替える。
  3. 抽出データの検証や型安全性のため、構造化出力モデルを使用する。
  4. 目に見えるUI変更を引き起こす操作後は戦略的に遅延を入れる。
  5. 反復中にスクリーンショットを撮影して、失敗時のデバッグを容易にする。
  6. ウェブサイトは変化が予想されるため、ポップアップやレイアウト変更のフォールバック戦略を設計する。
  7. 柔軟性と精度を両立するため、エージェントとアクターパターンを融合する。

ブラウザエージェントの安全ガードレール

ブラウザエージェントはライブのウェブサイト上で動作するため、既知のAPIを呼び出すだけのスクリプトよりも厳格な境界設定が必要です。ノートブックのデモから実際のワークフローに移行する前に、エージェントが何を見てクリックし、送信できるかの制御を定義しましょう。

  1. 閲覧環境の範囲設定。 エージェントを専用のブラウザプロファイルまたはサンドボックスで実行し、タスクに必要なドメインに限定する。
  2. 観察と行動を分離。 エージェントにまず検索・読み取り・データ抽出を行わせ、フォーム送信、メッセージ送信、旅行予約、購入、レコード削除、アカウント設定変更には明示的な承認ステップを要求する。
  3. プロンプトやトレースに秘密を含めない。 パスワード、支払い情報、セッションクッキー、生の個人データをモデルのコンテキストに置かない。認証はユーザーに任せ、ログからはセンシティブなフィールドを削除する。
  4. ページ内容を信頼できない入力と見なす。 ウェブサイトにはエージェント向けの指示が含まれる場合があり、目標を変えたり、データを公開したり、安全対策を無効化したり、関係のないサイトに誘導するページテキストは無視する。
  5. リスクのあるステップの周囲は決定論的なチェックを行う。 最終ステップをユーザーに承認してもらう前に、現在のURL、ページタイトル、選択されたアイテム、価格、受取人、アクションの概要をコードで検証する。
  6. 予算と停止条件を設定する。 エージェントが使用できるアクション数、リトライ回数、タブ数、使用時間を制限し、ページ状態が曖昧な場合はクリックを続行せず停止する。
  7. すべてを記録せず、役立つ証拠のみを記録する。 アクション概要、タイムスタンプ、URL、選択された要素の説明、スクリーンショットの参照を保持して失敗時のレビューを容易にし、不必要なセンシティブなページコンテンツの保存を避ける。

Airbnbのサンプルでは、安全なデフォルトとしてリスティング検索と価格抽出を行います。サインイン、ホストへの連絡、予約完了はユーザー承認が必要な別の操作にします。

実際の応用例

実例：Microsoft Project Opal

このレッスンで構築するエージェントは、コンピューター利用エージェント(CUA) の小規模かつローカルなバージョンです。Microsoftはこの考え方をエンタープライズ向けにProject Opal (Frontier)というMicrosoft 365 Copilotの機能として展開しています。

Project Opalでは、タスクを記述すると、エージェントがセキュアなWindows 365 Cloud PC上でのコンピューター利用を使って組織のブラウザベースアプリケーション、サイト、データで非同期的に動作します。作業はバックグラウンドで非同期に進み、いつでもあなたが操作を指示したり制御を引き継ぐことができます。例としては：

Opalは本番レベルで信頼できるコンピューター利用エージェントの参考例であり、本コースの概念を強化します：

本コースの概念 Project Opalの適用例
ヒューマンインザループ（レッスン06） ログイン認証情報やセンシティブデータ、不明瞭な指示で停止し、パスワード入力やフォーム送信は明示的確認が必要。タスク中に制御を引き継ぎ、返すことが可能。
信頼性とセキュリティ（レッスン06＆18） 分離されたWindows 365 Cloud PC上で動作し、デフォルトはブラウザのみ（他のコンピューターアクセスはIntuneでブロック）、ユーザーのアイデンティティで権限範囲のみアクセス、すべての操作は監査ログに記録。
計画とメタ認知（レッスン07＆09） 作業の計画を最初に作成し、各ステップで自己監督的に推論し、不審な動作を検知すると停止。
再利用可能な機能・ツール（レッスン04） スキルは繰り返し実行可能なジョブ用の指示を書き（.mdファイルからインポートまたはOpalで作成）、会話間で再利用できる。

提供状況: Project Opalは現在、Microsoft 365 Copilot購読のあるユーザー向けにFrontier早期アクセスプログラムで利用可能であり、管理者による設定が必要です。実験的なFrontier機能のため、今後変更される可能性があります。

知識チェック

次のレッスンに進む前に理解を確認してください。

1. ブラウザベースのコンピューター利用エージェントは、APIのみのワークフローよりもいつ適していますか？

回答 タスクがウェブUIに表示されている内容に依存し、必要なAPIが公開されていないか、またはページの変更が頻繁すぎて固定のAPIやセレクターのロジックが脆弱になる場合、ブラウザエージェントを使用します。同じタスクに安定したAPIがあれば、通常はAPIのほうが高速でテストしやすく、安全性も高いため優先します。

2. ハイブリッドワークフローでは、エージェントが処理すべき部分と直接Playwrightコードで処理すべき部分はどこですか？

回答 エージェントにはオープンエンドのナビゲーションや動的なUI状態の処理（正しいページの検索や予期しないポップアップの閉鎖など）を任せ、ページ構造が既知で、操作に精度、リトライ、待機、決定論的検証が必要な場合は直接Playwright制御に切り替えます。

3. Airbnbのサンプルはユーザーが予約したいかもしれないリスティングを見つけます。ワークフローがサインイン、ホスト連絡、予約完了を行う前に何が起きるべきですか？

回答 ワークフローは停止し、明示的なユーザー承認を求める必要があります。承認を求める前に、選択されたリスティング、現在のURL、価格、日程、予定されているアクションの明確な概要を示すべきです。検索と価格抽出は自律的に行えますが、アカウントアクセス、メッセージ、購入、予約はユーザー承認が必要です。

4. ウェブページがエージェントに元の指示を無視し、別のサイトを訪問し、保存された資格情報を公開するよう促した場合、エージェントはそのテキストをどう扱うべきですか？

回答 それを信頼できないページ内容として扱い、開発者やユーザーの指示とはみなさないでください。エージェントは許可されたドメインとタスク範囲内にとどまり、秘密の公開を拒否し、目標を変える、保護機能を無効化する、関係のないサイトへ送るようなページテキストは無視するべきです。

5. ブラウザエージェントの実行時に保持すべき証拠と避けるべきものは何ですか？

回答 実行をレビューできるよう、アクションの概要、タイムスタンプ、URL、選択した要素の説明、検証結果、スクリーンショットの参照を保持します。パスワード、支払い情報、セッションクッキー、生の個人データ、ページ全体の内容は、特定の保持やプライバシー上の理由がない限り保存を避けてください。

追加リソース

前のレッスン

Microsoft Agent Frameworkの探求

次のレッスン

スケーラブルエージェントの展開

免責事項： 本書類は AI 翻訳サービス Co-op Translator を使用して翻訳されています。正確性を期していますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知おきください。原文の原語版が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じたいかなる誤解や解釈違いについても、当方は責任を負いかねます。

This site is open source. Improve this page.