web-agent-protocol
starsforks
How to install web-agent-protocol?
ota-tech-ai/web-agent-protocol
$git clone https://github.com/OTA-Tech-AI/web-agent-protocolREADME.md
| 1 | <!-- markdownlint-disable first-line-h1 --> |
| 2 | <!-- markdownlint-disable html --> |
| 3 | <!-- markdownlint-disable no-duplicate-header --> |
| 4 | |
| 5 | <div align="center"> |
| 6 | <img src="chrome-extension/assets/beholder-tool-kit-long.png" width="100%" alt="OTA-tool-kits" style="border-radius: 10px;" /> |
| 7 | </div> |
| 8 | <br> |
| 9 | <div align="center" style="line-height: 1;"> |
| 10 | <a href="https://www.otatech.ai/"><img alt="Homepage" |
| 11 | src="https://img.shields.io/badge/Visit-otatech.ai-blue"/></a> |
| 12 | <a href="https://huggingface.co/OTA-AI/OTA-v1"><img alt="Hugging Face" |
| 13 | src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-OTA%20AI-ffc107?color=ffc107&logoColor=white"/></a> |
| 14 | <a href="https://github.com/OTA-Tech-AI/webagentprotocol/blob/main/LICENSE"><img alt="Code License" |
| 15 | src="https://img.shields.io/badge/Code_License-MIT-f5de53?&color=f5deff"/></a> |
| 16 | <br><br><br> |
| 17 | </div> |
| 18 | |
| 19 | # Web Agent Protocol |
| 20 | |
| 21 | ## Overview |
| 22 | |
| 23 | 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: |
| 24 | |
| 25 | 1. **Collect** user‑interaction data with the [OTA‑WAP Chrome extension](https://github.com/OTA-Tech-AI/webagentprotocol/tree/main/chrome-extension). |
| 26 | 2. **Convert** the raw event stream into either **_exact‑replay_** or **_smart‑replay_** action lists. |
| 27 | 3. **Convert** recorded actions into **_MCP_** servers for reuse by any agent or user |
| 28 | 4. **Replay** those lists using the **_WAP-Replay_** protocol to ensure accurate browser operations. |
| 29 | |
| 30 | ### WAP FULL DEMO |
| 31 | |
| 32 | [](https://www.youtube.com/watch?v=joh9FXJfnwk) |
| 33 | |
| 34 | ### Without WAP |
| 35 |  |
| 36 | |
| 37 | ### WAP Record |
| 38 |  |
| 39 | |
| 40 | ### WAP Replay |
| 41 |  |
| 42 | |
| 43 | ## Example using WAP |
| 44 |  |
| 45 | |
| 46 | ## Setup |
| 47 | Install the dependencies with the following command: |
| 48 | |
| 49 | Create a conda env |
| 50 | |
| 51 | ```bash |
| 52 | conda create -n WAP python=3.11 |
| 53 | ``` |
| 54 | |
| 55 | Activate the conda env |
| 56 | |
| 57 | ```bash |
| 58 | conda activate WAP |
| 59 | ``` |
| 60 | |
| 61 | Install the dependencies |
| 62 | |
| 63 | ```bash |
| 64 | pip install -r requirements.txt |
| 65 | ``` |
| 66 | |
| 67 | Setup your repo source path: |
| 68 | ``` |
| 69 | set PYTHONPATH=C:/path/to/webagentprotocol # for Windows |
| 70 | export PYTHONPATH=/path/to/webagentprotocol # for Linux |
| 71 | ``` |
| 72 | |
| 73 | Create **.env** file under the repo root directory with your own API keys: |
| 74 | ``` |
| 75 | OPENAI_API_KEY=sk-proj-... |
| 76 | DEEPSEEK_API_KEY=sk-... |
| 77 | ``` |
| 78 | |
| 79 | ## Record |
| 80 | |
| 81 | ### WAP record extension |
| 82 | 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. |
| 83 | |
| 84 | ### Start data‑collection server |
| 85 | |
| 86 | Run the following command to start the server to collect data from the extension: |
| 87 | ```bash |
| 88 | python action_collect_server.py |
| 89 | ``` |
| 90 | **Once the server is up, you can start to record from the page using WAP Chrome extension.** |
| 91 | |
| 92 | 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. |
| 93 | Each session will be saved to: |
| 94 | |
| 95 | ```bash |
| 96 | data/YYYYMMDD/taskid/summary_event_<timestamp>.json |
| 97 | ``` |
| 98 | |
| 99 | An example of the formatted data which you will received in the WAP backend server is like: |
| 100 | |
| 101 | ```json |
| 102 | { |
| 103 | "taskId": "MkCAhQsHgXn7YgaK", |
| 104 | "type": "click", |
| 105 | "actionTimestamp": 1746325231479, |
| 106 | "eventTarget": { |
| 107 | "type": "click", |
| 108 | "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-d |
People who liked this also viewed
6 picksType
- playwright-mcpPlaywright MCP fork that works with Cloudflare Browser RenderingMCP ServersApr 2026
- Playwright MCPBrowser automation for agents via accessibility snapshotsMCP Servers6 days ago
- chrome-devtools-mcpChrome DevTools for coding agentsMCP ServersJul 2026
- browser-operator-coreBrowser Operator - The AI browser with built in Multi-Agent platform! Open source alternative to ChatGPT Atlas, Perplexity Comet, Dia and Microsoft CoPilot Edge BrowserMCP ServersMar 2026
- fetcher-mcpMCP server for fetch web page content using Playwright headless browser.MCP ServersJan 2026
- mcpBrowser MCP is a Model Context Provider (MCP) server that allows AI applications to control your browserMCP ServersApr 2025
