WebMCP React
React hooks for exposing your app's functionality as WebMCP tools - transport-agnostic, SSR-safe, Strict Mode safe, W3C spec-aligned
What is WebMCP React?
WebMCP React is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to 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
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- React hooks for exposing your app's functionality as WebMCP
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx webmcp-reactConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use WebMCP React
webmcp-react is a TypeScript/React library that provides hooks and a provider component for exposing your web app's functionality as callable MCP tools via the emerging W3C WebMCP standard (navigator.modelContext). It is Zod-first for typed input schemas, SSR-safe for use with Next.js and Remix, and StrictMode-safe to avoid duplicate registrations. Tools register on mount and unregister on unmount, making them dynamic by nature — and a Chrome Bridge extension connects them to desktop AI clients like Claude and Cursor.
Prerequisites
- Node.js 18 or higher
- A React application (works with Next.js, Remix, Vite, or CRA)
- npm or yarn package manager
- Chrome browser with the WebMCP Bridge extension for connecting to desktop MCP clients
- An MCP client such as Claude Code or Cursor (optional, for agent-driven tool invocation)
Install webmcp-react and Zod
Add webmcp-react and zod as dependencies in your React project.
npm install webmcp-react zodWrap your app in WebMCPProvider
Add the WebMCPProvider at the root of your application. Provide a name and version for your tool namespace. The provider installs a polyfill when native WebMCP browser support is not available.
import { WebMCPProvider } from 'webmcp-react';
export default function App() {
return (
<WebMCPProvider name="my-app" version="1.0">
{/* your app */}
</WebMCPProvider>
);
}Register tools with useMcpTool
Use the useMcpTool hook inside any component to expose a callable tool. Define the input schema with Zod. The tool registers on mount and unregisters on unmount automatically.
import { useMcpTool } from 'webmcp-react';
import { z } from 'zod';
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;
}Install the WebMCP Bridge Chrome extension
Desktop AI clients cannot access navigator.modelContext directly. Install the WebMCP Bridge extension from the Chrome Web Store to bridge registered tools to MCP clients like Claude Code or Cursor.
Use tool annotations for safety hints
Annotate destructive or idempotent tools so AI agents can make informed decisions before calling them. The full MCP annotation set is supported.
useMcpTool({
name: 'delete_record',
description: 'Delete a database record permanently',
input: z.object({ id: z.string() }),
annotations: { destructiveHint: true },
handler: async ({ id }) => { /* ... */ },
});WebMCP React Examples
Client configuration
webmcp-react runs in the browser via navigator.modelContext. To connect to a desktop MCP client, use the WebMCP Bridge extension. The bridge exposes a local stdio MCP server — add it to your client config as shown.
{
"mcpServers": {
"webmcp-bridge": {
"command": "npx",
"args": ["webmcp-react"]
}
}
}Prompts to try
Once tools are registered in your app and the Chrome Bridge extension is active, AI agents can discover and invoke them.
- "Search the product catalog for 'wireless headphones'."
- "Use the checkout tool to complete the cart with ID cart-abc-123."
- "Translate the text 'Hello world' to Spanish using the translate tool."
- "Calculate 42 * 17 using the calculate tool."
- "List all available tools registered by the current web page."Troubleshooting WebMCP React
Tools registered with useMcpTool are not discoverable by the AI client
Ensure the WebMCP Bridge Chrome extension is installed and active on the page. Desktop MCP clients cannot access navigator.modelContext directly without the bridge. Verify the extension is enabled in chrome://extensions.
Duplicate tool registration warnings in React StrictMode
webmcp-react is StrictMode-safe by design and should handle double-invocation of effects. If you see issues, ensure you are on the latest version. Avoid manually calling register/unregister outside of the useMcpTool hook.
Tools are undefined during server-side rendering with Next.js
webmcp-react ships with a 'use client' directive and is SSR-safe — it will not access navigator on the server. If you see SSR errors, ensure you are using the package version that includes the SSR guard, or wrap the component in a dynamic import with ssr: false.
Frequently Asked Questions about WebMCP React
What is WebMCP React?
WebMCP React is a Model Context Protocol (MCP) server that react hooks for exposing your app's functionality as webmcp tools - transport-agnostic, ssr-safe, strict mode safe, w3c spec-aligned It connects AI assistants to external tools and data sources through a standardized interface.
How do I install WebMCP React?
Follow the installation instructions on the WebMCP React GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with WebMCP React?
WebMCP React works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is WebMCP React free to use?
Yes, WebMCP React is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
WebMCP React Alternatives — Similar Developer Tools Servers
Looking for alternatives to WebMCP React? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up WebMCP React in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use WebMCP React?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.