Browser tools, protocol, and runtime

WebMCP + MCP = MCP-B

MCP-B combines the WebMCP page API with MCP-style transport and extensions in one browser runtime. Use WebMCP for page-level tool registration. Use MCP-B for resources, prompts, relay, React hooks, and browser tooling. You can start with WebMCP and add MCP-B later.

Get started Build your first tool Browse the packages

Read What is WebMCP?, WebMCP vs MCP, and Native vs Polyfill vs Global.

Live on this page

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

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

Tool registration (live)

navigator.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.ts

navigator.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 @mcp-b/webmcp-polyfill reference, 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`	Polyfills `navigator.modelContext` for browsers without native support
`@mcp-b/webmcp-types`	TypeScript types for the WebMCP standard surface
`usewebmcp`	React hook for tool registration with automatic lifecycle

MCP-B

Package	Description
`@mcp-b/global`	Entry point — sets up polyfill + MCP server in one import
`@mcp-b/webmcp-ts-sdk`	BrowserMcpServer with prompts, resources, sampling, elicitation
`@mcp-b/transports`	PostMessage and WebSocket transports for cross-context communication
`@mcp-b/mcp-iframe`	Bridges tools across iframes via PostMessage
`@mcp-b/react-webmcp`	React provider and hooks for MCP-B extensions

Calling tools

Package	Description
`@mcp-b/webmcp-local-relay`	Bridges browser tools to desktop MCP clients via WebSocket + stdio
`@mcp-b/extension-tools`	Chrome extension tools for reading and interacting with pages
`@mcp-b/chrome-devtools-mcp`	MCP server that connects to Chrome DevTools Protocol

Start Here

WebMCP + MCP = MCP-B

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

Browse the package set in one place.