Skip to main content
Wrap the functions your application already uses, then register those wrappers with document.modelContext. Keep business rules, authorization, and UI updates in the existing application path.

Install the runtime

For the complete MCP-B runtime, install and import @mcp-b/global before registering tools:
Install the runtime
main.ts
If you only need WebMCP tool registration, use the tool-only polyfill instead. See Choose a runtime before selecting a package.

Wrap an existing function

Call the same function used by your interface from the tool handler. Use an AbortSignal to remove the tool when the capability is no longer available.
cart-tool.ts
Create the controller when the user, route, or feature state makes the capability available. Call removeCartTool() when that state becomes invalid. A later registration can reuse the same tool name after the previous signal is aborted. For React components, use the lifecycle-aware hooks in Integrate with your framework.

Verify the registration

Check the page registry after your registration promise resolves:
Browser console
Use Chrome’s WebMCP DevTools panel to inspect schemas and invoke tools without maintaining a separate browser-debugging workflow.

Finish the integration