Sandbox
@OTA-Tech-AI/web-agent-protocol

Browser action record and replay SDK with MCP export

Web Agent Protocol records browser interactions from the Chrome extension, converts them into exact or smart replay lists, and can generate MCP servers from those actions. The Python code in `browser_use/`, `wap_replay/`, and `mcp_servers/` handles collection, processing, replay, and service access.

507 stars88 forksPythonUpdated 1y ago
WAP Demo Full
OTA184 views • 1 year ago
Who it's for

Builders who want to turn real browser sessions into reusable agent actions.

What it delivers

You can capture a browser task once and replay or expose it again without rebuilding the flow by hand.

What it does

Action collection server

Runs a local endpoint that receives browser events from the WAP Chrome extension and saves each session as JSON.

Exact replay generation

Turns recorded task data into a step-by-step replay list that repeats the captured actions.

Smart replay generation

Converts the raw event stream into goal-oriented replay steps instead of every low-level action.

MCP server generation

Builds per-task MCP servers from recorded actions so other agents can call the workflow again.

Replay runner

Executes replay lists with a chosen model provider through `run_replay.py`.

Browser use integration

Includes the `browser_use/` package and supporting utilities for DOM handling, controllers, prompts, and telemetry.

How to get it

  1. 1Create a conda env
    conda create -n WAP python=3.11
  2. 2Activate the conda env
    conda activate WAP
  3. 3Install the dependencies
    pip install -r requirements.txt
  4. 4Setup your repo source path
    set PYTHONPATH=C:/path/to/webagentprotocol # for Windows
    export PYTHONPATH=/path/to/webagentprotocol # for Linux
  5. 5Create .env file under the repo root directory with your own API keys
    OPENAI_API_KEY=sk-proj-...
    DEEPSEEK_API_KEY=sk-...

README

OTA-tool-kits

Homepage Hugging Face Code License


Web Agent Protocol

Overview

The Web Agent Protocol (WAP) is a standardized framework designed to enable seamless interaction between users, web agents, and browsers by recording and replaying browser actions. It separates the concerns of action recording and execution, allowing for efficient automation and reusability. The Python SDK for WAP implements the full specification, making it easy to:

  1. Collect user‑interaction data with the OTA‑WAP Chrome extension.
  2. Convert the raw event stream into either exact‑replay or smart‑replay action lists.
  3. Convert recorded actions into MCP servers for reuse by any agent or user
  4. Replay those lists using the WAP-Replay protocol to ensure accurate browser operations.

WAP FULL DEMO

Watch the video

Without WAP

image

WAP Record

image

WAP Replay

image

Example using WAP

image

Setup

Install the dependencies with the following command:

Create a conda env

conda create -n WAP python=3.11

Activate the conda env

conda activate WAP

Install the dependencies

pip install -r requirements.txt

Setup your repo source path:

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

Create .env file under the repo root directory with your own API keys:

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

Record

WAP record extension

Please refer to OTA‑WAP Chrome Extension to setup action capturer in your Chrome browser.

Start data‑collection server

Run the following command to start the server to collect data from the extension:

python action_collect_server.py

Once the server is up, you can start to record from the page using WAP Chrome extension.

The server listens on http://localhost:4934/action-data by default, please make sure the Host and Port in the extension settings match this server config. Each session will be saved to:

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

An example of the formatted data which you will received in the WAP backend server is like:

{
  "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\">..."
}

Generate replay lists

ModeCommand
Exact replay – exactly reproduce every actionpython wap_replay/generate_exact_replay_list.py --data_dir_path data/<date>/<task_id> --output_dir_path data_processed/exact_replay
Smart replay – condensed goal‑oriented stepspython wap_replay/generate_smart_replay_list.py --data_dir_path data/<date>/<task_id> --output_dir_path data_processed/smart_replay

Replace <task_id> with the folder produced by the extension (e.g. em3h6UBDZykz0gnH).

Output structure:

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

Replay

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

For smart-replay, replace the path with a smart‑replay JSON to test this mode.

Convert to MCP Server

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

converted MCP servers will be located under mcp_servers folder

Replay with MCP

You would need 2 terminals to replay with MCP. In the first termnial

python wap_service.py

In the second termnial

python mcp_client.py

Then enter your prompt in the second terminal

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

Replay with our Desktop App

We provide out-of-box desktop app for running replay lists. It is easy to install and you don't need any extra steps for setup and deployments. Visit WAP Replay Tool releases for more details.

WAP Replay Tool Demo GIF

Troubleshooting

ModuleNotFoundError – run commands from the project root or export PYTHONPATH=. (set PYTHONPATH=. for Windows).

“no task‑start file” – ensure the extension recorded a full session; the generators require exactly one task-start and one task-finish record.

Acknowledgement

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

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

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

Files in the repo

Repository payload16 top-level entries
  • assets
  • browser_use
  • chrome-extension
  • data_samples
  • mcp_servers
  • prompts
  • utils
  • wap_replay
  • .gitignore
  • action_collect_server.py
  • LICENSE
  • mcp_client.py
  • README.md
  • requirements.txt
  • run_replay.py
  • wap_service.py

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More frameworks & sdks

HKUDS/nanobotFrameworks & SDKs

Ultra-lightweight, open-source, self-hosted personal AI agent framework in Python with WebUI, tools, memory, MCP, multi-agent workflows, automation, and chat apps

48k
microsoft/
SkillOpt
microsoft/SkillOptFrameworks & SDKs

SkillOpt is a text-space optimizer that trains reusable natural-language skills for frozen LLM agents through trajectory-driven edits, validation-gated updates, and deployable best_skill.md artifacts.

17k
omnigent-ai/omnigentFrameworks & SDKs

Omnigent is an open-source AI agent framework and meta-harness: orchestrate Claude Code, Codex, Cursor, Pi, and custom agents — swap harnesses without rewriting, enforce policies and sandboxing, and collaborate in real time from any device.

9.8k
kyegomez/
OpenMythos
kyegomez/OpenMythosFrameworks & SDKs

A theoretical reconstruction of the Claude Mythos architecture, built from first principles using the available research literature.

15k
D4Vinci/ScraplingFrameworks & SDKs

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!

80k