Recommended root wrapper for apps using this library.
| Prop | Type | Description |
|---|---|---|
name |
string |
Your app's name |
version |
string |
Your app's version |
children |
ReactNode |
React children |
On mount, the provider checks for native navigator.modelContext. If absent, it installs a minimal in-memory polyfill. It cleans up the polyfill when the last provider unmounts.
useMcpTool can still run outside the provider (with a warning), but registration depends on navigator.modelContext already being present.
Returns the current availability of the WebMCP API.
const { available } = useWebMCPStatus();| Field | Type | Description |
|---|---|---|
available |
boolean |
true once navigator.modelContext is ready (always false on the server or outside provider) |
Registers a tool on navigator.modelContext. Automatically unregisters on unmount.
| Field | Type | Description |
|---|---|---|
name |
string |
Tool name (must be unique) |
description |
string |
Human-readable description |
input |
z.ZodObject |
Zod schema for inputs. Handler receives typed args |
output |
z.ZodObject |
Optional Zod schema for outputs |
handler |
(args, client) => CallToolResult | Promise<CallToolResult> |
Tool implementation |
annotations |
ToolAnnotations |
Optional hints (title, readOnlyHint, destructiveHint, idempotentHint, openWorldHint) |
onSuccess |
(result) => void |
Optional callback on success |
onError |
(error) => void |
Optional callback on error |
The client argument provides requestUserInteraction(callback) for prompting the user during tool execution.
When you call execute() directly, this simply invokes the callback.
Same as above, but replace input with inputSchema: InputSchema and output with outputSchema: OutputSchema. The handler receives Record<string, unknown> instead of typed args.
const { state, execute, reset } = useMcpTool({ ... });| Field | Type | Description |
|---|---|---|
state.isExecuting |
boolean |
true while the handler is running |
state.lastResult |
CallToolResult | null |
Most recent result |
state.error |
Error | null |
Most recent error |
state.executionCount |
number |
Total successful executions |
execute(input?) |
(input?) => Promise<CallToolResult> |
Manually invoke the tool |
reset() |
() => void |
Reset state to initial values |
execute() throws if validation or handler logic fails.
The polyfill installs both navigator.modelContext (registration API) and navigator.modelContextTesting (consumer API with executeTool(), listTools()). Browser extensions and tests use modelContextTesting to discover and invoke tools.