Skip to main content
Use MCP-B’s React hooks when tool availability follows component state. For other frameworks, use the WebMCP API with that framework’s native lifecycle guidance.

​
Choose a React hook

Both hooks register after React commits the component and abort the registration when it unmounts. You do not need to manage an AbortController in the component.

​
Register a tool with @mcp-b/react-webmcp

Install the complete runtime and React integration:
Install the React integration
Import @mcp-b/global once in your client entry point, then mount a component that calls useWebMCP: Pass component dependencies as the hook’s second argument when registered metadata must change. Read the @mcp-b/react-webmcp reference for execution state, prompt and resource hooks, and MCP client-provider hooks.

​
Register a tool with usewebmcp

Install the focused hook and provide document.modelContext through native support, @mcp-b/webmcp-polyfill, or @mcp-b/global before the component mounts:
Install the focused hook
Use usewebmcp when you only need tool registration and local execution state. Use @mcp-b/webmcp-polyfill to initialize the tool-only runtime.

​
Handle server rendering

Mount tool hooks only in client-rendered components. Importing @mcp-b/global and calling initializeWebMCPPolyfill() are safe during server rendering, but code that reads document, window, or page state must run on the client. For Next.js, keep the hook inside a Client Component. Initialize the runtime above that component so document.modelContext exists before the hook commits.

​
Use framework-owned guidance elsewhere

  • Follow Chrome’s imperative WebMCP API guide for browser-owned registration behavior and current framework examples.
  • Follow Angular’s WebMCP guide for Angular services, dependency injection, and component lifecycle integration.
  • Follow Puppeteer’s WebMCP guide when a browser automation test or agent needs to discover and invoke tools.
  • Consult the Community Group draft for the current document.modelContext contract.

​
Verify the mounted tools

After the component commits, inspect the page registry:
Browser console
If a tool disappears too early or remains after unmount, check the hook dependencies and component lifecycle. For runtime and transport failures, use Debug and troubleshoot.