腾讯以ACP和MCP将本地编码助手嵌入在线编辑器

该团队的在线模板编辑器把模板以 JSON/DSL 树承载，画布、组件树、预览与保存审核围绕这棵树展开，导致「按钮圆角调大」这类小改动也需开发介入找节点、改代码、预览、排查的顺序耗时。目标是让用户用自然语言描述意图、由 Agent 理解当前模板并做受控修改。接入方式上，团队对比了裸 LLM API、自建 Agent Runtime、Spawn 本地 CLI、Vendor Agent SDK 与 ACP + MCP 五种方案，最终选择 ACP + MCP：由 ACP 标准化在线应用与本地 Agent 的会话连接，由 MCP 标准化 Agent 可调用的业务工具，从而既复用用户本机已有的成熟 coding agent，又不必把在线编辑器改造成自研 Agent 平台。 Agent 修改业务状态的方式先后否定了「直接操作 DOM 或页面函数」（会造成 Vue/React 状态与 DOM 漂移、依赖页面内部实现且难以审计改了哪个业务对象）和「把模板 JSON 镜像为本地文件」（浏览器与本地文件成为双写源，diff、dirty flag、保存审核与并发编辑都会出现同步竞态），最终采用 MCP-only Access：只提供 template.get_summary、template.get_node、template.get_template、template.patch_node、template.insert_child、template.remove_node、template.validate 七个工具，工具的实际执行落回浏览器里的在线编辑器状态，画布、预览、diff、保存审核仍走原产品链路。 架构分层为 Online Template Editor →（127.0.0.1 的 HTTP/WebSocket）→ Local Agent Proxy →（ACP JSON-RPC over stdio）→ CodeBuddy/Cursor →（MCP 工具调用）→ Template MCP →（Proxy 的 /api/tool/call）→ Browser Tool Bridge →（内存状态变更）→ Online Template Editor。 每次会话由 Proxy 创建独立的 Session Sandbox 目录，写入 AGENTS.md、CODEBUDDY.md、Host System Prompt（限定 Agent 身份为在线模板编辑器里的模板 Agent、只能通过 Template MCP 读写模板、禁止读写磁盘上的模板文件、推荐流程为先读摘要再读节点做最小 patch 后校验）、.mcp.json（含 PROXY_HTTP 与 EDITOR_SESSION_ID）以及按需安装并可被 .cursor/.codebuddy/.claude 三个 skills 路径共用的 skills 目录。 一次 prompt 的完整链路为：创建 editorSessionId、Proxy 建立 Session Sandbox 与 MCP 配置、Browser Tool Bridge 通过 WebSocket 注册 template.* handlers、Host 打开 ACP WebSocket 并 initialize/authenticate、session/new 传入 cwd 与 MCP servers、用户发送 prompt、Agent 通过 session/update 流式回传消息与工具调用状态、调用 Template MCP、由 Proxy 找到对应 Browser Tool Bridge 修改内存模板状态、在线应用刷新画布并继续原有流程。 工程细节上处理了四项：Local Agent Proxy 需放开在线应用 origin 的 CORS 响应头。请求带约定 header 或 query 作为 dev gate 防止任意网页调用本机 Agent。响应 Chrome Private Network Access 预检并返回 Access-Control-Allow-Private-Network: true（文中 HTTP 场景目前用 whistle 代理实现）。 启动脚本负责解析最新 Agent 包版本、清理旧占用端口进程、拉起 Proxy、轮询 /api/health 并提示回编辑器重试。