# WebMCP 实战更新：让 AI 在网页里创作音乐、分析数据、修改页面

之前写过一篇 [《WebMCP 是什么？一文读懂 Chrome 浏览器原生 AI 工具协议》](https://cloud.tencent.com/developer/article/2658269)，主要介绍网页如何把自己的能力交给 AI，以及我做的 WebMCP Playground 和调试插件。

这次继续更新这两个项目。上一次展示了不少工具，但有些体验还停在“能调用”：音乐能打节拍，却很难写出完整旋律；数据页能切换图表，却不方便追查结论来自哪几条数据。工具有了，离真正好用还差一段。

所以这轮改动集中在一件事上：让 AI 的操作进入可以继续编辑、可以核对、可以导出的工作流程。我还接上真实 DeepSeek API 跑了一组任务，保留了调用记录、页面截图和文件。除了成功的结果，也遇到了参数错误和模型解释出错。

## 这次更新了什么

两个项目各有分工：**WebMCP DevTools** 是 Chrome 扩展，用于检查、执行和调试页面工具；**Playground** 是体验站，展示网页接入这些工具后能做什么。

| 场景 | 这轮更新 |
| --- | --- |
| 音乐工作台 | 从步进节拍扩展为带音高、起始拍、时值的曲谱，支持多轨、整曲播放和 MIDI 导出 |
| 网站工坊 | 结构化区块和源码编辑、实时预览、历史恢复、版本校验及 ZIP 导出 |
| 数据工作台 | CSV 导入、筛选聚合、缺失值计数、原始行查询和保存分析备注 |
| 活动策划台 | 按人数重算预算、检查日程冲突，先生成候选方案，再由用户确认 |
| 插件 | 改进动态工具刷新、跨页面调用和 Markdown 展示，完善 frame 筛选、执行记录与回归测试 |

音乐页还补了一处日常使用很明显的问题：现在直接点播放就能试听，播放中调音量和静音会实时生效，进度不会归零。

体验站已经更新到 Playground 3.0.1。下文真实模型测试用的是插件 2.3.2 开发构建、Playground 3.0.0 和 Chrome for Testing 151；3.0.1 的播放修复另做了浏览器验证。模型为 deepseek-flash，非思考模式。

## 先听音乐：这次真的写进了曲谱

音乐是我最想改好的部分。一个音乐页面，如果只能把几个鼓点排成循环，很难说明 AI 参与创作有什么意义。

新的曲谱保留了音符的音高、起始拍和时值。模型可以读取当前作品，改一条旋律、补一条低音；人在同一个页面里试听、调音量，再继续修改。作品最后还能导出 MIDI，带到其他音乐软件里。

测试时，我给 DeepSeek 的要求是：

> 写一段 8 小节、3/4 拍、108 BPM 的生日祝福旋律，C 大调，钢琴主旋律加轻柔低音伴奏，结尾落在 C 上。有短句呼应和长短音变化，不要只循环几个固定音。

它最后写出的作品叫《周末的小小祝福》：钢琴 27 个音符，低音 15 个，共 24 拍，时长约 13.33 秒。两个声部最后分别落在 C4 和 C3。

![DeepSeek 写入的双轨旋律，页面处于播放状态]![03-music-page.png](https://developer.qcloudimg.com/http-save/yehe-7472800/99f82895bb2d1c6b66f0078794af0d94.png)

这中间也有失败。模型第一次写整曲时，把休止写成了名为 `Rest` 的音高，被页面拒绝。之后它逐轨修改，重新提交完整曲谱，改用音符间的时间空隙表示休止。

这组任务共发起 11 次工具调用，其中 1 次参数错误。最后的播放工具返回成功，页面也进入了播放状态。测试脚本在这轮任务前完成了浏览器要求的声音交互；新版页面已经把这个过程收进正常播放操作，无需单独开启声音。

[这份 MIDI](birthday-blessing.mid)和[完整曲谱 JSON](birthday-blessing-score.json)都保留了下来。曲谱结构、播放和导出验证通过；旋律是否好听，读者可以试听后自己判断。

## 数据分析：除了一个数字，还要能找到原始行

旧版数据场景偏重图表展示。这次我更关心一个具体问题：模型给出的结论，能不能回到数据里核对？

示例 CSV 有 10 条支出记录，其中一条金额缺失。我要求模型统计 2026 年 10 月支出，按分类求和，并明确要求不要把缺失金额当成 0。

| 检查项 | 页面计算结果 |
| --- | --- |
| 原始记录 | 10 条 |
| 10 月筛选命中 | 7 条 |
| 参与金额计算 | 6 条 |
| 因金额缺失被排除 | 1 条 |
| 餐饮支出 | 748 元，来自原始第 5、7 行 |
| 已计入金额合计 | 1103 元 |

![支出统计与缺失值计数]![01-data-page.png](https://developer.qcloudimg.com/http-save/yehe-7472800/e08cefb3e1f41c20816039cda6d7761a.png)

模型把结论保存成了分析备注，附带查询标识和当时的计算结果。之后修改筛选条件，也能回查这条备注是在什么条件下得到的。

它曾尝试读取第 1 行，而第 1 行是表头，数据从第 2 行开始。工具拒绝后，模型改用当前筛选条件分页读取，才拿到正确记录。

这里让模型选择查询、组织解释，让页面负责计算和返回来源行。需要核对时，使用者能继续往下查。

## 修改网页：结果要能留下来继续用

网站工坊现在既能编辑页面区块，也能修改 HTML、CSS 和 JavaScript，预览会随之更新，并保留可恢复的历史版本。

我让模型把基础模板改成“周末的生日小聚”：暖橙色，2026 年 10 月 31 日 14:00，地点是城市花园，保留称呼和人数报名表。

它进行了 3 次工具调用：读取网站状态，携带当前版本号写入新内容，再检查预览控制台。页面从版本 1 更新到版本 2。

![模型修改后的生日邀请网页]![01-data-page.png](https://developer.qcloudimg.com/http-save/yehe-7472800/d98ded24634d34e9b868522a48102254.png)

模型在回复里说明，控制台没有报错，但它没有实际提交报名表。随后测试脚本填写“测试来宾”、人数 2 并提交，验证页面收到报名，再导出了包含 HTML、CSS、JavaScript 的 ZIP。

## 活动策划：AI 可以准备方案，确认留在页面上

活动策划台原计划是 12 人。我要求改成 16 人，总预算 1500 元，保留蛋糕和音乐环节，先提交候选方案，等待确认。

模型读取计划、检查候选方案并提交提案。此时原计划仍是 12 人，新方案单独展示，等页面上的确认按钮被点击后才应用。

![候选方案已经生成，当前计划尚未应用修改]![04-planner-page.png](https://developer.qcloudimg.com/http-save/yehe-7472800/32bb36c0bf8415a1eb86dd2bc9a2fef4.png)

新方案是餐食 880 元、蛋糕 268 元、布置 180 元，合计 1328 元，剩余 172 元。这个例子没有给模型提供代替用户批准方案的工具。

测试脚本执行页面确认后，再向模型发出“已确认，请生成邀请网页”。模型重新读取状态，生成邀请页，切换到网站工坊，并核对日期和 16 位来宾。

跨页面后，可用工具已经变了。插件要及时刷新工具定义，后续调用才能继续使用当前页面的能力。这是本轮插件更新重点处理的链路之一。

这组测试还有一句值得留下来的错误：模型说“人均费用随人数上升”。但原计划是 1108 ÷ 12，约 92.33 元；新方案是 1328 ÷ 16，正好 83 元。人均费用实际下降了。

页面计算结果正确，模型对结果的解释仍然可能出错。因此执行结果和模型文字需要分开检查，不能只凭最后一句总结判断任务完成情况。

## WebMCP 的价值，落在同一个工作现场

这几组体验让我更确定，WebMCP 的一个重要价值，是把 AI 接进用户已经打开的工作空间。

在音乐软件里，人和 AI 修改的是同一份曲谱；在数据页面里，双方面对相同的筛选条件和来源行；在策划台里，AI 生成候选方案，使用者在原来的界面里查看差异并决定是否接受。

相比围绕按钮、坐标和 DOM 结构组织操作，工具可以直接表达“修改曲谱”“查询支出”“提交候选方案”。界面布局变化时，只要工具约定保持稳定，调用方就有机会继续使用同一套参数。

它也适合围绕当前页面状态设计能力：选中的轨道、未保存的草稿、撤销历史、待确认的方案，都是用户正在处理的内容。工具执行后，结果能立刻回到界面，继续由人编辑。

当然，工具是否完整、权限是否正确、错误如何处理，仍取决于网站实现。WebMCP 不会自动为任意网页补齐业务能力，也不会替代后端鉴权和输入校验。

前一篇文章里有些对未来的描述写得比较满。这次补充一点：网站仍需主动接入，浏览器支持也在演进；需要用户授权的操作和业务限制，不会因为注册成工具就自动消失。

## 插件更新：让每次调用都有地方查

WebMCP DevTools 的主要作用，是帮助开发者看清网页到底开放了什么，以及模型实际调用了什么。

![WebMCP DevTools 读取网站工坊的真实工具列表]![04-planner-page.png](https://developer.qcloudimg.com/http-save/yehe-7472800/775174170676b0211806d2b7b927d3cf.png)

我通常先看工具描述和参数 Schema，手动执行一个简单调用，再让 AI 组合操作。出了问题，就回到记录里看输入、输出、错误和耗时。

这轮更新重点包括：

- 工具列表随页面切换和动态注册更新，后续 AI 调用使用新的工具定义。
- 按标签页和 frame 查看工具，定向执行，减少同名工具带来的混淆。
- 改善聊天里的 Markdown 表格、列表和代码块展示。
- 配置执行超时、请求取消，保存回归用例和预期 JSON 结果，检查工具 Schema 变化。
- 保存工具快照、对比差异，并回查来自手动执行、AI 面板和 MCP Bridge 的调用。

这次保留的 8 段真实模型对话，共有 **45 次独立工具调用**：42 次成功，2 次参数错误被拒绝后修正，1 次是故意触发的失败测试。另有一次生态挑战未达目标。工具执行成功和任务达成，是两件需要分别检查的事。

这个数字用于说明本次测试过程，不是通用成功率。模型解释有误、测试脚本做了哪些点击、哪些只是本地演示，也都保留在记录里。

## 想体验的话，从一个小任务开始

1. 打开 [WebMCP Playground](https://2019-02-18.github.io/webmcp-demo/)，先手动试听音乐或编辑页面。
2. 按 [Chrome 官方文档](https://developer.chrome.com/docs/ai/webmcp)确认浏览器支持。本地测试可以开启 `chrome://flags/#enable-webmcp-testing` 后重启浏览器。
3. 安装 [WebMCP DevTools](https://chromewebstore.google.com/detail/webmcp-devtools/cgfogfkcfjdgpekdndcihajfjkaekjcl)，打开侧栏，检查页面有没有注册工具。
4. 在 AI 设置里配置自己的服务商、模型和 Key，先尝试“读取当前曲谱，降低伴奏音量”这类小任务，再尝试完整创作。

本文对应插件 2.3.2 开发构建。2026 年 10 月 22 日查询时，商店公开页面仍显示 2.2.0，升级功能请以实际安装版本为准；体验站已发布 3.0.1。源码与后续版本更新见 [GitHub 项目](https://github.com/2019-02-18/WebMCP-DevTools)。

旧文的 API 示例也需要随版本更新。当前 Chrome 官方命令式示例使用 `document.modelContext.registerTool(...)`。新项目请参照[最新 API 文档](https://developer.chrome.com/docs/ai/webmcp/imperative-api)，不要直接照搬旧文的 `navigator.modelContext.addTool(...)`。

使用云端模型时，提示词、工具定义和返回给模型的数据会发送到对应服务商。体验站使用示例数据；在自己的业务页面里，需要考虑哪些内容适合交给模型。

如果你已经给某个网页接上了 WebMCP，也欢迎聊聊工具是怎么设计的、模型会在哪一步卡住。我接下来更想把这些真实问题收集起来，让插件和示例继续往好用的方向走。


之前写过一篇 《WebMCP 是什么？一文读懂 Chrome 浏览器原生 AI 工具协议》，主要介绍网页如何把自己的能力交给 AI，以及我做的 WebMCP Playground 和调试插件。

WebMCP 实战更新：让 AI 在网页里创作音乐、分析数据、修改页面

WebMCP 能让 AI 在网页里做什么？这次更新 WebMCP DevTools 和 Playground，接入真实 DeepSeek API，实测音乐创作、网页修改、CSV 分析和活动策划。文章记录了 45 次工具调用，展示完整曲谱、数据来源追查和人工确认流程，也保留参数错误与模型解释出错的过程，看看网页工具如何变成可编辑、可核验的 AI 工作流。

人工智能

前端

开发工具

WebMCP实战更新：AI创作音乐、分析数据、修改网页，支持曲谱编辑、MIDI导出、数据溯源、版本恢复。真实DeepSeek测试45次调用，42次成功。工具需主动接入，模型解释可能出错，执行结果需人工核对。

数据分析

回归测试

JavaScript

DeepSeek

Markdown

GitHub

JSON

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

WebMCP 实战更新：让 AI 在网页里创作音乐、分析数据、修改页面-腾讯云开发者社区-腾讯云

WebMCP 实战更新：让 AI 在网页里创作音乐、分析数据、修改页面

WebMCP 实战更新：让 AI 在网页里创作音乐、分析数据、修改页面

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