https://github.com/ota-tech-ai/web-agent-protocol
🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support
https://github.com/ota-tech-ai/web-agent-protocol
ai-agents ai-tools browser-automation browser-use llm mcp mcp-server modelcontextprotocol playwright python record-replay wap web-agent-protocol web-agents
Last synced: 4 months ago
JSON representation
🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support
- Host: GitHub
- URL: https://github.com/ota-tech-ai/web-agent-protocol
- Owner: OTA-Tech-AI
- License: mit
- Created: 2025-05-17T17:47:15.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-03T16:01:57.000Z (4 months ago)
- Last Synced: 2025-06-15T05:03:30.331Z (4 months ago)
- Topics: ai-agents, ai-tools, browser-automation, browser-use, llm, mcp, mcp-server, modelcontextprotocol, playwright, python, record-replay, wap, web-agent-protocol, web-agents
- Language: Python
- Homepage: https://otatech.ai
- Size: 5.33 MB
- Stars: 447
- Watchers: 58
- Forks: 78
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/OTA-Tech-AI/webagentprotocol/tree/main/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
[](https://www.youtube.com/watch?v=joh9FXJfnwk)
### Without WAP
### WAP Record
### WAP Replay
## Example using WAP
## Setup
Install the dependencies with the following command:
Create a conda env
```bash
conda create -n WAP python=3.11
```
Activate the conda env
```bash
conda activate WAP
```
Install the dependencies
```bash
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](https://github.com/OTA-Tech-AI/webagentprotocol/tree/main/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:
```bash
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:
```bash
data/YYYYMMDD/taskid/summary_event_.json
```
An example of the formatted data which you will received in the WAP backend server is like:
```json
{
"taskId": "MkCAhQsHgXn7YgaK",
"type": "click",
"actionTimestamp": 1746325231479,
"eventTarget": {
"type": "click",
"target": "\n...",
"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": "..."
}
```
## Generate replay lists
| Mode | Command |
| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Exact replay** – exactly reproduce every action | `python wap_replay/generate_exact_replay_list.py --data_dir_path data// --output_dir_path data_processed/exact_replay` |
| **Smart replay** – condensed goal‑oriented steps | `python wap_replay/generate_smart_replay_list.py --data_dir_path data// --output_dir_path data_processed/smart_replay` |
Replace **** with the folder produced by the extension
(e.g. em3h6UBDZykz0gnH).
Output structure:
```bash
data_processed/smart_replay/
├─ subgoals_/ # intermediate prompts & replies
└─ wap_smart_replay_list_.json # final smart replay list for the agent
data_processed/exact_replay/
└─ wap_smart_replay_list_.json # final exact replay list for the agent
```
## Replay
```bash
python run_replay.py --model-provider openai --wap_replay_list data_processed/exact_replay/wap_exact_replay_list_.json --max-concurrent 1
```
For **smart-replay**, replace the path with a smart‑replay JSON to test this mode.
## Convert to MCP Server
```bash
python wap_replay\generate_mcp_server.py --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
```bash
python wap_service.py
```
In the second termnial
```bash
python mcp_client.py
```
Then enter your prompt in the second terminal
```bash
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](https://github.com/OTA-Tech-AI/web-agent-protocol/releases) for more details.
## 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