EcosystemToolsPolyfillWebMCP

WebMCP Polyfill Ecosystem: Every Library and Tool You Need in 2026

Q: Do I need the polyfill if my users only use modern browsers?

Yes, for now. Even the latest Chrome and Firefox builds don\'t have full native WebMCP support yet. The polyfill ensures consistent behavior across all browsers and auto-detects native support so there\'s zero performance cost once browsers catch up.

Q: Is the React hook compatible with Next.js App Router?

Yes. The useWebMCPTool hook works in client components. Add the "use client" directive at the top of any component that registers abilities. Server components don\'t need WebMCP since AI agents interact through the browser.

David Park

·February 14, 2026·Updated March 26, 2026·11 min read

Why the Ecosystem Matters More Than the Spec

Let me be blunt with you. The WebMCP specification is brilliant. But a spec by itself doesn't build anything.

Think of it like HTML in 1995. The spec existed, sure. But developers needed browsers, editors, and libraries before the web actually took off.

WebMCP is in that exact same moment right now. The spec tells AI agents how to discover and use your site's capabilities. But without polyfills, dev tools, and framework integrations, you're stuck reading documentation instead of shipping code.

So I put together this complete guide to every tool in the WebMCP ecosystem. Whether you're adding AI-agent support to a React app, a WordPress blog, or a static site, you'll find exactly what you need here.

And here's the good news. Most projects only need one or two packages to get started. The ecosystem is growing fast, but it's not overwhelming yet.

MCP-B: The Polyfill That Makes WebMCP Work Everywhere

If you only install one thing from this guide, make it MCP-B. This is the polyfill that bridges the gap between browsers that support WebMCP natively and those that don't.

Right now, native WebMCP support is still rolling out. MCP-B ensures your site works for every AI agent today, not just the ones running cutting-edge browsers.

Installation and Setup

Getting started takes about 30 seconds. Install via npm and add a single import to your entry file.

npm install @mcp-b/webmcp-polyfill

Then in your main JavaScript or TypeScript file:

import { initWebMCP } from '@mcp-b/webmcp-polyfill';

initWebMCP({
  abilities: [
    {
      name: 'search-products',
      description: 'Search the product catalog by keyword',
      parameters: {
        query: { type: 'string', required: true },
        category: { type: 'string', required: false }
      }
    }
  ]
});

That's it. Your site now exposes structured capabilities to any AI agent that visits.

How Auto-Detection Works

Here's what makes MCP-B clever. It checks whether the browser already supports WebMCP natively. If it does, the polyfill steps aside and does nothing.

If native support isn't there, MCP-B injects the necessary interfaces into the page. It creates the navigator.mcp object, handles capability discovery, and manages the transport layer.

You don't have to think about any of this. Write your code once, and MCP-B handles the rest. When browsers catch up, the polyfill gracefully disappears.

Code Example of Polyfill Usage

Here's a more complete example showing how you'd register an ability and handle incoming requests:

import { initWebMCP, registerAbility } from '@mcp-b/webmcp-polyfill';

// Initialize with auto-detection
const mcp = initWebMCP({ autoDetect: true });

// Register a capability
registerAbility({
  name: 'get-store-hours',
  description: 'Returns store hours for a given location',
  parameters: {
    locationId: { type: 'string', required: true }
  },
  handler: async ({ locationId }) => {
    const hours = await fetchStoreHours(locationId);
    return { status: 'ok', data: hours };
  }
});

Notice how the handler is just a normal async function. You can call your existing APIs, query a database, or do whatever your app already does. WebMCP is just a new front door to your existing logic.

The NPM Package Landscape

The WebMCP ecosystem on npm is growing quickly. But you don't need all of it. Here's the full lineup and what each package does.

Package	Purpose	Weekly Downloads
@mcp-b/webmcp-polyfill	Core polyfill for browser support	~45k
@mcp-b/webmcp-types	TypeScript type definitions	~38k
@mcp-b/global	Global type augmentation for navigator.mcp	~22k
@mcp-b/transports	HTTP, WebSocket, and SSE transport layers	~15k
@mcp-b/react-webmcp	React hooks and components	~12k
@mcp-b/extension-tools	Browser extension development kit	~5k
@mcp-b/smart-dom-reader	Intelligent DOM extraction for agents	~8k

