WebMCP documentation and developer tools

Browser API guides, working tutorials, polyfills, React packages, extensions, and debugging tools.

New: The OpenAI WebMCP Challenge is live. Enter the challenge.

Get started Build your first tool Browse the packages

Read What is WebMCP?, WebMCP vs MCP, and Choose a runtime.

Live on this page

This page has a real WebMCP tool. Try calling it.

The tool below is registered right now using document.modelContext.registerTool(). Use the Rook extension or Chrome’s native WebMCP support to call it from an AI agent.

Loading…

Tool registration (live)

if (!document.modelContext) throw new Error("WebMCP is unavailable");
await document.modelContext.registerTool({
  name: "get_docs_info",
  description: "Returns info about the current docs page",
  inputSchema: {
    type: "object",
    properties: {
      include_headings: { type: "boolean" },
      include_links: { type: "boolean" },
    },
  },
  execute: (args) => {
    const info = {
      title: document.title,
      url: location.href,
      headingCount: document.querySelectorAll("h1,h2,h3").length,
      linkCount: document.querySelectorAll("a[href]").length,
    };
    return {
      content: [{ type: "text", text: JSON.stringify(info) }]
    };
  }
});

Resource registration (MCP-B)

resource.js

import '@mcp-b/global';

const modelContext = document.modelContext;
if (typeof modelContext?.registerResource !== 'function') {
  throw new Error('MCP-B extensions are unavailable');
}

modelContext.registerResource({
  uri: 'app://config',
  name: 'App Configuration',
  mimeType: 'application/json',
  read: async () => ({
    contents: [{ uri: 'app://config', text: JSON.stringify(config) }]
  })
});

Continue with the first tool tutorial, the official @w3c/webmcp-polyfill, or the @mcp-b/webmcp-ts-sdk reference.

Packages

Browse the package set in one place.

These are the main packages in the workspace, grouped by the standard boundary.

Core WebMCP

Package	Description
`@mcp-b/webmcp-polyfill` View webmcp-polyfill on GitHub View webmcp-polyfill on npm	Deprecated. Use `@w3c/webmcp-polyfill` for the standard API; this package keeps temporary declarative tools
`usewebmcp` View usewebmcp on GitHub View usewebmcp on npm	React hook for tool registration with automatic lifecycle

MCP-B

Package	Description
`@mcp-b/global` View global on GitHub View global on npm	Entry point — sets up polyfill + MCP server in one import
`@mcp-b/webmcp-ts-sdk` View webmcp-ts-sdk on GitHub View webmcp-ts-sdk on npm	WebMCP adapter over the official MCP TypeScript SDK
`@mcp-b/transports` View transports on GitHub View transports on npm	PostMessage and WebSocket transports for cross-context communication
`@mcp-b/mcp-iframe` View mcp-iframe on GitHub View mcp-iframe on npm	Bridges tools across iframes via PostMessage
`@mcp-b/react-webmcp` View react-webmcp on GitHub View react-webmcp on npm	React provider and hooks for MCP-B extensions

Calling tools

Package	Description
`@mcp-b/webmcp-local-relay` View webmcp-local-relay on GitHub View webmcp-local-relay on npm	Bridges browser tools to desktop MCP clients via WebSocket + stdio