WebMCP Documentation

@mcp-b/react-webmcp is the full React surface for MCP-B. It supports tool registration, prompt and resource hooks, and client/provider hooks for consuming MCP servers. Producer hooks register against document.modelContext. An internal fallback to the deprecated navigator.modelContext alias remains only for older preview runtimes; application code should not use it.

Installation

Install provider hooks

pnpm add @mcp-b/global @mcp-b/react-webmcp

Omit @mcp-b/global only when the application exclusively uses the client hooks, or when a native WebMCP implementation supplies document.modelContext and the application only uses the core useWebMCP tool hook. Prompt and resource hooks require the MCP-B extensions installed by @mcp-b/global. For client functionality:

Install client dependencies

pnpm add @mcp-b/transports @modelcontextprotocol/client

Minimal example

Declarative form attributes

Importing this package adds React JSX declarations for toolname, tooltitle, tooldescription, toolautosubmit, and toolparamdescription.

Declare a form tool in React

import '@mcp-b/global';
import type {} from '@mcp-b/react-webmcp';

export function SearchForm() {
  return (
    <form toolname="search_catalog" tooldescription="Search the product catalog" toolautosubmit="">
      <input name="query" toolparamdescription="Words to match" required />
      <button type="submit">Search</button>
    </form>
  );
}

Use toolautosubmit="". React drops an unknown attribute whose value is the boolean true, so JSX shorthand (toolautosubmit) does not reach the DOM. See the declarative API reference for the runtime behavior.

Provider hooks

`useWebMCP(config, deps?)`

Import useWebMCP

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

This package re-exports the same hook implementation and function signature as usewebmcp.

Field	Type	Required	Description
`name`	`string`	Yes	Unique tool identifier
`description`	`string`	Yes	Human-readable description
`inputSchema`	JSON Schema or Standard JSON Schema v1	No	Input parameters
`outputSchema`	JSON Schema	No	MCP-B output helper metadata
`annotations`	`ToolAnnotations`	No	Metadata hints
`execute(input)`	`(input) => T \| Promise<T>`	Yes	Tool implementation

Returns: WebMCPReturn Native Chrome WebMCP does not currently define or enforce outputSchema. The React hooks use it for output typing and structured MCP responses.

`useWebMCPContext(name, description, getValue)`

Import useWebMCPContext

import { useWebMCPContext } from '@mcp-b/react-webmcp';

Convenience wrapper around 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

import { useWebMCPPrompt } from '@mcp-b/react-webmcp';

Registers an MCP prompt through the BrowserMcpServer installed by @mcp-b/global. It does not register against a native strict-only context.

Config field	Type	Required	Description
`name`	`string`	Yes	Prompt identifier
`description`	`string`	No	Human-readable description
`argsSchema`	JSON Schema or Standard Schema v1	No	Argument schema
`get(args)`	`(args) => { messages: PromptMessage[] }`	Yes	Message generator

Returns: WebMCPPromptReturn, with isRegistered: boolean indicating whether the prompt’s registration is active.

`useWebMCPResource(config)`

Import useWebMCPResource

import { useWebMCPResource } from '@mcp-b/react-webmcp';

Registers an MCP resource through the BrowserMcpServer installed by @mcp-b/global. It does not register against a native strict-only context.

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

Returns: WebMCPResourceReturn, with isRegistered: boolean indicating whether the resource’s registration is active. The prompt get and resource read handlers follow the same committed-ref lifecycle as useWebMCP: the latest committed handler is available without replacing its registration.

Client hooks

`McpClientProvider`

Create an MCP client and transport

import { McpClientProvider } from '@mcp-b/react-webmcp';
import { TabClientTransport } from '@mcp-b/transports';
import { Client } from '@modelcontextprotocol/client';

const client = new Client(
  { name: 'MyApp', version: '1.0.0' },
  { versionNegotiation: { mode: 'auto' } }
);
const transport = new TabClientTransport({
  channelId: 'mcp',
  targetOrigin: window.location.origin,
});

Provider component that manages an MCP client connection and shares tools, resources, capabilities, and connection state with descendant components.

Prop	Type	Required	Description
`children`	`ReactNode`	Yes	Child components
`client`	`Client`	Yes	MCP client instance
`transport`	`Transport`	Yes	Transport instance
`opts`	`ConnectOptions`	No	Connection options, including a cached era verdict

`useMcpClient()`

Import useMcpClient

import { useMcpClient } from '@mcp-b/react-webmcp';

Accesses the client context. It must be used inside 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 MCP handshake is active
`isLoading`	`boolean`	Whether connection or inventory discovery is in progress
`error`	`Error \| null`	Connection or inventory error, if any
`capabilities`	`ServerCapabilities \| null`	Server-reported capabilities
`reconnect(transport?)`	`(transport?: Transport) => Promise<void>`	Retry inventory discovery or reconnect a disconnected client to the server

Calling reconnect() while connected retries the complete tool and resource inventory. After a one-shot transport closes, create a new transport instance and pass it to reconnect(newTransport); reusing a closed transport is not supported by every transport implementation.

Schema compatibility

@mcp-b/react-webmcp no longer accepts raw Zod object maps. Use JSON Schema directly, or pass a Standard JSON Schema object such as z.object(...) from Zod 4.2 or newer. outputSchema remains JSON Schema-only because native WebMCP does not define output schema enforcement.

Exported types

Type	Description
`InferOutput`	Infers a tool result from an output schema
`InferToolInput`	Infers tool input from a supported input schema
`ToolExecutionState`	State exposed by `useWebMCP`
`WebMCPConfig`	Configuration accepted by `useWebMCP`
`WebMCPReturn`	Return value from `useWebMCP` and `useWebMCPContext`
`ToolInputSchema`	Supported JSON Schema or Standard JSON Schema input type
`McpClientProviderProps`	Props accepted by `McpClientProvider`
`WebMCPPromptConfig`	Configuration accepted by `useWebMCPPrompt`
`WebMCPPromptReturn`	Registration state returned by `useWebMCPPrompt`
`WebMCPResourceConfig`	Configuration accepted by `useWebMCPResource`
`WebMCPResourceReturn`	Registration state returned by `useWebMCPResource`

Packages

WebMCP standard

Core runtime

React

Tooling

@mcp-b/react-webmcp reference

Installation

Minimal example

Declarative form attributes

Provider hooks

`useWebMCP(config, deps?)`

`useWebMCPContext(name, description, getValue)`

`useWebMCPPrompt(config)`

`useWebMCPResource(config)`

Client hooks

`McpClientProvider`

`useMcpClient()`

Schema compatibility

Exported types

​Installation

​Minimal example

​Declarative form attributes

​Provider hooks

​useWebMCP(config, deps?)

​useWebMCPContext(name, description, getValue)

​useWebMCPPrompt(config)

​useWebMCPResource(config)

​Client hooks

​McpClientProvider

​useMcpClient()

​Schema compatibility

​Exported types

​Related pages

Installation

Minimal example

Declarative form attributes

Provider hooks

`useWebMCP(config, deps?)`

`useWebMCPContext(name, description, getValue)`

`useWebMCPPrompt(config)`

`useWebMCPResource(config)`

Client hooks

`McpClientProvider`

`useMcpClient()`

Schema compatibility

Exported types

Related pages