WebMCP 核心概念完全图解：Tool、inputSchema 与 execute 回调如何打通 AI 和网页

WebMCP 核心概念完全图解Tool、inputSchema 与 execute 回调如何打通 AI 和网页【免费下载链接】webmcp WebMCP项目地址: https://gitcode.com/gh_mirrors/webm/webmcpWebMCP 是一个让网页把自己变成AI 工具的新标准提案开发者把网页功能注册为带自然语言描述的 Tool用 inputSchema 声明参数结构再靠 execute 回调真正执行任务从而让浏览器内置 AI 或 ChatGPT 等智能体能可靠地替你筛选模板、下单购物、查询状态彻底告别脆弱的截图识别与模拟点击。 一句话理解WebMCP 把每个网页变成一台页面内的 MCP 服务器——AI 不再隔着屏幕猜按钮在哪而是直接调用网站自己提供的官方接口。为什么需要 WebMCP今天 AI 助手操作网页的主流方式是截图 → 识别界面 → 模拟人类点击。这套做法慢一个简单操作可能要跑很多轮脆按钮文案一改、页面一改版AI 就抓瞎丢上下文绕开页面 UI 直连后端时登录态、页面状态都得在服务端重新复制一遍WebMCP 的思路反过来既然网站最清楚自己能干什么那就让网站主动把能力注册给 AI。这样用户、网页、AI 三方共享同一个上下文人随时可以看到并接管 AI 的每一步操作。完整的背景与动机见官方说明文档README.md核心概念一Tool工具是什么一个 Tool 就是一段可被 AI 调用的网页功能。网页通过document.modelContext.registerTool()注册等于向 AI 递上一张说明书说清三件事name工具名比如add-todo、filter-templatesdescription自然语言描述AI 靠它判断什么时候该用我inputSchema / execute参数契约 执行逻辑一个最小示例源自 README.mdawait document.modelContext.registerTool({ name: add-todo, description: Add a new item to the users active todo list, inputSchema: { type: object, properties: { text: { type: string, description: 待办事项的文本内容 } }, required: [text] }, async execute({ text }) { await addTodoItemToCollection(text); // 复用页面现有 JS 逻辑 return { content: [{ type: text, text: 已添加${text} }] }; } });工具随时可以注销传入AbortController的 signal 即可移除。因此按页面状态动态增删工具是官方推荐模式——只把当前页面真正能用的能力暴露给 AI避免工具列表臃肿。核心概念二inputSchema参数契约inputSchema是一份 JSON SchemaAI 读它就知道要传什么参数、什么类型、是否必填用type约束类型string / number / object…用enum给出可选值比如纸张规格Letter | Legal | A4每个属性都建议带description帮 AI 填对值给 AI 写 schema 的 3 个小心机做法例子接受原始输入别逼 AI 心算传明天下午格式归一化留给你的 JS枚举用自然语言shippingMethod: express而不是shippingId: 1描述要正向按关键词搜索商品 优于 不要用于下单核心概念三execute 回调真正干活的代码execute(args, options)就是工具的函数体AI 按 schema 把参数传进来你的回调在页面里执行真实逻辑调接口、改状态、刷新 UI再把结构化结果返回给 AI。三个关键特性可异步async execute里随便await你的接口可取消options.signal携带AbortSignal用户点停止时能中断网络请求必须同步 UI工具执行后页面上的视觉状态要立刻更新——人和 AI 共享同一个浏览器会话这是协作的基础一次工具调用的完整流程图解从用户提问到拿到结果WebMCP 的生命周期共 5 步注册 → 发现 → 调用 → 执行 → 响应全程由浏览器居中调度。跨域 iframe 想参与协作需要显式授权allowtoolsexposedTo来源白名单保证工具只暴露给可信来源。规范中对每一步的精确算法定义见 index.bs。进阶不写 JS 也行——声明式表单工具如果某项功能本来就是一个 HTML 表单WebMCP 提供了零 JS的声明式写法给form加几个属性浏览器就自动把它编译成一个 Toolform toolnamesearch-cars tooldescriptionPerform a car make/model search toolautosubmit input typetext namemake toolparamdescriptionThe vehicles make (e.g., BMW, Ford) required input typetext namemodel toolparamdescriptionThe vehicles model (e.g., 330i, F-150) required button typesubmitSearch/button /formtoolname/tooldescription对应命令式 API 的 name / descriptiontoolautosubmit允许 AI 填完表单直接提交不加的话AI 填完会把提交按钮聚焦请你人工核对后再提交表单如何被确定性地编译成 inputSchema、结果如何回传给 AI详见declarative-api-explainer.md写出 AI 爱用的工具最佳实践清单官方在 README.md 中给出的建议浓缩成 6 条守住工具预算每个工具都会占用 AI 的上下文 token一两百个工具会让 AI 选择困难甚至直接失效单一职责一个工具只做一件事避免语义重叠动态注册按页面状态增删工具简单应用则在加载时静态注册即可动词要精确create-event立即执行≠start-event-creation跳到表单schema 宽松、代码严格校验失败时返回清晰的错误信息让 AI 能自我纠正并重试信任 AI描述写清能干什么、需要什么而不是用提示词硬控流程安全侧的考量权限策略、来源隔离、跨域暴露可参考security-privacy-questionnaire.md现在能用了吗浏览器支持一览平台状态Chrome 149Origin Trial 已上线本地开发可开about:flags测试开关Edge 150Origin Trial 已上线ChatGPT Desktop已支持BraveLeo AI 聊天中实验性支持完整的浏览器与智能体支持矩阵见implementation-status.md。TypeScript 类型定义已发布为webmcp-typesnpm 包拿来即用。再远一点docs/service-workers.md 还提出了把工具注册到 Service Worker 的扩展方案——即使网站没打开AI 也能在后台调用工具比如悄悄帮你把商品加进购物车需要人工确认的支付环节再弹回窗口交还用户。小结三个概念一张关系图Tool网页功能对 AI 的自我说明书name descriptioninputSchema参数契约AI 照着填就能调对execute真正干活的 JS 回调干完还要同步更新 UI三者合起来网页就从只能给人点的界面升级为人机共用的服务接口。如果你的站点有搜索、筛选、下单、导出这类动作不妨用 WebMCP 把它们注册出去——这是 AI 时代网页值得提前布局的一块拼图。【免费下载链接】webmcp WebMCP项目地址: https://gitcode.com/gh_mirrors/webm/webmcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考