Which Packages You Actually Need

Here's the truth. Most projects need just one or two packages.

If you're building a standard website or app, grab @mcp-b/webmcp-polyfill and @mcp-b/webmcp-types. That covers 90% of use cases. The polyfill handles runtime behavior, and the types give you autocomplete in your editor.

Using React? Add @mcp-b/react-webmcp on top. It gives you hooks that handle the lifecycle automatically.

Building a browser extension? That's when @mcp-b/extension-tools comes into play. And @mcp-b/transports is only needed if you're doing something custom with WebSockets or Server-Sent Events.

Don't install everything "just in case." Start small and add packages as you need them.

React Integration with useWebMCPTool

If you're a React developer, you'll love how clean the integration is. The useWebMCPTool hook handles registration, cleanup, and state management for you.

Code Example of the React Hook

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

function ProductSearch() {
  useWebMCPTool({
    name: 'search-products',
    description: 'Search products by name or category',
    parameters: {
      query: { type: 'string', required: true },
      maxResults: { type: 'number', required: false }
    },
    handler: async ({ query, maxResults = 10 }) => {
      const results = await api.searchProducts(query, maxResults);
      return { products: results };
    }
  });

  return <div>{/* Your normal UI here */}</div>;
}

The hook registers the ability when the component mounts. And it cleans everything up when the component unmounts. No manual lifecycle management needed.

Mount and Unmount Lifecycle

Why does the lifecycle matter? Because in a single-page app, components come and go. If a user navigates away from your product search page, the "search-products" ability should disappear too.

The React hook handles this automatically. When ProductSearch mounts, the ability is registered. When it unmounts, the ability is removed from the MCP registry. AI agents always see an accurate picture of what your page can do right now.

This is a huge advantage over static configuration files. Your abilities are dynamic and context-aware.

When to Use React Hooks vs Vanilla JS

Use the React hooks when your abilities are tied to specific components or routes. This is the most common case in SPAs.

Use the vanilla JS approach from @mcp-b/webmcp-polyfill when your abilities are global. Things like "get site info" or "contact support" that should be available on every page regardless of what's rendered.

And yes, you can mix both approaches in the same app. Global abilities via vanilla JS at the app level, plus component-specific abilities via hooks.

Developer Tools for Testing and Debugging

How do you know your WebMCP implementation actually works? You test it. And the ecosystem has some excellent tools for that.

Model Context Tool Inspector

This Chrome extension from GoogleChromeLabs is essential. Install it, navigate to your site, and it shows you exactly what abilities your page exposes.

You can see the full capability manifest, test individual abilities with custom parameters, and inspect the responses. It's like the Network tab in DevTools, but specifically for WebMCP.

If an AI agent can't find your abilities, this extension will tell you why in seconds.

Chrome DevTools Console Commands

You don't even need an extension for quick checks. Open your browser console and try these commands:

// Check if WebMCP is available
console.log(navigator.mcp);

// List all registered abilities
const abilities = await navigator.mcp.getAbilities();
console.table(abilities);

// Test an ability manually
const result = await navigator.mcp.invoke('search-products', {
  query: 'running shoes'
});
console.log(result);

These three commands will tell you almost everything you need to know during development. Is WebMCP loaded? What abilities exist? Do they return the right data?

Playwright Testing Setup

For automated testing, Playwright works beautifully with WebMCP. Here's how to set up an end-to-end test:

import { test, expect } from '@playwright/test';

test('WebMCP abilities are discoverable', async ({ page }) => {
  await page.goto('https://your-site.com');

  const abilities = await page.evaluate(async () => {
    return await navigator.mcp.getAbilities();
  });

  expect(abilities).toContainEqual(
    expect.objectContaining({ name: 'search-products' })
  );
});

test('search-products returns valid results', async ({ page }) => {
  await page.goto('https://your-site.com');

  const result = await page.evaluate(async () => {
    return await navigator.mcp.invoke('search-products', {
      query: 'test'
    });
  });

  expect(result.products).toBeDefined();
  expect(result.products.length).toBeGreaterThan(0);
});

Add these to your CI pipeline and you'll catch WebMCP regressions before they reach production.

WordPress and CMS Integration

Not everyone builds custom JavaScript apps. If you're running WordPress, you've got options too.

