Turn any WebMCP webpage into live tools for your AI.
A headless Playwright bridge that discovers window.navigator.modelContext in any web application, validates its JSON schema, and pipes Claude’s tool calls directly to the live page DOM.
From web app to Claude in three steps.
No SDK compilation, no backend server setup, and no browser extension. Just point the bridge at your target URL.
1. Connect to any WebMCP URL
Point the bridge at your local dev server or live URL. Playwright launches a silent headless Chromium instance in milliseconds.
npx -y webmcp-bridge connect http://localhost:30002. Automatic In-Page Tool Discovery
The bridge scans window.navigator.modelContext, maps every tool to strict JSON Schema Draft-07, and exposes them via MCP.
npx -y webmcp-bridge discover http://localhost:30003. Claude Invokes Real DOM Actions
Claude Desktop or Claude Code executes in-page tools through stdio JSON-RPC. Results return directly from your client state.
claude mcp add webmcp -- npx -y webmcp-bridge connect http://localhost:3000See the bridge in action.
Choose a tool scenario below. Watch how webmcp-bridge translates Claude’s stdio JSON-RPC request across Chromium CDP directly into the live page DOM.
Calls search_inventory with JSON arguments.
{
"query": "wireless mouse",
"maxResults": 3
}Intercepts Stdio, validates schema with Zod, and executes inside page context.
Target executes registered execute() handler.
{
"found": 3,
"items": [
{
"id": "item_102",
"title": "Aerox 3 Wireless",
"price": "$79.99",
"stock": 14
},
{
"id": "item_105",
"title": "MX Master 3S",
"price": "$99.00",
"stock": 8
},
{
"id": "item_201",
"title": "Viper V2 Pro",
"price": "$129.99",
"stock": 3
}
]
}search_inventory()--> {
"jsonrpc": "2.0",
"id": "req-42",
"method": "tools/call",
"params": {
"name": "search_inventory",
"arguments": {
"query": "wireless mouse",
"maxResults": 3
}
}
}
<-- {
"jsonrpc": "2.0",
"id": "req-42",
"result": {
"content": [
{
"type": "text",
"text": "{\n \"found\": 3,\n \"items\": [\n {\n \"id\": \"item_102\",\n \"title\": \"Aerox 3 Wireless\",\n \"price\": \"$79.99\",\n \"stock\": 14\n },\n {\n \"id\": \"item_105\",\n \"title\": \"MX Master 3S\",\n \"price\": \"$99.00\",\n \"stock\": 8\n },\n {\n \"id\": \"item_201\",\n \"title\": \"Viper V2 Pro\",\n \"price\": \"$129.99\",\n \"stock\": 3\n }\n ]\n}"
}
],
"isError": false
}
}Configure your AI client in seconds.
Enter the address of your WebMCP-enabled application (local dev server or hosted URL) to generate the exact client configuration.
Works with Vite, Next.js, Webpack dev servers, or live staging URLs.
{
"mcpServers": {
"webmcp": {
"command": "npx",
"args": [
"-y",
"webmcp-bridge",
"connect",
"http://localhost:3000"
]
}
}
}~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.jsonBuilt on strict architectural guarantees.
WebMCP Bridge isn’t an ad-hoc screen scraper. It is an industrial-strength adapter built to W3C WebMCP drafts and the Model Context Protocol specification.
Zero Browser Extensions
No Chrome extensions to sideload, no manifest permissions, and no user profile pollution. Operates purely through standard Playwright CDP page evaluation.
Zero Telemetry & Local-First
Everything runs on your machine over stdio. No accounts, no external proxy servers, and no telemetry. Your page state never leaves your computer.
Strict Schema Normalization
Web developers write raw JSON schemas with varied styles. webmcp-bridge normalizes types, cleans forbidden keys, and enforces Zod compliance so LLMs never hallucinate arguments.
Sub-5ms Execution Latency
Direct in-memory page evaluation via Chromium DevTools Protocol. Invoking a DOM tool has near-zero overhead compared to traditional web scrapers.
Cached Binary Resolution
Automatically resolves existing system Chromium or Playwright headless-shell binaries. Boots instantly without triggering 200MB background browser downloads.
Spec-Compliant with WebMCP
Built around the emerging navigator.modelContext standard. When browsers implement native WebMCP, your applications are already fully compatible.
Why WebMCP Bridge over legacy automation?
| Dimension | webmcp-bridge | Headless Web Scraping | Browser Extensions |
|---|---|---|---|
| Protocol standard | Model Context Protocol (MCP) + WebMCP | Ad-hoc CSS selectors / XPath | Proprietary extension message passing |
| Installation friction | Single npx command, zero dependencies | Heavy custom scraper scripts per page | Manual unpacked extension installation |
| Tool Schema contract | Validated JSON Schema Draft-07 with Zod | Unstructured HTML text dumps | Variable JSON or message callbacks |
| AI Agent Compatibility | Claude Desktop, Claude Code, Cursor, Zed | Custom agent integration required | Browser-only extensions |
| Reliability on UI changes | Immune (calls registered JS methods, not DOM elements) | Fragile (breaks on CSS / layout tweaks) | Prone to extension background worker disconnects |
Frequently Asked Questions
Everything you need to know about WebMCP, Chromium CDP execution, and agent tool mapping.
WebMCP is an emerging browser standard (spearheaded via window.navigator.modelContext) allowing web applications to declare in-page tools, schema definitions, and callbacks directly in the client DOM. It turns web pages into live capability surfaces for AI agents.
Connect your web apps to Claude today.
Free and open-source under the MIT license. Works with Claude Desktop, Claude Code, Cursor, and any MCP-compliant agent.