agentcathq/webmcp-react: React hooks for exposing your app's functionality as WebMCP tools - transport-agnostic, SSR-safe, Strict Mode safe, W3C spec-aligned

React hooks for exposing your app's functionality as WebMCP tools - transport-agnostic, SSR-safe, Strict Mode safe, W3C spec-aligned - agentcathq/webmcp-react

Summary

webmcp-react provides React hooks and a provider component for registering typed tools on the browser's proposed document.modelContext API, letting AI agents discover and call application functions. It handles polyfilling, React Strict Mode double-mounting, and SSR so the same code works in Next.js, Remix, and plain React apps. The library tracks the evolving WebMCP specification and Chrome's native implementation release by release.

What it is useful for

This library is useful when you want to expose parts of a React application — search, translation, checkout, report fetching — as callable tools for AI agents that understand WebMCP. It is most relevant for teams building agent-driven UIs where the agent needs to invoke application logic through the page rather than through a separate backend. Because tools register and unregister with the React lifecycle, you can expose different tools based on app state, such as only showing admin tools to administrators or hiding a hint tool once a game is over. Engineers who already use Zod for input validation get end-to-end type inference in handlers without writing separate schema files.

How engineers can use it

Install the package and Zod as a peer dependency:

npm install webmcp-react zod

Wrap the app in <WebMCPProvider name="my-app" version="1.0"> and register each tool with useMcpTool. A minimal search tool looks like:

function SearchTool() {
  useMcpTool({
    name: "search",
    description: "Search the catalog",
    input: z.object({ query: z.string() }),
    handler: async ({ query }) => ({
      content: [{ type: "text", text: `Results for: ${query}` }],
    }),
  });
  return null;
}

The hook also returns reactive state (isExecuting, lastResult, error) for building UI, an AbortSignal you can pass to fetch for cancellable work, and onSuccess/onError callbacks for side effects. Inputs can be defined with Zod or with raw inputSchema JSON Schema if you do not want the Zod dependency. Tools mount and unmount with their components, so conditional rendering controls availability.

Documented limitations to keep in mind: WebMCP is a W3C proposal in Chrome Early Preview, and the library is pinned to specific Chrome behavior versions. AbortSignal-based cancellation only works in Chrome 153 and later; older browsers receive a never-aborting signal. Agents that cannot reach document.modelContext directly (such as Claude Code or Cursor) require the separate WebMCP Bridge Chrome extension, which the README notes will be deprecated once Chrome ships native bridging. outputSchema and structuredContent are documented library extensions beyond the current WebMCP specification.