web-agent-protocol

by OTA-Tech-AIVerified

🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support

506
Stars
88
Forks
Python
Language
8/23/2026
Added
View on GitHubDownload ZIP

⚠️ Third-Party Software Notice

This skill is third-party open-source software developed and hosted independently on GitHub. SkillTip is an informational directory and does not control or maintain the underlying repository. Any security checks displayed are automated and limited in scope. Review the source code before installing.

Read the Terms of Service

Installation

Add to your Claude Code skills directory:

# Add to your Claude Code skills
git clone https://github.com/OTA-Tech-AI/web-agent-protocol

Getting Started

Guides for using skills like web-agent-protocol.

Security Report

Verified

Last scanned: —

{
  "status": "PASSED",
  "issues": []
}

README.md

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

Frequently Asked Questions

What is web-agent-protocol?

web-agent-protocol is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by OTA-Tech-AI. 🌐Web Agent Protocol (WAP) - Record and replay user interactions in the browser with MCP support. It has 506 GitHub stars.

Is web-agent-protocol safe to use?

Yes. web-agent-protocol passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install web-agent-protocol?

Clone the repository with "git clone https://github.com/OTA-Tech-AI/web-agent-protocol" and add it to your Claude Code skills directory (see the Installation section above).

What programming language is web-agent-protocol written in?

web-agent-protocol is primarily written in Python. It is open-source under OTA-Tech-AI on GitHub, so you can review or fork the full source.

Are there alternatives to web-agent-protocol?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh web-agent-protocol against similar tools.

Comments (0)

No comments yet. Be the first to share your thoughts!

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI Agentsai-agentsbrainstorming
View details

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI Agentsclaude-codeai-tools
View details

claude-code

by anthropics

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

120,03119,897Shell
AI Agents
View details

Developers Also Liked

Based on votes and bookmarks from developers who liked this skill

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI Agentsai-agentsanthropicclaude-code
View details
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI Agentsai-agentsbrainstorming
View details

n8n

by n8n-io

12

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

201,88160,308TypeScript
MCP Serversapisai-tools
View details

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI Agentsai-agentsanthropicclaude-code
View details

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI Agentsclaude-codeai-tools
View details