Skip to content

nathan-gage/webmcp-bridge

Repository files navigation

Use tools from any website in any MCP client.

webmcp-bridge is a CLI and Chrome extension that bridge navigator.modelContext (Chrome 146+) to MCP over stdio. The extension intercepts WebMCP tool registrations from open tabs and forwards them over a localhost WebSocket to the CLI, which exposes them as standard MCP tools.

graph LR
    A[MCP Client] -->|stdio| B[CLI] -->|websocket| C[Extension] -->|navigator.modelContext| D[Website]
Loading

Why WebMCP?

Websites already orchestrate APIs, manage auth, and handle complex workflows. A traditional MCP server rebuilds all of that from scratch. WebMCP skips it — the website registers tools client-side via navigator.modelContext, and agents call them through the browser. The tools run through the same code paths as the UI, authenticated by whatever the user already has.

Traditional MCP WebMCP
Server build and host the website
Auth API keys, token refresh browser sessions
Business logic reimplement already in the UI
Maintenance track API changes website handles it

What this extension adds

WebMCP alone only talks to the browser's built-in agent. This extension bridges it to the MCP ecosystem — Claude, Cursor, Windsurf, any MCP client can call tools from any open tab.

Quick Start

npm install -g webmcp-bridge

Load the extension: chrome://extensions → Developer mode → Load unpacked → extension/

Add to your MCP client:

{
  "mcpServers": {
    "webmcp": {
      "command": "webmcp-bridge"
    }
  }
}

Open a WebMCP-enabled site. Extension badge goes green. Tools appear in your client.

Plugin Marketplace

Not every website supports WebMCP natively — the plugin marketplace lets you add tools to any site. Install community-authored bridge scripts that register MCP tools on pages that don't have them yet.

Click Manage Plugins in the extension popup to browse and install. Plugins are installed from GitHub — just enter a package specifier like user/repo and the extension handles the rest.

Want to build your own plugin? Use the /webmcp-marketplace-plugins skill in Claude Code to get started.

Development

bun install              # deps
bun test                 # unit tests
bun run test:e2e:pw      # Playwright E2E (needs Chrome Canary 146+)
bun run test:e2e:install # one-time: download Chrome for Testing Canary
bun run dev              # dev mode
bun run build            # build for npm
bun run lint             # lint
bun run chrome           # launch dev Chrome with extension
bun run chrome:dev       # launch dev Chrome + CLI together

Security

Localhost-only (127.0.0.1), random port (13100-13199), 256-bit shared secret, origin-validated, nonce-protected, 0700/0600 file perms. Details in CLAUDE.md.

License

MIT

About

bridge webmcp to your local agents

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors