> ## 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.

# @mcp-b/react-webmcp overview

> React tool hooks with MCP output schemas, prompts, resources, and client connections.

`@mcp-b/react-webmcp` adds MCP output schemas and response formatting to the shared React tool hook:

```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>;
}
```

For `{ left: 3, right: 4 }`, React state holds `{ total: 7 }`; the agent receives MCP text and `structuredContent`.

## Package boundary

Both hooks preserve `'use client'` and accept React 18 or 19; browser tests run on React 19. This package adds Standard Schema
conversion and validation, MCP responses, prompts, resources, and client hooks on top of the core
registration lifecycle.
Agent failures become MCP error responses; local failures and cancellation reject.

## Runtime requirements

| Surface | Runtime |
| - | - |
| Tool and context hooks | Native WebMCP, an initialized polyfill, or the MCP-B runtime |
| Prompt and resource hooks | [`@mcp-b/global`](/packages/global/overview) or a configured `BrowserMcpServer` |
| MCP client provider and hooks | A supplied MCP client and transport; no browser registry required |

MCP `outputSchema` discovery and validation require the MCP-B runtime.

[Framework setup](/how-to/frameworks) · [API reference](/packages/react-webmcp/reference) ·
[Schema guide](/how-to/use-schemas-and-structured-output)


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