navigator.modelContext API.
If you are new to WebMCP, start with the Tutorials instead.
Adoption
Get WebMCP running in your project.Choose a Runtime
Decide between the native browser API, the strict polyfill, or the full
@mcp-b/global runtime based on your project’s needs.Add Tools to an Existing App
Expose existing application functionality as WebMCP tools without rewriting your app.
Use Schemas and Structured Output
Define input schemas with JSON Schema, Standard Schema, or Zod, and add output schemas for typed agent responses.
Register Prompts and Resources
Expose prompts and resources through the MCP-B extension API.
Frameworks
Wire WebMCP into your frontend framework.Integrate with your framework
Register tools in React, Vue, Svelte, Angular, Next.js, Astro, or vanilla JS using framework-native lifecycle patterns.
Connectivity
Connect tools across tabs, iframes, and desktop agents.Connect Desktop Agents with Local Relay
Bridge browser tools to desktop AI agents like Claude Desktop or Cursor.
Bridge Tools Across Iframes
Expose tools from embedded iframes to the parent page.
Use DevTools MCP
Connect desktop agents to the browser through Chrome DevTools Protocol.
Debug and Troubleshoot
Diagnose tool registration, transport, and execution issues.
Test Native and Polyfill
Write tests that work against both native and polyfilled implementations.