WebMCP
starsforks
How to install WebMCP?
miguelspizza/webmcp
$git clone https://github.com/MiguelsPizza/WebMCP> [!IMPORTANT] > 🚨 The WebMCP API has been accepted as a W3C deliverable and is transitioning to official web standard development. The community and all related work has moved to the WebMCP explainer repository. Please join us the
README.md
| 1 | > [!IMPORTANT] |
| 2 | > 🚨 The WebMCP API has been accepted as a W3C deliverable and is transitioning to official web standard development. The community and all related work has moved to the [WebMCP explainer repository](https://github.com/webmachinelearning/webmcp). Please join us there! 🚨 |
| 3 | |
| 4 | > [!IMPORTANT] |
| 5 | > 📝 Repository Status: The MCP-B extension is no longer open source. This repository represents an older version of the codebase and is maintained for historical reference only. All open source content (transports, etc.) have been ported to the [WebMCP Github Org](https://github.com/WebMCP-org). |
| 6 | |
| 7 | |
| 8 | |
| 9 | # WebMCP: |
| 10 | |
| 11 | [](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa) |
| 12 | [](https://www.npmjs.com/package/@mcp-b/transports) |
| 13 | [](https://www.gnu.org/licenses/agpl-3.0) |
| 14 | [](https://github.com/MiguelsPizza/WebMCP/actions) |
| 15 | [](https://github.com/MiguelsPizza/WebMCP/stargazers) |
| 16 | |
| 17 | [🚀 Quick Start](#quick-start) • [✨ Live Demo](#live-demo) • [📚 Documentation](https://mcp-b.ai) • [🤝 Contributing](#contributing) |
| 18 | |
| 19 | ## Join Our Community |
| 20 | |
| 21 | [](https://discord.gg/a9fBR6Bw) |
| 22 | |
| 23 | |
| 24 | |
| 25 |  |
| 26 | |
| 27 | ## The protocol |
| 28 | |
| 29 | WebMCP is the underlying protocol which MCP-B implements. It is a protocol which exposes function in your browser javascript to LLM's as MCP tools. |
| 30 | |
| 31 | For a more indepth understanding, refer here: https://mcp-b.ai/blogs |
| 32 | |
| 33 | ## Live Demo |
| 34 | |
| 35 | See MCP-B in action right away: |
| 36 | |
| 37 | ### Examples |
| 38 | |
| 39 | Check out our examples repository: **[MCP-B Examples](https://github.com/WebMCP-org/examples)** |
| 40 | |
| 41 | The examples repository contains: |
| 42 | - **Vanilla TypeScript Demo**: A simple todo app where MCP tools allow AI to manage tasks |
| 43 | - **React Demo**: Modern React application with MCP-B integration |
| 44 | - **Script Tag Demo**: The simplest integration - add MCP-B to any website using just a script tag |
| 45 | |
| 46 | ### Community Examples |
| 47 | |
| 48 | - **[Vue ](https://github.com/bestian/vue-MCP-B-demo)** example By [Besian](https://github.com/bestian) |
| 49 | - **[Nuxt 3](https://github.com/mikechao/nuxt3-mcp-b-demo)** example by [Mike Chao](https://github.com/mikechao/) |
| 50 | |
| 51 | These demos highlight how MCP-B integrates into websites without needing complex setups. Install the [MCP-B Chrome Extension](https://chromewebstore.google.com/detail/mcp-b/daohopfhkdelnpemnhlekblhnikhdhfa?authuser=0&hl=en) to interact with the tools via the extension's chat interface or tool inspector. |
| 52 | |
| 53 | ## What is MCP-B? |
| 54 | |
| 55 | MCP-B extends the Model Context Protocol (MCP) with browser-specific transports, allowing your website to act as an MCP server. Websites expose existing functionality (e.g., APIs, forms, or state) as structured tools that AI agents can call directly. |
| 56 | |
| 57 | Key components: |
| 58 | |
| 59 | - **Tab Transports**: Use `postMessage` for communication between your website's MCP server and clients in the same tab. |
| 60 | - **Extension Transports**: Use Chrome's runtime messaging for communication with browser extensions. |
| 61 | |
| 62 | This setup enables AI to interact with your site deterministically, respecting user authentication (e.g., session cookies) and scoping tools to specific pages or user states. |
| 63 | |
| 64 | ## Quick Start |
| 65 | |
| 66 | Get MCP-B running on your website in minutes. This guide focuses on adding an MCP server to expose tools, using the examples as a blueprint. |
| 67 | |
| 68 | ### Prerequisites |
| 69 | |
| 70 | - **Node.js 22.12+** (check with `node --version`) |
| 71 | - **pnpm 10+** (install via `npm install -g pnpm`) |
| 72 | - A website with JavaScript (vanilla, React, |
People who liked this also viewed
6 picksType
- fastmcp🚀 The fast, Pythonic way to build MCP servers and clients.MCP ServersJul 2026
- playwright-mcpPlaywright MCP serverMCP ServersJul 2026
- ext-appsOfficial repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP serversMCP ServersJul 2026
- langchain-mcp-adaptersLangChain 🔌 MCPMCP ServersJul 2026
- mcporterCall MCPs via TypeScript, masquerading as simple TypeScript API. Or package them as cli.MCP ServersJul 2026
- mcp-proxyA bridge between Streamable HTTP and stdio MCP transportsMCP ServersJul 2026
