WebMCP-native browser agent that runs inside your real Chrome
WebClaw
A WebMCP-native browser agent that runs inside your real Chrome — control it from Claude, Cursor, and any MCP client.
Why WebClaw?
| WebClaw | browser-use | Playwright MCP | |
|---|---|---|---|
| Runs in real Chrome | Yes (extension) | No (CDP) | No (Playwright) |
| User's logged-in sessions | Yes | No | No |
| Bot detection | Resistant | Vulnerable | Vulnerable |
| WebMCP native tools | Yes | No | No |
| Page understanding | @ref a11y tree |
Screenshots | DOM / Screenshots |
WebClaw runs as a Chrome extension, so it sees exactly what you see — cookies, logins, extensions, and all. No headless browser, no CDP injection, no bot flags.
Quick Start
1. Configure your MCP client
Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"webclaw": {
"command": "npx",
"args": ["-y", "webclaw-mcp"]
}
}
}
Config file locations:
- macOS:
~/Library/Application Support/Claude/claude_desktop_config.json - Linux:
~/.config/Claude/claude_desktop_config.json - Windows:
%APPDATA%\Claude\claude_desktop_config.json
Claude Code
claude mcp add webclaw -- npx -y webclaw-mcp
Cursor
Add to .cursor/mcp.json in your project root:
{
"mcpServers": {
"webclaw": {
"command": "npx",
"args": ["-y", "webclaw-mcp"]
}
}
}
VS Code (Copilot)
Add to .vscode/mcp.json in your project root:
{
"servers": {
"webclaw": {
"type": "stdio",
"command": "npx",
"args": ["-y", "webclaw-mcp"]
}
}
}
Windsurf
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"webclaw": {
"command": "npx",
"args": ["-y", "webclaw-mcp"]
}
}
}
2. Load the Chrome extension
- Download the latest `webclaw-extension.zip` from the Releases page and unzip
- Open
chrome://extensions/→ enable Developer mode - Click Load unpacked → select the
dist/folder
Or build from source
git clone https://github.com/kuroko1t/webclaw.git && cd webclaw && pnpm install && pnpm build
Then load packages/extension/dist/ as above.
3. Try it
Restart your MCP client and ask:
"Go to wikipedia.org and search for Model Context Protocol"
Chrome launches automatically on the first tool call. The Side Panel shows all activity in real-time.
How It Works
flowchart LR
LLM["AI Assistant"]
MCP["MCP Server"]
EXT["Chrome Extension"]
CS["Content Script"]
LLM -- "stdio" --> MCP -- "WebSocket" --> EXT --> CS
style LLM fill:#7b2d8b,stroke:#333,color:#fff
style MCP fill:#1a5276,stroke:#333,color:#fff
style EXT fill:#1e8449,stroke:#333,color:#fff
style CS fill:#b7950b,stroke:#333,color:#fff
- The AI calls MCP tools (
navigate_to,page_snapshot,click, ...) - The MCP server forwards requests to the Chrome extension via WebSocket
- The content script reads the page as a compact accessibility tree with
@reflabels - The AI picks the right
@refand acts — no pixel coordinates, no CSS selectors
`page_snapshot` output
[page "Wikipedia, the free encyclopedia"]
[search]
[form]
[@e3 searchbox "Search Wikipedia"] ← AI targets this
[@e4 button "Search"] ← and clicks this
[main]
[heading[1] "Welcome to Wikipedia"]
[group]
[heading[2] "From today's featured article"]
...
Every interactive element gets a stable @ref label. The AI reads the tree, picks the right @ref, and calls click / type_text / select_option.
MCP Tools (21)
Page Interaction — navigate, snapshot, click, hover, type, select, drop files, screenshot, dialog, evaluate
| Tool | Parameters | Description |
|---|---|---|
navigate_to |
url, tabId? |
Navigate to a URL |
page_snapshot |
focusRegion?, interactiveOnly?, tabId? |
Get a compact accessibility tree with @ref labels |
click |
ref, snapshotId, tabId? |
Click an element by its @ref label |
hover |
ref, snapshotId, tabId? |
Hover over an element to reveal hidden UI (dropdowns, tooltips) |
type_text |
ref, text, `sn |
Tools (5)
navigate_toNavigate to a URLpage_snapshotGet a compact accessibility tree with @ref labelsclickClick an element by its @ref labelhoverHover over an element to reveal hidden UItype_textType text into an elementConfiguration
{"mcpServers": {"webclaw": {"command": "npx", "args": ["-y", "webclaw-mcp"]}}}