LLMs、Playwright、ブラウザーの使用を活用したAIブラウザーエージェントを構築する

チュートリアル

ブラウザユースは、AIエージェント（OpenAIのGPTモデルやその他の大規模言語モデルなど）がウェブブラウザを知的かつ自動化された方法で操作しやすくするために設計されたツールまたはプラットフォームです。これは、AIの能力と現実世界のブラウザインタラクションとの間のギャップを埋め、AIシステムがウェブサイトのナビゲーション、データの抽出、フォームの入力、ボタンのクリックなど、人間のユーザーと同様にタスクを実行できるようにします。

ブラウザユースの主な目標 は、ブラウザの自動化の複雑さを抽象化することで、AIエージェントがウェブサイトにアクセスしてタスクを実行できるようにすることです。開発者にウェブページの要素を特定して操作するための複雑なスクリプトを記述する必要がなく、ブラウザユースはボタン、入力フィールド、リンクなどのすべての対話要素を抽出し、AIエージェントが操作できるように構造化されたインターフェースを提供します。

ブラウザユースの主な特徴

AI駆動の自動化

ブラウザユースは、AIを活用してウェブページを理解し操作します。たとえば、ウェブページのコンテンツを分析し、ボタンをクリックしたりフォームを記入したりするなどの関連するアクションを特定し、それらのアクションを自律的に実行できます。

ビジョン+HTML抽出

それは、ビジュアル理解（画面上の要素を認識する）とHTML構造の抽出（ウェブページの基礎コードを解析する）を組み合わせています。この2つのアプローチにより、AIエージェントが明確な識別子（IDやクラスなど）がなくても、静的および動的なWeb要素とインタラクトできるようになります。

マルチタブ管理

ブラウザの使用は複数のブラウザタブを同時に処理でき、AI エージェントが複数のウェブページとやり取りする複雑なワークフローを実行できます。

このツールは、AI エージェントによって実行された正確なアクション（たとえば、ボタンのクリックやフォームの入力）を追跡し、ウェブサイトのレイアウトがわずかに変更された場合でも、これらのアクションを一貫して複製できます。これは、QA オートメーションにおいて自己修復テストを作成する際に特に有用です。

カスタムアクション

ユーザーは、ファイルにデータを保存したり、データベース操作を実行したり、通知を送信したり、自動化プロセスの特定のステップ中に人間の入力を処理するなど、カスタムアクションを追加してブラウザの使用を拡張できます。

自己修正

ブラウザの使用には、インテリジェントなエラーハンドリングと自動回復メカニズムが含まれています。自動化中に何か問題が発生した場合（たとえば、要素が見つからないかネットワークのタイムアウトが発生した場合）、このツールは問題を検出して自動的に回復を試み、ワークフローが中断されることなく継続するようにします。

複数のLLMとの互換性

ブラウザの使用は、OpenAI の GPT-4、Anthropic の Claude、Meta の Llama 2 を含むさまざまな大規模言語モデル（LLM）をサポートしています。この柔軟性により、ユーザーは特定のニーズに最適なAI モデルを選択できます。

ブラウザの使用の仕組み

ブラウザー使用はウェブページをスキャンし、すべてのインタラクティブ要素（ボタン、入力フィールド、リンク、フォームなど）を抽出します。それから、これらの要素の構造化された表現を提供し、AIエージェントが理解して相互作用できるようにします。

AIインタラクション

インタラクティブ要素が特定されると、AIエージェントはボタンをクリックしたり、フォームに入力したり、ページ間を移動したり、データを抽出したりするなどのアクションを実行できます。AIエージェントはまた、ウェブページのコンテンツを分析し、その情報に基づいて判断を下すこともできます。

自動化ワークフロー

ブラウザー使用は、ユーザーが複雑な自動化ワークフローを作成できるようにします。たとえば、AIエージェントがeコマースサイトをナビゲートし、ショッピングカートに商品を追加し、購入を完了するなど、人間の介入なしにすべての操作を行うことができます。

エラーハンドリングとリカバリ

自動化プロセス中に何か問題が発生した場合（例：要素の欠落やページの読み込みが遅い場合）、ブラウザー使用は問題を検出し、自動的に回復を試みます。これにより、予測不能な環境でもワークフローがスムーズに続行されることが保証されます。

インストールガイド

