agentcathq/webmcp-react

View on GitHub ↗

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

36 ★5 forksTypeScriptUpdated 1mo ago

What you need to know

React hooks library for exposing typed tools on document.modelContext per the current WebMCP spec. Zod-first tool definitions with full type inference, a built-in polyfill, SSR safety, and dynamic tool registration. Includes a Chrome extension bridge to connect registered tools to desktop MCP clients.

Install

npm install webmcp-react zod

Usage

  • •Wrap your app in WebMCPProvider and register tools with useMcpTool; connect agents via the WebMCP Bridge extension.

Key features

  • ✓useMcpTool hook with Zod input schemas
  • ✓JSON Schema fallback
  • ✓Built-in polyfill
  • ✓SSR-safe (Next.js, Remix)
  • ✓Dynamic register/unregister
  • ✓WebMCP Bridge Chrome extension

Best for

Exposing React app tools to WebMCP-compatible agents

Caveats

  • ⚠Experimental; WebMCP spec still evolving
  • ⚠Desktop MCP clients need the WebMCP Bridge extension
Clients: Claude Code · Cursor · GitHub Copilot · Cline

Reviewed 2026-08-11

Topics

aihooksmcpmodel-context-protocolnavigator-modelcontextreacttypescriptw3cwebmcp
Stars
36★
Forks
5
Language
TypeScript
License
MIT
Created
2026-02-17
Last push
2026-08-13