WebMCP：将 LLM 交互直接集成到您的网站中

什么是 WebMCP？

WebMCP 是一个创新的、开源的 JavaScript 库，旨在通过模型上下文协议 (MCP) 弥合传统 Web 应用程序与先进的大型语言模型 (LLM) 或 AI 代理之间的差距。通过简单地包含一个脚本标签，开发人员就可以在网页的右下角嵌入一个小巧、不显眼的蓝色小部件。该小部件是终端用户将其配置好的 MCP 客户端（如 Claude Desktop）直接连接到网站实时上下文的网关，从而实现复杂、上下文感知的交互。

WebMCP 的核心价值在于赋予 LLM 执行操作、访问特定页面数据以及根据网页的实时状态进行结构化对话的能力。这会将静态内容消费转变为动态的、由代理辅助的体验，同时通过客户端令牌身份验证来保持用户对连接的控制。对于希望为其 Web 属性注入下一代 AI 功能的开发人员来说，它是必不可少的工具。

主要特性

WebMCP 提供了一个强大的 API，用于与 MCP 客户端进行深度集成，提供以下几项强大的功能：

• LLM 工具注册： 开发人员可以将自定义 JavaScript 函数注册为可调用的工具。然后，LLM 客户端可以通过传递结构化参数来调用这些工具（例如 weather、calculate），允许代理代表网站直接执行操作。
• 预定义提示模板： 通过注册提示来标准化常见的用户交互。这些模板允许客户端使用预定义的结构和动态参数来启动复杂的查询（例如生成 Git 提交信息或总结文本）。
• 上下文资源暴露： 将动态或静态网站数据作为由 URI 标识的可读资源暴露。这使得 LLM 能够访问当前页面 HTML (page://current) 或特定 DOM 元素的内容（例如 element://my-id）作为其响应的上下文。
• 安全采样机制： 实施服务器启动的交互，其中 LLM 根据系统提示和上下文请求完成。WebMCP 通过向用户显示一个模态对话框来处理安全性，要求在将响应发送回原始服务器之前进行明确输入，从而确保隐私和监督。
• 可定制的小部件外观： 嵌入式小部件高度可配置，允许开发人员调整其颜色、位置（右下角、右上角等）、大小和内边距，以无缝匹配其网站的设计美学。

如何使用 WebMCP

对于开发人员来说，将 WebMCP 集成到网站中非常简单，而用户交互则依赖于预先配置的 MCP 客户端。

对于网站开发人员（集成）：

1. 包含脚本： 将以下行添加到您的 HTML 中，通常在结束 </body> 标签之前： <script src="webmcp.js"></script>
2. 初始化和配置： 在包含脚本后，可以选择使用自定义设置（颜色、位置）初始化库。
3. 注册功能： 使用 mcp.registerTool()、mcp.registerPrompt() 和 mcp.registerResource() 来向连接的 LLM 暴露您网站的功能和数据。

对于终端用户（连接）：

1. 配置客户端： 确保用户拥有一个 MCP 客户端（例如 Claude Desktop），并配置它以连接到 WebMCP 服务器端点（使用提供的 npx 命令）。
2. 生成令牌： 用户启动其 MCP 客户端并请求一个 webmcp token。
3. 连接： 用户点击网站上的蓝色 WebMCP 小部件，并将生成的令牌粘贴到连接提示中。

用例

WebMCP 在各种 Web 上下文中解锁了强大的 AI 集成能力：

1. 电子商务产品支持： 通过 WebMCP 连接的 LLM 代理可以访问 page-content 资源来读取产品描述和规格。然后用户可以提问：“根据此页面，这台笔记本电脑适合视频编辑吗？” 代理利用上下文提供准确、即时的答案，而无需离开产品页面。
2. 交互式文档和教程： 对于复杂的软件文档站点，可以注册工具来执行代码片段或运行模拟。用户可以要求代理“解释突出显示的代码块的功能”（通过为选定的元素 ID 注册资源），代理将根据实时 DOM 内容提供解释。
3. 数据输入和表单协助： 在内部 Web 应用程序或复杂表单中，可以注册提示以标准化数据输入。例如，可以注册一个提示，根据代理可以通过注册资源读取的数据字段来“生成标准化的合规性摘要”。
4. 代理工作流自动化： 通过注册与后端 API 交互的工具（如果通过客户端安全暴露），代理可能能够启动复杂的多步骤工作流——例如“起草一份总结今日销售数据的电子邮件”——其中 LLM 使用上下文资源来收集必要的数据，然后执行最终的工具调用。

常见问题 (FAQ)

问：WebMCP 可以免费使用吗？ 答：是的，WebMCP 被明确提及是一个开源的 JavaScript 库，这意味着核心集成代码可供免费使用和修改。

问：什么是模型上下文协议 (MCP)？为什么它有必要？ 答：MCP 是 WebMCP 实现的底层通信标准。它定义了网站（服务器）如何安全地将上下文、工具和请求与外部 LLM 客户端通信，确保跨不同客户端应用程序的交互是标准化的。

问：每次注册新工具时，我都需要重新启动 MCP 客户端吗？ 答：强烈建议在注册新工具或资源后重新启动 MCP 客户端，尤其是在初始设置或开发期间，因为某些客户端可能不会立即动态更新其可用工具集（在令牌连接后）。

问：LLM 可以在未经我许可的情况下访问敏感的用户数据吗？ 答：不能。交互受 MCP 客户端控制。虽然资源可以暴露页面内容，但关键步骤是通过令牌进行用户连接。此外，需要外部执行的敏感操作是通过采样机制处理的，该机制明确要求用户通过模态对话框提供输入，从而保持人工监督。

问：我能更改蓝色小部件的外观吗？ 答：当然可以。该库允许在 WebMCP 对象的初始化阶段自定义小部件的外观，包括其 color（颜色）、position（位置，例如 'top-right'）、size（大小）和 padding（内边距）。