A monorepo implementing the Web Model Context Protocol for browser integration.
The Web MCP specification defines a navigator.modelContext API that allows web pages to register tools for AI assistants to discover and invoke. This repo provides:
- An MCP server that connects AI assistants to browser tabs
- A Chrome extension that exposes page tools to the MCP server
- A polyfill for the
navigator.modelContextAPI - A registry of pre-built tools that can be injected into pages (optional)
┌─────────────────────────────────┐
│ AI Assistant (Claude, etc.) │
└───────────────┬─────────────────┘
│ stdio
▼
┌─────────────────────────────────┐
│ web-mcp-server (CLI) │
│ MCP server for browser control │
└───────────────┬─────────────────┘
│ WebSocket
▼
┌─────────────────────────────────┐
│ Chrome Extension │
│ Exposes page tools via MCP │
└───────────────┬─────────────────┘
│
▼
┌─────────────────────────────────┐
│ Web Pages │
│ navigator.modelContext API │
└─────────────────────────────────┘
| Package | Description |
|---|---|
| web-mcp-server | MCP server CLI that enables AI assistants to control browser tabs and invoke page tools |
| web-mcp-extension | Chrome extension for browsing/installing tools and connecting to MCP servers |
| web-mcp-devtools | Chrome DevTools panel for inspecting and testing tools on pages |
| webmcp-polyfill | Browser polyfill implementing the navigator.modelContext API |
See web-mcp-extension for installation instructions.
Add the MCP server to your AI assistant's configuration:
{
"mcpServers": {
"web-mcp": {
"command": "npx",
"args": ["@ripulio/web-mcp-server"]
}
}
}In the extension settings, enable browser control to allow the MCP server to interact with your browser.
# Install dependencies
npm install
# Build all packages
npm run build
# Run tests
npm test
# Lint and format
npm run lint
npm run formatMIT