WebMCP

What is WebMCP?

WebMCP is a W3C draft standard that exposes a navigator.modelContext API in the browser. AI agents running inside the browser — or with access to it — can discover and call tools registered on any page, without a separate server process.

@fragments-sdk/webmcp bridges your compiled Fragments design system data to WebMCP. Once wrapped, any AI with browser tool-use support can call fragments_discover, fragments_implement, and the other tools directly — reading your real component metadata at runtime, in the browser, with zero latency.

The browser integration surfaces 6 tools over the same compiled Fragments data used by the MCP server: 66 components, 30 blocks, and 106 tokens.

If you need the server-side/editor integration, use the MCP tools for design systems. If you are exploring what AI can query, start with Browse Components. For a narrative explainer, read What Is WebMCP? Browser MCP Tools for Design Systems.

Browser MCP Tools for Design Systems

Browser MCP tools are useful when AI runs inside the browser or a browser-connected environment. The page can register design system tools directly, so AI can query components, blocks, and tokens in-process without a separate local tool server.

This makes WebMCP a good fit for internal builders, interactive demos, and product surfaces where you want AI to work against the exact design system data already loaded by the app.

WebMCP vs MCP

The Fragments MCP server is designed for AI coding assistants (Claude Code, Cursor, VS Code). It runs as a local process and connects over stdio. WebMCP serves a different use case: AI that runs in or alongside the browser.

Install

Install the package alongside your compiled fragments data:

npm install @fragments-sdk/webmcp

How Fragments Uses navigator.modelContext

Fragments uses navigator.modelContext to register a curated tool set backed by your compiled Fragments data. Browser-capable AI can then call those tools to discover components, inspect props, and generate UI using your real system data.

The integration also handles cleanup and fallback behavior when WebMCP is unavailable, so your React app can enable the integration without breaking non-WebMCP browsers.

Quick Start

Wrap your app with FragmentsWebMCP. Pass your compiled data directly or fetch it from a URL at runtime.

import compiledData from './fragments.json';
import { FragmentsWebMCP } from '@fragments-sdk/webmcp/fragments';

export default function App() {
  return (
    <FragmentsWebMCP data={compiledData}>
      <YourApp />
    </FragmentsWebMCP>
  );
}

That's it. Once mounted, the 6 Fragments tools are registered on navigator.modelContext and any AI with WebMCP support can call them. The component cleans up automatically on unmount.

API Reference

FragmentsWebMCP

Batteries-included React component. Sets up the WebMCPProvider and registers all tools in one step.

useFragmentTools

Lower-level hook for registering tools inside an existing WebMCPProvider. Useful when you need to conditionally register tools or track the count.

import { useFragmentTools } from '@fragments-sdk/webmcp/fragments';

function MyComponent({ data }) {
  const { tools, count } = useFragmentTools(data, {
    prefix: 'myds',
    tools: ['discover', 'inspect', 'implement'],
    enabled: isUserLoggedIn,
  });

  return <span>{count} tools registered</span>;
}

createFragmentsWebMCPTools

Imperative factory function. Returns an array of WebMCPTool objects you can register manually or pass to any WebMCP-compatible runtime.

import { createFragmentsWebMCPTools } from '@fragments-sdk/webmcp/fragments';
import compiledData from './fragments.json';

const tools = createFragmentsWebMCPTools(compiledData, {
  prefix: 'fragments',
  tools: ['discover', 'inspect', 'blocks', 'tokens', 'implement'],
});

// Register with any WebMCP-compatible client
for (const tool of tools) {
  navigator.modelContext?.registerTool(tool);
}

Available Tools

6 Fragments tools run in-browser via WebMCP. All execute locally against your compiled data — no network calls, no latency.

Custom Configuration

You can customize the tool name prefix and restrict which tools are registered. This is useful when running multiple design systems on the same page, or when you want a minimal surface area.

<FragmentsWebMCP
  data={compiledData}
  prefix="acme"
  tools={['discover', 'inspect', 'implement']}
>
  <App />
</FragmentsWebMCP>

With a custom prefix, tools are registered as acme_discover, acme_inspect, and acme_implement — useful if you want to distinguish your design system from others in the same AI session.

Feature Detection

WebMCP is only available in browsers that implement navigator.modelContext. Use the feature detection helpers from @webmcp-sdk/core for graceful degradation:

import { isWebMCPSupported, getModelContext } from '@webmcp-sdk/core';

if (isWebMCPSupported()) {
  const client = getModelContext();
  // AI tools are available
} else {
  // Fall back to MCP or skip AI features
}

FragmentsWebMCP handles this automatically — if WebMCP is not supported, it renders its children unchanged and skips tool registration. No errors, no crashes.

Dev Shim & Testing

FragmentsWebMCP automatically installs a dev shim in development and test environments. The shim polyfills navigator.modelContext so you can develop and test WebMCP integrations without a WebMCP-capable browser.

You can also install the shim manually for testing:

import { installWebMCPShim } from '@webmcp-sdk/core';

// In your test setup
const registry = installWebMCPShim();

// Verify tools registered correctly
expect(registry.tools.has('fragments_discover')).toBe(true);
expect(registry.tools.has('fragments_implement')).toBe(true);

The WebMCPProvider (used internally by FragmentsWebMCP) accepts a devShim prop that installs the shim when true. It is always enabled in the Fragments integration so your local dev environment works out of the box.

FAQ

Next Steps

• AI Playground: See WebMCP in action — describe a layout and watch it render with your theme
• MCP Tools: Use the server-side equivalent for AI coding assistants like Claude Code and Cursor
• WebMCP explainer post: Share a narrative overview with teammates before wiring the browser integration
• Browse Components: Explore 66 component docs that the tools surface
• Composition Blocks: Browse 30 composition patterns surfaced by fragments_blocks and fragments_implement
• CLI Reference: Build the fragments.json that powers all AI tooling