如何在 Next.js 应用中添加 WebMCP

AI Agent 通常难以理解 Web 应用。它们通过抓取 DOM 并猜测按钮的功能，这会导致错误和幻觉。

WebMCP 解决了这个问题。它是一项 W3C 标准，为浏览器增加了 modelContext API。与其让 Agent 去猜测，不如让你的 Next.js 应用准确地告诉它可以运行哪些函数。

WebMCP vs Anthropic MCP

Anthropic MCP 在服务器端运行。它使用 JSON-RPC 连接数据库或 API，运行在浏览器之外。

WebMCP 在浏览器标签页中运行。它在本地注册工具，并使用用户现有的会话。无需额外的身份验证或后端。

它们可以协同工作。你可以使用 MCP 处理后端任务，使用 WebMCP 处理前端交互。

暴露工具的两种方式：

  • HTML 表单：在表单中添加 toolname 和 tooldescription 属性。Agent 无需任何 JavaScript 即可识别工具及其参数。适用于搜索和筛选功能。

  • JavaScript：使用 navigator.modelContext API 处理动态逻辑。这最适合多步骤流程。

在 Next.js 中的实现

  1. 安装用于浏览器支持的 polyfill： npm install @mcp-b/global @mcp-b/react-webmcp

  2. 创建一个 WebMCPProvider 在你的 layout 中初始化 polyfill。

  3. 在客户端组件中使用 useWebMCP hook。该 hook 会自动处理工具注册和清理工作。

示例工具设置：

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

最佳实践

  • 使用 HTTPS。WebMCP 在生产环境中需要安全连接。
  • 保持工具数量精简。工具过多会膨胀 AI 上下文并减慢推理速度。每页工具数请保持在 50 个以下。
  • 提供丰富的描述。Agent 依赖这些字符串来理解何时使用工具。
  • 使用服务层 (service layer)。不要在工具处理器中依赖 React state。请使用纯函数以避免数据陈旧。

测试

打开 Chrome 146 或更高版本。在 chrome://flags 中启用 WebMCP 标志。使用 Model Context Tool Inspector 扩展程序，无需 AI Agent 即可测试你的工具。

WebMCP 是 Agent 化 Web 浏览的未来。现在就开始实现它，以便在浏览器默认启用该功能时做好准备。

来源：https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp