The WebMCP Ecosystem: Polyfills, Tools, and Platform Integrations

The Ecosystem Landscape

WebMCP is more than a browser API — it is a growing ecosystem of polyfills, developer tools, framework integrations, and platform adapters. Understanding the landscape helps you choose the right tools for your implementation.

MCP-B: The Core Polyfill

The MCP-B project, originally created by Alex Nahas at Amazon to solve internal authentication challenges, provides the critical bridge for browsers that lack native WebMCP support.

Installation

npm install @mcp-b/webmcp-polyfill

How It Works

The polyfill implements the full navigator.modelContext API surface. It auto-detects native browser support and only activates when needed. When Chrome ships native support, the polyfill steps aside with no code changes required from developers.

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

// Works identically whether native or polyfilled
navigator.modelContext.registerTool({
  name: "my_tool",
  description: "Description for AI agents",
  inputSchema: { type: "object", properties: {} },
  execute: async () => ({ result: "success" })
});

NPM Package Ecosystem

Package	Purpose
@mcp-b/webmcp-polyfill	Core polyfill for navigator.modelContext
@mcp-b/webmcp-types	TypeScript type definitions
@mcp-b/global	Full MCP-B runtime with extension APIs
@mcp-b/transports	TabClientTransport, ExtensionClientTransport
@mcp-b/react-webmcp	React hooks for WebMCP
@mcp-b/extension-tools	Pre-built Chrome Extension API tools
@mcp-b/smart-dom-reader	AI-friendly DOM content extraction

React Integration

The @mcp-b/react-webmcp package provides hooks that make WebMCP integration natural in React applications:

import { useWebMCPTool } from '@mcp-b/react-webmcp';

function ProductSearch() {
  useWebMCPTool({
    name: "search_products",
    description: "Search the product catalog",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" }
      }
    },
    execute: async (params) => {
      return await searchProducts(params.query);
    }
  });

  return <div>{/* Your search UI */}</div>;
}

The hook automatically registers the tool when the component mounts and unregisters it on unmount, keeping tool availability in sync with the rendered UI.

Developer Tools

Model Context Tool Inspector

Released by GoogleChromeLabs, this Chrome Extension lets developers inspect web pages to verify that WebMCP tools are correctly configured. It shows:

• All registered tools on the current page
• Tool schemas and descriptions
• Invocation history and responses
• Schema validation errors

WordPress Integration

WordPress 6.9 introduced the Abilities API, and the community has built bridges to WebMCP:

• WordPress MCP Adapter: Exposes WordPress and WooCommerce functionality as MCP tools for CLI and API agents.
• WebMCP Abilities Plugin: Bridges WordPress abilities to navigator.modelContext for browser-based agents.

Register once with wp_register_ability() and both transport layers pick it up automatically — server-side MCP for headless agent access, browser-side WebMCP for in-browser agent interaction.

Community Resources

• awesome-webmcp: A curated list of WebMCP resources, tools, and examples on GitHub.
• webmcp-starter: A DoorDash-style food delivery demo showcasing 9 AI agent tools.
• webmcp.dev: An open-source JavaScript library that adds a WebMCP widget to any website for LLM and agent interaction.

All MCP-B libraries are MIT licensed and open source, ensuring the ecosystem remains accessible to everyone building AI-integrated web experiences.