webmcp-react

Overview

WebMCP React provides React hooks for registering typed tools with navigator.modelContext. It offers Zod-first type-safe tool definitions, JSON Schema fallback, built-in polyfill for browsers without native WebMCP support, and works seamlessly with SSR frameworks like Next.js and Remix. The library ensures StrictMode safety by avoiding duplicate registrations and orphaned tools.

Try asking AI

After installing, here are 3 things you can ask your AI assistant:

• search({ query: string }) => Promise<{ content: Array<{ type: 'text', text: string }> }>

  Search the catalog

  Try:Search for products matching 'red shoes'Try:Find items with keyword 'electronics'
• translate({ text: string }) => Promise<{ content: Array<{ type: 'text', text: string }> }>

  Translate text to Spanish

  Try:Translate 'Hello world' to SpanishTry:How do you say 'good morning' in Spanish?
• delete_user({ userId: string }) => Promise<any>

  Permanently delete a user account

  Try:Delete user with ID 12345Try:Remove the account with username 'johndoe'
• checkout({ cartId: string }) => Promise<any>

  Complete a purchase

  Try:Process checkout for cart 98765Try:Finish purchasing items in my cart
• calculate({ a: number; b: number; op: string }) => Promise<{ content: Array<{ type: 'text', text: string }> }>

  Basic arithmetic

  Try:Calculate 15 + 27Try:Multiply 8 by 4Try:Divide 100 by 5

Comparable tools

Installation

npm install webmcp-react zod

{
  "mcpServers": {
    "webmcp": {
      "command": "npx",
      "args": ["webmcp-bridge"]
    }
  }
}

On Hacker News

Recent discussion from the developer community.

• Show HN: Webmcp-react – React hooks that turn your website into an MCP server▲ 5💬 3
  Story by kashishhora · 2026-03-05

Compare webmcp-react with