WebMCP Music Composer：AI 作曲家的浏览器乐谱

想象一下这样的场景：深夜，一位独立音乐人面对空白的 DAW 界面，灵感枯竭，不知从何下笔。此时，他打开一个网页，对 AI 说一句"来首夏日流行歌"，然后亲眼看着钢琴卷帘窗上一个个音符自动涌现，鼓点自动编排，最后一键导出 MP3——这不是幻想，正是 WebMCP Music Composer 正在做的事。

---

什么是 WebMCP？

WebMCP（Web Model Context Protocol）是一个尚在草案阶段的开放协议，它的核心主张是：让 Web 应用直接将"工具"注册到浏览器或 AI Agent 的上下文中。换句话说，网页不再只是被动展示内容，而是可以向 AI 主动暴露自己的功能接口。AI 无需借助外部 API，就能"看到"并调用网页上的工具，完成复杂的多步骤任务。

这与 Anthropic 提出的 Model Context Protocol（MCP）有相似之处，但 WebMCP 更专注于浏览器端——它原生运行在浏览器沙盒中，数据不离开本地，隐私性更强，也更契合"AI 与本地应用深度交互"的未来场景。

WebMCP Music Composer 是该协议的官方演示项目，它展示了一个具体的工作流：AI Agent 如何通过浏览器内的音乐工具，自主完成一首曲子的编排。

---

核心功能：AI 全自动作曲

钢琴卷帘窗（ Piano Roll）

应用前端是一个功能完整的浏览器端钢琴卷帘编辑器，界面风格参考 FL Studio 的经典布局，深色主题配合霓虹蓝绿点缀。编辑器支持多条音轨（Tracks），每条音轨可以选择不同乐器，可添加单音、和弦、鼓点节奏型，以及丰富的声音处理效果。

用户只需输入一段文字描述（如"来首 D 小调的爵士夜曲，72 BPM，用贝斯、电钢琴和弦乐"），选择一个大语言模型（支持 GPT-5.4、Claude Sonnet 4.6、Claude Opus 4.6 等），点击"Start Agent"，AI 便会接管整个创作过程。系统实时显示 Agent 的工具调用次数、成功率、队列深度和运行时长，用户能亲眼看到音符是如何一个一个"生成"的。

23 个音乐工具

Agent 并非凭空创作，而是通过调用一组精心设计的 WebMCP 工具来完成工作，目前注册的工具包括：

• 音符操作：add_note（添加单个音符）、add_chord（添加和弦）、add_pattern（添加节奏型，如 kick、snare、hihat、bass_walk）
• 轨道管理：add_track（添加音轨）、set_instrument（设置乐器）、set_bpm（调整速度）
• 效果器：set_delay（延迟）、set_distortion（失真/饱和）、set_eq（均衡器）、set_lfo（LFO 调制）
• 创作辅助：get_genre_blueprint（获取曲风蓝图，返回 BPM、调性、乐器配置建议）、get_composition_state（获取当前作品状态）
• 导出：export_mp3（导出 MP3）、export_stems（导出分轨）
• 共享：save_share、load_share（基于 Firebase Realtime Database 的作品分享）

Agent 拿到描述后，会先调用 get_genre_blueprint 获取曲风参数建议，再依次调用轨道、乐器、音符、效果器工具，最终生成完整的作品。整个过程完全透明，用户可随时点击"Stop"中断。

乐器引擎

音频合成采用了 Soundfont Player（基于 Web Audio API 的 SF2 音色库），支持 16 种乐器分类（钢琴、弦乐、贝斯、合成 Lead、鼓组等），每种分类下有多达 7 种音色变体。MP3 编码则使用了 @breezystack/lamejs。这意味着整个合成链路是纯浏览器端的，不依赖任何服务器端音频渲染。

在线演示

项目提供了免费的在线体验（music.leanmcp.live），无需安装任何软件，用 Chrome 浏览器打开即可体验 AI 作曲。第一次生成免费，之后需注册 LeanMCP 账号并充值积分。

---

技术架构

用户输入描述 → AI Agent（LLM）→ WebMCP Runtime → 23 个音乐工具
                                               ↓
                   ← Piano Roll UI（React）← 音频引擎（Soundfont Player + lamejs）

