# webmcp-react MCP server

> Lets React developers expose typed app functionality as WebMCP tools that AI agents can discover and call.

- Repository: https://github.com/agentcathq/webmcp-react
- Page: https://hostedmcp.org/servers/agentcathq/webmcp-react
- Official: yes
- Transport: stdio
- Stars: 92
- License: MIT

## Install

### Claude Code

```sh
claude mcp add webmcp-react -- npx -y webmcp-react
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "webmcp-react": {
      "command": "npx",
      "args": [
        "-y",
        "webmcp-react"
      ]
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "webmcp-react": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "webmcp-react"
      ]
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"webmcp-react","type":"stdio","command":"npx","args":["-y","webmcp-react"]}'
```

### Claude Desktop (`claude_desktop_config.json`)

```json
{
  "mcpServers": {
    "webmcp-react": {
      "command": "npx",
      "args": [
        "-y",
        "webmcp-react"
      ]
    }
  }
}
```

### Codex

```sh
codex mcp add webmcp-react -- npx -y webmcp-react
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.webmcp-react]
command = "npx"
args = ["-y", "webmcp-react"]
```

### Gemini CLI

```sh
gemini mcp add -s user webmcp-react npx -- -y webmcp-react
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "webmcp-react": {
      "command": "npx",
      "args": [
        "-y",
        "webmcp-react"
      ]
    }
  }
}
```

## FAQ

### What is webmcp-react used for?

It provides React hooks for registering typed tools on document.modelContext, so AI agents can call your web app's functionality.

### Does webmcp-react work without native WebMCP support in the browser?

Yes. It installs a lightweight polyfill when native WebMCP is unavailable, and uses the native API when present.

### Can I define tools with JSON Schema instead of Zod?

Yes, pass inputSchema directly to define a tool without Zod.

### Is webmcp-react SSR-safe?

Yes, it works with Next.js, Remix, and other server-rendering frameworks, and the build includes a "use client" banner.

### How do tools get unregistered?

Tools register on mount and unregister on unmount, so you can render them conditionally like any React component.