@mcp-b/react-webmcp is the full React surface for MCP-B. It supports tool registration, prompt and resource hooks, sampling and elicitation helpers, and client/provider hooks for consuming MCP servers from a React tree.
It expects navigator.modelContext to come from native browser support or from a BrowserMcpServer-based runtime such as @mcp-b/global.
Installation
pnpm add @mcp-b/react-webmcp zod
pnpm add @mcp-b/transports @modelcontextprotocol/sdk
zod and zod-to-json-schema are optional peer dependencies. They are required only when you pass Zod v3 object maps as inputSchema or outputSchema.
Minimal example
Provider hooks
useWebMCP(config, deps?)
import { useWebMCP } from '@mcp-b/react-webmcp';
usewebmcp with two package-specific differences:
- The implementation field is named
handler.
inputSchema and outputSchema also accept Zod v3 object maps.
| Field | Type | Required | Description |
|---|
name | string | Yes | Unique tool identifier |
description | string | Yes | Human-readable description |
inputSchema | JSON Schema, Standard Schema v1, or Zod v3 object map | No | Input parameters |
outputSchema | JsonSchemaObject or Zod v3 object map | No | Output structure |
annotations | ToolAnnotations | No | Metadata hints |
handler(input) | (input) => T | Promise<T> | Yes | Tool implementation function |
formatOutput(output) | (output) => string | No | Deprecated. Prefer outputSchema. |
onSuccess(result, input) | (result, input) => void | No | Success callback |
onError(error, input) | (error, input) => void | No | Error callback |
WebMCPReturn
useWebMCPContext(name, description, getValue)
import { useWebMCPContext } from '@mcp-b/react-webmcp';
useWebMCP for read-only context tools. It automatically sets readOnlyHint: true, idempotentHint: true, destructiveHint: false, and openWorldHint: false.
| Parameter | Type | Description |
|---|
name | string | Tool identifier |
description | string | Description for AI assistants |
getValue | () => T | Function returning the current context value |
useWebMCPPrompt(config)
import { useWebMCPPrompt } from '@mcp-b/react-webmcp';
navigator.modelContext.
| Config field | Type | Required | Description |
|---|
name | string | Yes | Prompt identifier |
description | string | No | Human-readable description |
argsSchema | JSON Schema, Standard Schema v1, or Zod v3 object map | No | Argument schema |
get(args) | (args) => { messages: PromptMessage[] } | Yes | Message generator |
useWebMCPResource(config)
import { useWebMCPResource } from '@mcp-b/react-webmcp';
navigator.modelContext.
| Config field | Type | Required | Description |
|---|
uri | string | Yes | Resource URI or URI template |
name | string | Yes | Human-readable name |
description | string | No | Resource description |
mimeType | string | No | MIME type of the resource content |
read(uri, params?) | (uri: URL, params?) => Promise<{ contents: ResourceContents[] }> | Yes | Read handler |
useElicitation(config) / useElicitationHandler(config)
Request user input from the connected MCP client.
useSampling(config) / useSamplingHandler(config)
Request LLM completions from the connected MCP client.
Client hooks
McpClientProvider
import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { McpClientProvider } from '@mcp-b/react-webmcp';
import { TabClientTransport } from '@mcp-b/transports';
| Prop | Type | Required | Description |
|---|
children | ReactNode | Yes | Child components |
client | Client | Yes | MCP client instance |
transport | Transport | Yes | Transport instance |
opts | RequestOptions | No | Connection request options |
useMcpClient()
import { useMcpClient } from '@mcp-b/react-webmcp';
McpClientProvider.
| Field | Type | Description |
|---|
client | Client | MCP client instance |
tools | Tool[] | Available tools from the server |
resources | Resource[] | Available resources from the server |
isConnected | boolean | Whether the client is connected |
isLoading | boolean | Whether a connection attempt is in progress |
error | Error | null | Connection error, if any |
capabilities | ServerCapabilities | null | Server-reported capabilities |
reconnect() | () => Promise<void> | Manually reconnect to the server |
Zod compatibility
@mcp-b/react-webmcp supports Zod ^3.25 || ^4.0 as an optional peer dependency.
- Zod v3 object maps are converted to JSON Schema at registration time via
zod-to-json-schema.
- Zod v4 schemas work through the Standard Schema v1 interface.
Related pages