层级	技术选型
前端框架	React 18 + TypeScript + Vite 5
UI 组件	自研钢琴卷帘（PianoRoll.tsx）+ 播放控制（PlaybackControls.tsx）
音频合成	Soundfont Player（SF2 Web Audio）+ lamejs（MP3）
AI 接入	LeanMCP Gateway（Claude/GPT 代理）+ 工具调用协议
身份认证	Firebase Authentication（Google 登录）
状态分享	Firebase Realtime Database
监控	PostHog（用户行为分析）

架构上采用了 Model-View-AGENT 三层分离：Model 层处理音频合成和状态管理，View 层负责渲染钢琴卷帘和控件，Agent 层则封装了与 LLM 的对话逻辑和工具调用的编排。

---

部署评估

容器化支持

不支持。项目根目录没有 Dockerfile，也没有 docker-compose.yml，无法直接用容器部署。这是该项目在部署方面最大的局限——它依赖于 Chrome 浏览器环境和本地音频子系统，天然不适合容器化。

Web-UI 支持

支持。项目本质上就是一个完整的单页应用（SPA），基于 React + Vite 构建，有独立的 index.html 入口、路由、样式系统，直接 npm run dev 即可在本地启动，监听 4175 端口。

快速部署（quick_deploy）

部分支持（partially_supported）。有 Web UI，但无 Docker 化支持。如果要在服务器上运行，需要 Node.js 环境 + npm install，依赖较多（React、TypeScript、Firebase、soundfont-player 等），并非开箱即用。

本地运行条件

• Node.js（建议 18+）
• Google Chrome（建议 Canary 版本，以获得最佳 WebMCP 原生支持）
• LeanMCP API Token（来自 app.leanmcp.com，需要账户积分）
• .env 中配置 VITE_GATEWAY_API_KEY

---

AI 相关性评估

维度	评分	说明
AI 框架集成	★★★★☆	Agent 直接调用 LLM，通过 WebMCP 协议与工具交互
自动化程度	★★★★★	全自动作曲，无需人工干预，AI 自主决策工具调用顺序
模型多样性	★★★★☆	支持 GPT-5.4 系列和 Claude 系列多模型
技术创新性	★★★★★	WebMCP 协议是 MCP 的浏览器端扩展，具有较高创新价值
开源完整性	★★★☆☆	核心代码完整，但协议规范（webmcp.link/spec）仓库 404，信息有限

---

局限与风险

1. 协议不成熟：WebMCP 目前标注为 "PENDING standard"，规范文档不可访问，正式标准尚未稳定，未来可能存在 breaking change。
2. 商业依赖：AI 作曲能力依赖 LeanMCP 云端网关（aigateway.leanmcp.com），并非纯本地运行——用户需要付费充值积分。
3. 无容器化：无法用 Docker 快速部署，限制了其在服务器端的自动化运行。
4. 无许可证：项目仓库没有 LICENSE 文件，代码版权状态不明确。
5. 浏览器兼容：最佳体验需 Chrome Canary，其他浏览器依赖 polyfill fallback。
6. 音轨数量有限：实测 Live Demo 显示初始状态为 0 tracks，用户需要等待 Agent 自动添加。

---

行业意义

WebMCP Music Composer 的价值不仅在于做出一首"夏日流行歌"，更在于它验证了一条重要路径：AI Agent 与本地应用的无 API 集成。

传统上，AI 要操控一个音乐创作工具，需要通过该工具开放的 HTTP API 或插件协议。而 WebMCP 彻底绕过了这个障碍——它让 AI 直接"看见"并操作浏览器 DOM 中的工具函数，就像一个有权限使用浏览器的人一样。这意味着不仅音乐创作，任何 Web 应用（电子表格、设计工具、数据库界面）都可以通过类似方式被 AI Agent 接管。

这个项目是 LeanMCP 社区的旗舰演示，背后推动的是一个正在草案中的浏览器端 Agent 交互标准。随着 MCP 生态的扩张，WebMCP 有望成为浏览器端 Agent 工具注册的事实标准之一。