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），仅供参考
企业数字化 ERP 产品动态
相关推荐
百考通AI实操指南：毕业设计从“肝”到“干”的高效路径 每年三四月份，各大高校的实验室和宿舍里总会准时上演同一出戏：论文查重红字满天飞、代码跑不出结果、开题报告还没动笔、PPT答辩日期已经逼近。我见过太多学生把毕业设计活活完成了一场“肝”的竞赛——熬夜刷夜赶进度、复制粘贴攒章节、对着空白文档发呆… · 2026/9/25 2:41:00
Visual Syslog日志存储与轮转：按大小/日期自动旋转日志文件的实用技巧清单 Visual Syslog日志存储与轮转：按大小/日期自动旋转日志文件的实用技巧清单 【免费下载链接】visualsyslog Syslog Server for Windows with a graphical user interface 项目地址: https://gitcode.com/gh_mirrors/vi/visualsyslog
Visual Syslog 是一款免费… · 2026/9/25 2:40:54
【数据分析八步法】将模糊需求转化为可验证的分析问题 周一早上，运营同事把一条消息发给分析师小周：“最近业绩好像不太行，帮忙看看数据。”小周若立刻打开报表，很容易陷入无休止的截图与解释：这里的“业绩”是成交额、净收入，还是订单数？“最近”是昨天、上周，还是本月累计？业务同事最终要决定调整排班、促销预算，还是商… · 2026/9/25 2:40:54
波场链上监控与交易自动化：从区块轮询到TRC20信号捕获 简介：面向Java开发者和区块链技术学习者，这套资料提供一套基于TRON波场链的监控与交易实现方案。方案覆盖HD钱包生成、TRX余额查询、TRC20代币余额查询、TRX与TRC20转账、TRX冻结换取TRON Power（TP）、交易与转账信息查询、区块信息… · 2026/9/25 3:07:21
Pomander PHP 部署实战：任务配置、多机并行与回滚避坑指南 简介：Pomander是一款面向PHP开发者的应用部署工具，适合需要频繁迭代、多环境发布的敏捷团队与协作项目，用于简化代码从开发到生产环境的推送流程。资源包共38个文件，以26个PHP源码文件为核心，辅以yml、yaml等环境与持续… · 2026/9/25 3:07:21
H5跳转微信小程序的三大方案：Scheme、URL Link与开放标签实战指南 1. 项目概述：为什么H5跳转微信指定页面这件事，比你想象中更难也更重要“外部H5跳转微信指定页面”——这短短十个字，背后是无数前端工程师、小程序开发者、运营同学在深夜改需求时咬牙切齿的战场。我做过6个年均DAU超500万的微信生态项目&… · 2026/9/25 3:07:15
Xray 共享工作区与基于能力的 RPC 系统设计：从 2018 年 4 月 9 日周报看协作编辑的底层实现 开发工具 【免费下载链接】xray An experimental next-generation Electron-based text editor 项目地址： https://gitcode.com/gh_mirrors/xray/xray 点击查看 免费下载 Xray 在 2018 年 4 月 9 日的更新周报中记录了共享工作区（Shared Workspaces&… · 2026/9/25 3:07:03
零广告靠社媒：独立站卖数字材料月入数万美元的运营拆解 1. 项目拆解：卖“材料”的独立站到底是一门什么生意1.1 “材料”是什么，为什么能卖出高溢价先说说“材料”这个引号。很多人看到“卖材料”第一反应是卖钢筋水泥，或者是卖布料皮革，但做独立站的人听到这个词，脑子里想的… · 2026/9/25 3:07:03
创维E900V22D刷机全攻略：S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战：从Mosquitto到EMQX /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37
