Webmcp Skill
- 2 repo stars
- Updated April 13, 2026
- ripulio/web-mcp
Guide using the navigator.modelContext (WebMCP) API in web pages to expose page-specific tools to agents.
About
A skill with instructions for using the navigator.modelContext (WebMCP) API inside web pages. Developers use it to expose page-specific tools to agents directly from the browser context when integrating agent control into a site.
- navigator.modelContext API
- WebMCP in web pages
- Page-exposed tools
Webmcp Skill by the numbers
- Data as of Jul 7, 2026 (Skillselion catalog sync)
/plugin marketplace add ripulio/web-mcp/plugin install webmcp-skill@ripul-pluginsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| repo stars | ★ 2 |
|---|---|
| Last updated | April 13, 2026 |
| Repository | ripulio/web-mcp ↗ |
What it does
Guide using the navigator.modelContext (WebMCP) API in web pages to expose page-specific tools to agents.
README.md
Web MCP
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)
How It Works
┌─────────────────────────────────┐
│ 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 │
└─────────────────────────────────┘
Packages
| 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 |
Quick Start
1. Install the Chrome Extension
See web-mcp-extension for installation instructions.
2. Configure Your AI Assistant
Add the MCP server to your AI assistant's configuration:
{
"mcpServers": {
"web-mcp": {
"command": "npx",
"args": ["@ripulio/web-mcp-server"]
}
}
}
3. Enable Browser Control
In the extension settings, enable browser control to allow the MCP server to interact with your browser.
Development
# Install dependencies
npm install
# Build all packages
npm run build
# Run tests
npm test
# Lint and format
npm run lint
npm run format
Links
License
MIT
Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10