ブラウザー使用を始めるのは簡単ですが、すべてがスムーズに動作するようにするためには、いくつかの初期設定が必要です。以下は、提供された前提条件と手順に基づいた詳細なインストールガイドです。このガイドに従って、自分のマシンにブラウザー使用をローカルにセットアップする手順が説明されています。

前提条件

開始する前に、システムが以下の要件を満たしていることを確認してください：

  • Python 3.11 またはそれ以上。次のコマンドを実行して Python のバージョンを確認できます：
    Python

     

  • Git。Gitはリポジトリをクローンするために必要です

ローカルインストール

ステップ1: リポジトリをクローンする

Shell

 

ステップ2: Python環境を設定する

Python環境を管理するためにuvの使用をお勧めします（Macに推奨）：

Shell

 

1. Create a virtual environment. Run the following command to create a virtual environment with Python 3.11:

Shell

 

2. Activate the virtual environment.
  • Windows (コマンドプロンプト):
    シェル

     

  • macOS/Linux:
    シェル

     

アクティブ化されると、仮想環境がアクティブであることを示すために、ターミナルプロンプトに.venvが表示されます。

ステップ3：依存関係のインストール

環境が設定されたら、必要な依存関係をインストールする準備が整いました。

Pythonパッケージのインストール。次のコマンドを使用して、requirements.txtにリストされている必要なPythonパッケージをインストールします:

Shell

 

ステップ4：Playwrightのインストール

Playwrightは、ブラウザ使用時に使用されるブラウザ自動化ライブラリです。

インストールするには、次のコマンドを実行します:

Shell

 

ブラウザ使用WebUIのローカルセットアップガイド

ブラウザ使用のインストール手順を完了すると、WebUIをローカルで実行できます。このガイドでは、アプリケーションの起動、設定のカスタマイズ、必要に応じて独自のブラウザを使用するように構成する方法について説明します。

WebUIの実行

インストール手順を完了した後、次のコマンドを実行して、ブラウザ使用WebUIを起動できます:

Shell

 

WebUIには、動作をカスタマイズするためのいくつかのオプションが用意されています。利用可能なフラグの詳細は次の通りです:

  • --ip– WebUIをバインドするIPアドレス
    • デフォルト – 127.0.0.1（localhost）
  • --port– WebUIをバインドするポート
    • デフォルト – 7788
  • --theme – ユーザーインターフェースのテーマ

WebUI へのアクセス

WebUI が実行されている場合、ウェブブラウザを開いて次のページに移動します:

Plain Text

 

Once the above command is executed, you should see the Browser Use interface, where you can interact with the tool and configure AI-driven browser automation tasks.

LLM の構成

LLM の構成で、言語モデルを選択します。例: gemini。Gemini は無料のAPIキーを提供します。

Generate the API keys from the link attached below.

以下のスクリーンショットでは、上記リンクで生成されたAPIキーを追加しているのが確認できます。

エージェントの実行

実行エージェントでは、プロンプトに”amazon.in に移動し、’Playwright’ と入力して検索し、最初のURLを教えてください。“と入力しましょう。

以下のスクリーンショットでは、プロンプトを実行すると、Chromium ブラウザが開かれ、ページ全体のDOMとやり取りします。

最後に、検索ボックスに Playwright と入力し、以下のスクリーンショットをご覧いただけます。

In the below screenshot, you can see it gives us the first URL.

バックエンドでは、エージェントが実行しているすべてのログが表示されます。エージェントが行っている操作のすべてのログがバックエンドにあります。

結果

結果タブでは、最終結果、モデルのアクション、モデルの思考、トレースファイル、およびエージェントの履歴を確認できます。

ビデオ

提供されたリンクをクリックしてビデオをダウンロードできます。Recordings タブの下に添付されたビデオもご覧いただけます。ビデオを再生すると、エージェントが実行したすべてのステップが表示されます。

以下はビデオのスクリーンショットです。

結論

LLM（言語モデル）の統合、Playwright、およびブラウザの使用は、ブラウザの自動化とAI駆動のワークフローにおける新たな飛躍を示しています。これらのツールを組み合わせることで、複雑なタスクを最小限の人間の介入で実行できる知能を持つブラウザエージェントを作成できます。繰り返しのプロセスの自動化からダイナミックなQAテストやリアルタイムの意思決定を可能にするまで、可能性は無限です。

参考文献

Source:
https://dzone.com/articles/build-ai-browser-agent-llms-playwright-browser-use