Shipping WebMCP before the browsers catch up

Chrome carries WebMCP behind a flag or an origin trial. Edge is experimental. Firefox and Safari have committed to nothing. If you wait for universal support before writing a tool, you will write your first one in a year that has not been announced.

The MCP-B project fills the gap with a polyfill and a set of adapters. It is the practical route for anyone who wants tools in production this quarter.

The packages

The smallest useful setup

import "@mcp-b/webmcp-polyfill";

await document.modelContext.registerTool({
  name: "get_page_summary",
  description: "Return the title, canonical URL and section count of this page.",
  inputSchema: { type: "object", properties: {} },
  annotations: { readOnlyHint: true },
  execute: () => ({
    content: [{
      type: "text",
      text: JSON.stringify({
        title: document.title,
        url: location.href,
        sections: document.querySelectorAll("h2").length,
      }),
    }],
  }),
});

Import the polyfill before anything that touches document.modelContext. It is a no-op where the browser already implements the API, so there is no branch to maintain.

React: let the lifecycle own registration

Manual registration in an effect works, but the hook exists because getting cleanup wrong is the default outcome — and a stale tool is worse than a missing one. An agent calling add_to_cart from a page the user left is a bug your analytics will never show you.

import { useWebMCP } from "usewebmcp";

function ProductPage({ product }) {
  useWebMCP({
    name: "check_compatibility",
    description:
      `Check whether an accessory fits the ${product.name}. Returns a verdict and the reason.`,
    inputSchema: {
      type: "object",
      properties: { accessoryId: { type: "string", description: "Accessory SKU" } },
      required: ["accessoryId"],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ accessoryId }) => checkFit(product.id, accessoryId),
  });

  return <ProductView product={product} />;
}

Where the seams are

• A polyfill cannot create a consumer. It gives your code somewhere to register. Whether an agent reads that registration depends on the agent, and today the reliable one is the ChatGPT desktop app.
• Pin your versions. The specification moved the API in July 2026. A polyfill pinned before that may still target navigator — see migration.
• The relay crosses a trust boundary. @mcp-b/webmcp-local-relay exposes page tools to desktop clients over a local socket. That is powerful and it is exactly the kind of bridge to keep out of production builds.
• Iframe bridging needs a policy. Cross-origin iframes need allow="tools" regardless of transport.