> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-b.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate with your framework

> Register WebMCP tools in React with MCP-B hooks and use upstream guidance for other frameworks.

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`](/packages/usewebmcp/reference) | Core browser tools with JSON Schema inference and raw results. |
| [`@mcp-b/react-webmcp`](/packages/react-webmcp/reference) | 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:

```bash title="Install the React integration" theme={null}
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`:

```tsx title="CalculatorTool.tsx" theme={null}
'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](/packages/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`](/packages/webmcp-polyfill/reference), or `@mcp-b/global` before the
component mounts:

```bash title="Install the focused hook" theme={null}
pnpm add usewebmcp react @mcp-b/webmcp-polyfill
```

```tsx title="Counter.tsx" theme={null}
'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](/how-to/use-schemas-and-structured-output).

## 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](https://developer.chrome.com/docs/ai/webmcp/imperative-api) for browser-owned registration
  behavior and current framework examples.
* Follow Angular's [WebMCP guide](https://angular.dev/ai/webmcp) for Angular services, dependency
  injection, and component lifecycle integration.
* Follow Puppeteer's [WebMCP guide](https://pptr.dev/guides/webmcp) when a browser automation test
  or agent needs to discover and invoke tools.
* Consult the [Community Group draft](https://webmachinelearning.github.io/webmcp/) for the current
  `document.modelContext` contract.

## Verify the mounted tools

After the component commits, inspect the page registry:

```js title="Browser console" theme={null}
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/debug-and-troubleshoot).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.