Integrate with your framework

Use MCP-B’s React hooks when tool availability follows component state. For other frameworks, use the WebMCP API with that framework’s native lifecycle guidance.

Choose a React hook

Package	Use it when
`usewebmcp`	Core browser tools with JSON Schema inference and raw results.
`@mcp-b/react-webmcp`	Standard Schema validation, MCP output formatting, prompts, resources, and client hooks.

Both hooks register after React commits the component and abort the registration when it unmounts. You do not need to manage an AbortController in the component.

Register a tool with `@mcp-b/react-webmcp`

Install the complete runtime and React integration:

Install the React integration

pnpm add @mcp-b/global @mcp-b/react-webmcp zod@^4.2

Import @mcp-b/global once in your client entry point, then mount a component that calls useWebMCP:

CalculatorTool.tsx

'use client';

import '@mcp-b/global';
import { useWebMCP } from '@mcp-b/react-webmcp';
import { z } from 'zod';

export function CalculatorTool() {
  const tool = useWebMCP({
    name: 'add_numbers',
    description: 'Add two numbers',
    inputSchema: z.object({ left: z.number(), right: z.number() }),
    outputSchema: {
      type: 'object',
      properties: { total: { type: 'number' } },
      required: ['total'],
    },
    annotations: { readOnlyHint: true, idempotentHint: true },
    execute: ({ left, right }) => ({ total: left + right }),
  });

  return <output>Last total: {tool.state.lastResult?.total ?? 'Not called yet'}</output>;
}

This example uses Zod; use your existing Standard Schema implementation or plain JSON Schema as needed. Metadata changes refresh registration automatically. Use the optional second argument only when you need to force an additional registration refresh. Read the @mcp-b/react-webmcp reference for execution state, prompt and resource hooks, and MCP client-provider hooks.

Register a tool with `usewebmcp`

Install the focused hook and provide document.modelContext through native support, @mcp-b/webmcp-polyfill, or @mcp-b/global before the component mounts:

Install the focused hook

pnpm add usewebmcp react @mcp-b/webmcp-polyfill

Counter.tsx

'use client';

import { useState } from 'react';
import { useWebMCP } from 'usewebmcp';

export function Counter() {
  const [count, setCount] = useState(0);

  useWebMCP({
    name: 'get_count',
    description: 'Get the current counter value',
    annotations: { readOnlyHint: true },
    execute: () => ({ count }),
  });

  return (
    <button type="button" onClick={() => setCount((value) => value + 1)}>
      Count: {count}
    </button>
  );
}

usewebmcp passes input to the handler without validation and reports a Standard Schema object, such as a Zod schema, as a registration error. To validate or transform input, follow the schema guide.

Handle server rendering

Mount tool hooks only in client-rendered components. Importing @mcp-b/global and calling installWebMCP() are safe during server rendering, but code that reads document, window, or page state must run on the client. Both published hook entry points preserve 'use client', and their server render does not register tools. For Next.js, keep the hook inside a Client Component. Initialize the runtime above that component so document.modelContext exists before the hook commits.

Use framework-owned guidance elsewhere

Follow Chrome’s imperative WebMCP API guide for browser-owned registration behavior and current framework examples.
Follow Angular’s WebMCP guide for Angular services, dependency injection, and component lifecycle integration.
Follow Puppeteer’s WebMCP guide when a browser automation test or agent needs to discover and invoke tools.
Consult the Community Group draft for the current document.modelContext contract.

Verify the mounted tools

After the component commits, inspect the page registry:

Browser console

await document.modelContext?.getTools();

If a tool disappears too early or remains after unmount, check the hook dependencies and component lifecycle. For runtime and transport failures, use Debug and troubleshoot.

How-To Guides

Adoption

Frameworks

Connectivity

Choose a React hook

Register a tool with `@mcp-b/react-webmcp`

Register a tool with `usewebmcp`

Handle server rendering

Use framework-owned guidance elsewhere

Verify the mounted tools

​Choose a React hook

​Register a tool with @mcp-b/react-webmcp

​Register a tool with usewebmcp

​Handle server rendering

​Use framework-owned guidance elsewhere

​Verify the mounted tools

Choose a React hook

Register a tool with `@mcp-b/react-webmcp`

Register a tool with `usewebmcp`

Handle server rendering

Use framework-owned guidance elsewhere

Verify the mounted tools