WebMCP (Web Model Context Protocol) is a proposed W3C web standard being incubated by the Web Machine Learning Community Group. It enables websites to expose AI-callable tools through the browser's document.modelContext API, allowing AI agents to discover and interact with web applications directly in the browser.
WebMCP is optimized for browser-based, user-present interactions with built-in web security features, leveraging the browser's origin-based security model and user authentication. Learn more in the W3C WebMCP Explainer.
MCP-B bridges the gap between WebMCP and the Model Context Protocol (MCP), serving two critical functions:
- API Implementation — Provides a polyfill that implements the
document.modelContextinterface for browsers lacking native support - Protocol Translation — Converts between WebMCP's web-native format and the MCP protocol, enabling cross-compatibility
MCP-B creates interoperability by enabling WebMCP-formatted tools to function with MCP clients (like Claude Desktop), and MCP-formatted tools to operate within WebMCP-enabled browsers. This allows both standards to evolve independently without breaking existing implementations.
All MCP-B libraries and SDKs are open source (MIT Licensed), enabling developers to build WebMCP-enabled applications freely. However, the browser extension for connecting to MCP clients is not open source.
For developers interested in contributing to browser extension development, check out the POC MCP-B Extension (AGPL-3.0) by the community.
- Browser-Native MCP — Implements W3C Web Model Context API for standardized AI tool registration
- Secure by Default — Leverages browser authentication and origin-based security model
- Zero Backend Required — Expose tools directly from your frontend application
- Agent-Ready — Works with Claude, ChatGPT, and any MCP-compatible AI client
- Framework Agnostic — React hooks, vanilla JS, and framework-specific integrations available
# Install the core package
npm install @mcp-b/global
# Or use React hooks
npm install @mcp-b/react-webmcp// Register a tool that AI agents can discover and call
document.modelContext.registerTool({
name: "get_user_profile",
description: "Get the current user's profile information",
inputSchema: {
type: "object",
properties: {},
},
handler: async () => {
return { name: "John Doe", email: "[email protected]" };
}
});| Package | Description | Links |
|---|---|---|
@mcp-b/global |
W3C Web Model Context API polyfill | npm |
@mcp-b/react-webmcp |
React hooks for WebMCP | npm |
@mcp-b/transports |
Browser transport implementations | npm |
@mcp-b/webmcp-ts-sdk |
TypeScript SDK for MCP-B | npm |
@mcp-b/extension-tools |
Chrome Extension API wrappers | npm |
- Documentation — Comprehensive guides, API references, and examples
- Live Demo — Interactive tool examples and playground
- Browser Extension — Chrome extension for tool discovery
- Best Practices — Tool design patterns and security guidelines
- AI Framework Integration — Connect with Assistant-UI, AG-UI, and more
- Discord — Get help, share ideas, and collaborate
- GitHub Issues — Report bugs and request features
- Contributing — Learn how to contribute to MCP-B
- Code of Conduct — Our community standards
- Interactive Dashboards — Let AI agents query metrics and visualize data
- E-commerce Sites — Enable natural language product search and checkout
- Documentation Sites — AI-powered search and content generation
- SaaS Applications — Expose app functionality as composable AI tools
- Admin Panels — Voice and chat-based admin controls
MCP-B is open source software licensed under the MIT License.