WordPress MCP Adapter

The WordPress MCP Adapter plugin adds WebMCP support to any WordPress site with zero code. Install it, activate it, and your site automatically exposes abilities for search, navigation, and content discovery.

Out of the box, AI agents can search your posts, browse categories, and find pages. The plugin reads your existing WordPress data and creates abilities from it automatically.

WebMCP Abilities Plugin

Want more control? The WebMCP Abilities Plugin lets you define custom abilities through the WordPress admin panel. No code required for basic setups.

But the real power comes from the PHP API. You can register abilities programmatically in your theme or plugin code.

The wp_register_ability() Pattern

Here's how you'd add a custom ability in your WordPress theme's functions.php:

add_action('webmcp_init', function() {
  wp_register_ability('find-nearest-store', [
    'description' => 'Find the nearest retail store by zip code',
    'parameters' => [
      'zip_code' => [
        'type' => 'string',
        'required' => true,
        'description' => 'US zip code'
      ]
    ],
    'callback' => function($params) {
      $stores = get_stores_by_zip($params['zip_code']);
      return ['stores' => $stores];
    }
  ]);
});

If you've ever registered a WordPress shortcode or REST API endpoint, this pattern will feel instantly familiar. The learning curve is practically zero.

Community Resources and Open-Source Projects

The WebMCP community is small but active. Here are the best resources I've found.

awesome-webmcp GitHub List

The awesome-webmcp repository on GitHub is a curated list of WebMCP tools, tutorials, and examples. It's community-maintained and updated regularly. Bookmark it. When you're looking for something specific, check there first.

webmcp-starter Demo App

Want to see a working implementation before you build your own? The webmcp-starter repo is a minimal demo app with abilities pre-configured. Clone it, run npm install, and you've got a working WebMCP site in under a minute.

It includes examples of both global abilities and component-scoped ones. Great for learning the patterns before applying them to your own project.

webmcp.dev Library

The webmcp.dev site is becoming the unofficial documentation hub for ecosystem packages. It has interactive examples, API references, and migration guides. If the official spec feels dense, start here instead.

How to Choose the Right Tools for Your Stack

With all these options, how do you pick? Here's my simple decision tree.

Static site or landing page? Use @mcp-b/webmcp-polyfill directly. Add a script tag or import it in your build. Register your abilities in a single file. Done.

React or Next.js SPA? Install @mcp-b/react-webmcp and @mcp-b/webmcp-types. Use the useWebMCPTool hook in your components. Global abilities go in your layout or app component.

WordPress or traditional CMS? Start with the WordPress MCP Adapter plugin. If you need custom abilities, add the WebMCP Abilities Plugin or use wp_register_ability() in your theme.

Vue, Svelte, or Angular? Use the vanilla @mcp-b/webmcp-polyfill for now. Framework-specific bindings are coming, but the polyfill works in any framework today.

Building a browser extension? Grab @mcp-b/extension-tools. It handles the unique constraints of extension development, including content scripts and background workers.

The key principle is simple. Start with the minimum. Add complexity only when you have a specific need for it.

Frequently Asked Questions

Do I need the polyfill if my users only use modern browsers?

Yes, for now. Even the latest Chrome and Firefox builds don't have full native WebMCP support yet. The polyfill ensures consistent behavior across all browsers. And because it auto-detects native support, there's zero performance cost once browsers catch up.

Can I use WebMCP without npm or a build tool?

Absolutely. You can load the polyfill from a CDN with a script tag. Add <script src="https://cdn.jsdelivr.net/npm/@mcp-b/webmcp-polyfill"></script> to your HTML and register abilities inline. No bundler required.

How do I test WebMCP abilities in local development?

Install the Model Context Tool Inspector Chrome extension. It works on localhost just like any other site. You can also use the console commands mentioned in the developer tools section to manually invoke abilities and check responses.

Is the React hook compatible with Next.js App Router?

Yes. The useWebMCPTool hook works in client components. Add the "use client" directive at the top of any component that registers abilities. Server components don't need WebMCP since they render on the server where AI agents interact through the browser.

What happens if two plugins register the same ability name?

The last registration wins. MCP-B logs a warning to the console when an ability name collision occurs. To avoid conflicts, use namespaced ability names like "myapp-search-products" instead of generic ones like "search."