Web Agent Protocol

Web Agent Protocol

概要

Web Agent Protocol（WAP）は、ブラウザー操作を記録して再生することで、ユーザー、ウェブエージェント、ブラウザー間のシームレスな連携を実現するために設計された標準化フレームワークです。操作の記録と実行を分離することで、効率的な自動化と再利用を可能にします。WAP の Python SDK は仕様全体を実装しており、次のことを簡単に行えます。

1. OTA‑WAP Chrome extensionを使って、ユーザー操作データを収集します。
2. 生のイベントストリームを、完全再生またはスマート再生の操作リストに変換します。
3. 記録した操作を、あらゆるエージェントやユーザーが再利用できる**MCPサーバーに変換**します。
4. WAP-Replayプロトコルを使ってリストを再生し、ブラウザー操作を正確に実行します。

WAP の全体デモ

WAP を使用しない場合

WAP の記録

WAP の再生

WAP の使用例

セットアップ

次のコマンドで依存関係をインストールします。

conda 環境を作成します

conda create -n WAP python=3.11

conda 環境を有効にします

conda activate WAP

依存関係をインストールします

pip install -r requirements.txt

リポジトリのソースパスを設定します：

set PYTHONPATH=C:/path/to/webagentprotocol # for Windows
export PYTHONPATH=/path/to/webagentprotocol # for Linux

リポジトリのルートディレクトリに、独自の API キーを記載した .env ファイルを作成します：

OPENAI_API_KEY=sk-proj-...
DEEPSEEK_API_KEY=sk-...

記録

WAP 記録用拡張機能

Chrome ブラウザーに操作キャプチャ機能をセットアップするには、OTA‑WAP Chrome Extensionを参照してください。

データ収集サーバーの起動

次のコマンドを実行して、拡張機能からデータを収集するサーバーを起動します：

python action_collect_server.py

サーバーが起動したら、WAP Chrome extension を使ってページ上の記録を開始できます。

サーバーはデフォルトで http://localhost:4934/action-data をリッスンします。拡張機能の設定にある Host と Port が、このサーバーの設定と一致していることを確認してください。 各セッションは次の場所に保存されます：

data/YYYYMMDD/taskid/summary_event_<timestamp>.json

WAP バックエンドサーバーで受信するデータの形式の例を次に示します。

{
  "taskId": "MkCAhQsHgXn7YgaK",
  "type": "click",
  "actionTimestamp": 1746325231479,
  "eventTarget": {
    "type": "click",
    "target": "<a ota-use-interactive-target=\"1\" data-ordinal=\"3\" href=\"https://www.allrecipes.com/recipe/68925/cheesy-baked-salmon/\" data-tax-levels=\"\" data-doc-id=\"6592066\" class=\"comp mntl-card-list-card--extendable mntl-universal-card mntl-document-card mntl-card card card--no-image\" id=\"mntl-card-list-card--extendable_3-0\">\n<div class=\"loc card__top\"><div class=\"card__media mntl-image card__media universal-image__container\">...",
    "targetId": "mntl-card-list-card--extendable_3-0",
    "targetClass": "comp mntl-card-list-card--extendable mntl-universal-card mntl-document-card mntl-card card card--no-image"
  },
  "allEvents": {},
  "pageHTMLContent": "<header data-tracking-container=\"true\" data-collapsible=\"true\" class=\"comp header mntl-header mntl-header--magazine mntl-header--open-search-bar mntl-header--myr\" id=\"header_1-0\"><a data-tracking-container=\"true\" id=\"mntl-skip-to-content_1-0\" class=\"mntl-skip-to-content mntl-text-link\" rel=\"nocaes\" href=\"#main\"></a><div class=\"mntl-header__menu-top\">..."
}

リプレイリストを生成する

モード	コマンド
完全リプレイ – すべてのアクションを正確に再現します	python wap_replay/generate_exact_replay_list.py --data_dir_path data/<date>/<task_id> --output_dir_path data_processed/exact_replay
スマートリプレイ – 目標指向のステップに要約します	python wap_replay/generate_smart_replay_list.py --data_dir_path data/<date>/<task_id> --output_dir_path data_processed/smart_replay

<task_id> は、拡張機能によって生成されたフォルダーに置き換えてください （例：em3h6UBDZykz0gnH）。

出力構造：

data_processed/smart_replay/
 ├─ subgoals_<task_id>/                     # intermediate prompts & replies
 └─ wap_smart_replay_list_<task_id>.json   # final smart replay list for the agent

data_processed/exact_replay/
 └─ wap_smart_replay_list_<task_id>.json   # final exact replay list for the agent

リプレイ

python run_replay.py --model-provider openai --wap_replay_list data_processed/exact_replay/wap_exact_replay_list_<task_id>.json --max-concurrent 1

スマートリプレイをテストするには、パスをスマートリプレイの JSON に置き換えてください。

MCP サーバーに変換する

python wap_replay\generate_mcp_server.py --task_id <task_id>

変換された MCP サーバーは mcp_servers フォルダー内に配置されます。

MCP でリプレイする

MCP でリプレイするには、2 つのターミナルが必要です。1 つ目のターミナルで

python wap_service.py

2 つ目のターミナルで

python mcp_client.py

次に、2 つ目のターミナルでプロンプトを入力します。

example: find a top rated keyboard on amazon.ca using smart replay

デスクトップアプリでリプレイする

リプレイリストを実行するためのデスクトップアプリを、すぐに使える形で提供しています。インストールは簡単で、セットアップやデプロイに追加の手順は必要ありません。詳細については、WAP Replay Tool のリリースをご覧ください。

トラブルシューティング

ModuleNotFoundError – プロジェクトのルートからコマンドを実行するか、PYTHONPATH=. をエクスポートしてください（Windows では PYTHONPATH=. を設定してください）。

「タスク開始ファイルがありません」– 拡張機能がセッション全体を記録したことを確認してください。 ジェネレーターには、タスク開始レコードとタスク終了レコードがそれぞれ 1 つだけ必要です。

謝辞

Browser-Use: https://github.com/browser-use/browser-use

MCP: https://github.com/modelcontextprotocol/python-sdk

DOM Extension: https://github.com/kdzwinel/DOMListenerExtension