webmcp-react

概述

WebMCP React 提供了 React hooks，用于向 navigator.modelContext 注册类型化的工具。它提供基于 Zod 的类型安全工具定义，JSON Schema 作为备用方案，内置针对没有原生 WebMCP 支持浏览器的 polyfill，并能与 Next.js 和 Remix 等 SSR 框架无缝协作。该库确保了 StrictMode 安全性，避免重复注册和孤立工具。

试试问 AI

装完之后，这里有 3 个你可以让 AI 做的事：

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

  Search the catalog

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

  Translate text to Spanish

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

  Permanently delete a user account

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

  Complete a purchase

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

  Basic arithmetic

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

可对比工具

安装

npm install webmcp-react zod

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

Hacker News 讨论

开发者社区最近的相关讨论。

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

webmcp-react 对比