WebMCP 声明式 API 终极指南用零 JS 把网页表单变成 AI 可调用工具【免费下载链接】webmcp WebMCP项目地址: https://gitcode.com/gh_mirrors/webm/webmcpWebMCP 声明式 API 让你无需写一行 JavaScript只需给现有的form加几个 HTML 属性就能把网页表单变成 AI 智能体Agent可直接发现、填写并提交的工具。本文带你快速上手这套 WebMCP 表单工具新玩法看懂浏览器如何自动合成参数、如何把提交结果传回给 AI。什么是 WebMCP为什么需要声明式WebMCP 是浏览器层面的开放提案网页可以把自己的功能注册为工具Tool供浏览器内置 AI 助手、扩展或页内智能体直接调用而不用让 AI 靠截图、模拟点击去笨拙地操控界面。WebMCP 提供两种注册方式方式适用场景需要写代码吗命令式 APIdocument.modelContext.registerTool()任意 JS 函数能力需要声明式 API表单属性已有form与标准输入控件不需要纯 HTML设计文档曾明确回答过为什么不只保留声明式网站的功能不可能只有表单JavaScript 逻辑才构成 Web 的全部能力反过来声明式 API 则让表单类功能零成本接入 AI。两者互补各管一摊。一键上手3 个 HTML 属性把 变成 AI 工具声明式 API 的核心是给表单加上 3 个新属性详见 declarative-api-explainer.mdform toolnameSearch flights tooldescriptionThis form searches flights and displays results toolautosubmit !-- 原有 input / select / button 保持不变 -- /formtoolname工具名相当于命令式 API 中的nameAI 靠它识别这是干什么的。tooldescription自然语言描述告诉 AI 何时该调用这个表单。toolautosubmit布尔属性允许 AI 填完表单后直接代用户提交如果省略它AI 填完后会把焦点放到提交按钮上并提示用户人工检查、手动提交——这对下单、付款等敏感操作非常友好。️表单被插入、移除或属性更新时浏览器会自动生成/销毁对应的声明式工具你无需任何监听代码。表单如何编译成 AI 能看懂的参数浏览器会把表单确定性地合成为一份 JSON 输入模式input schemaAI 据此知道每个字段该填什么。规则非常直观控件的name属性 → schema 中的属性名新增的toolparamdescription属性 → 每个参数的自然语言描述required属性 → 必填字段min/max/step等约束 → 数值范围声明精确算法仍在试验中Chromium 正在实现宽松版本并做社区验证。例如以下纯 HTML 表单form toolnamesearch-cars tooldescriptionPerform a car make/model search 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 /form就与一段命令式注册代码完全等价——AI 会拿到make、model两个必填字符串参数各带清晰的说明文字。这就是零 JS的含义语义化 HTML 本身就是工具的 API 文档。AI 调用表单的完整生命周期从填写到拿到结果发现AI 查询当前页面的工具列表看到toolname与描述。填写AI 按合成的 input schema 逐字段填值。提交有toolautosubmit时直接提交否则等待用户确认。拿回结果有两条通道这也是声明式 API 的精髓——JS 是可选的无跳转 JS 增强页面可用SubmitEvent#respondWith()拦截默认提交把任意结构化数据直接回传给 AI页面不跳转纯 HTML 方案表单提交跳转后目标页面上第一个script typeapplication/ldjson结构化数据会被作为工具响应回传给 AI。完全不想写 JS这条路径就够了。另外还有两个小细节值得知道表单被 reset 或toolname变化时正在执行的工具调用会自动取消并通知 AI新增 CSS 伪类:tool-form-active和:tool-submit-active可高亮AI 已填好、等你确认的表单toolactivated/toolcanceled事件则提供同样的 JS 钩子。✨最佳实践让 AI 工具又快又稳控制工具预算AI 的上下文窗口有限每注册一个工具都要占 token工具太多会拖慢推理、引发混淆——简单站点静态注册几个即可复杂应用按需动态增删表单属性。单一职责一个表单只做一个明确的事避免功能重叠让 AI选择困难。命名要精准动词区分立即执行与开始流程如create-eventvsstart-event-creation描述用正向陈述说清做什么、何时用。别让 AI 做数学题接受原始输入、在页面端做归一化枚举值用自然语言express而非内部 ID1。状态保持同步AI 和用户共享同一个页面工具执行后要立刻更新可见 UI。完整建议见 README.md 的 Best Practices 章节。浏览器支持现状现在就能试吗根据 implementation-status.md平台状态Chrome 149Origin Trial 已上线本地开发可开enable-webmcp-testing开关Edge 150Origin Trial 已上线ChatGPT Desktop已支持 WebMCPBraveLeo AI 聊天实验性支持Firefox / Safari标准讨论进行中延伸阅读关键文件导航 声明式 API 提案全文属性、处理模型、事件declarative-api-explainer.mdW3C 规范草案ModelContext接口定义声明式章节待并入index.bs背景动机、用例与最佳实践总览README.md各浏览器/智能体支持进度implementation-status.md进阶方向Service Worker 后台注册工具让用户没打开页面时 AI 也能调用docs/service-workers.md给现有表单加 3 个属性你的网站今天就拥有了面向 AI 时代的第二套 API。【免费下载链接】webmcp WebMCP项目地址: https://gitcode.com/gh_mirrors/webm/webmcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
