Skip to main content
This section contains how-to guides for WebMCP. Each guide addresses a specific goal and assumes you already understand the basics of the WebMCP standard and the 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.