webmcp

WebMCP 是 Web Model Context API 与 Model Context Protocol (MCP) 之间的强力桥梁。它让开发者能将任何网站（无论是 React/Vue/Next.js 单页应用、传统 Rails/Django/Laravel 网站，或是纯 JavaScript）转化为 AI 代理程序的强大工具来源。通过填充 W3C 标准的 navigator.modelContext API，WebMCP 允许开发者注册 AI 可以直接发现、查询与调用的自订工具，弥补了网页 UI 与后端代理逻辑之间的鸿沟。

此技能为自主迭代提供了简化的开发流程。使用者可以导航至目标 URL，注入通过 esbuild 自动打包的自订 TypeScript 代码，并立即验证工具注册。这非常适合为 GitHub 或 Notion 等第三方平台建立使用者脚本、自动化复杂的网页表单，或在不构建复杂中间件的情况下将内部应用程序状态暴露给 AI 助理。对于想要通过即时浏览器上下文增强代理能力的人来说，它是一套完整的工具集。

• 支持直接从浏览器运行时使用 navigator.modelContext 注册可供 AI 调用的工具。

• 包含稳健的开发工作流程：注入脚本、差异化工具列表、测试执行，并通过控制台快照进行除错。

• 支持 TypeScript 自动打包，允许使用 npm 依赖进行模块化工具开发。

• 为非原生浏览器环境提供跨平台兼容性与 MCP-b 填充层。

• 通过 Chrome DevTools MCP 服务器实现工具发现，确保与 Claude Code 及其他 MCP 兼容客户端的无缝整合。

• 为常见的网页爬取、交互与数据处理任务提供专用辅助函数。

• 在注入前务必重新加载页面，以防止旧的填充状态或工具命名冲突。

• 工具识别采用 webmcp_{domain}page{idx}{name} 模式，支持针对多个应用实例进行精确的定位。

• 使用提供的 @webmcp/helpers 获取标准化的 ToolResponse 模式，例如 textResponse、jsonResponse 或 errorResponse。

• 根据安全性（只读、读写或破坏性）对工具进行分类，以引导 AI 代理的行为。

• 确保定义适当的结构（inputSchema/outputSchema），以最大限度地提高 AI 工具调用的准确性。