7.8
深览指数
科技Bestblogs·腾讯云开发者··AI 生成
如何将本地 CodeBuddy/Cursor 嵌入在线应用
本文以在线模板编辑器为场景，详细对比了五种将本地 Agent（如 CodeBuddy、Cursor）嵌入在线应用的方案，最终选择 ACP + MCP 架构。该方案通过 MCP-only Access 确保在线编辑器为唯一业务状态源，Agent 不直接操作 DOM，而是调用结构化工具进行修改。文章给出了完整的四层架构实现细节，包括 Session Sandbox 设计、系统提示词编写、MCP 配置以及 CORS、PNA 等工程问题的解决方案。适合需要将 AI Agent 能力安全集成到现有 Web 应用中的前端或全栈开发者阅读。原文 ↗
核心观点
- ▍ACP + MCP 是实现本地 Agent 嵌入在线应用的最优方案，能标准化会话连接与业务工具暴露，复用本地成熟 Agent，无需在线编辑器自研 Agent 基础设施。
- ▍Agent 与 Chat Bot 的本质区别在于前者能完成任务，模板编辑场景需要 Agent 具备读取状态、理解需求、调用工具、多轮澄清、重试与取消等完整工作流能力。
- 01文章对比了裸 LLM API、自建 Agent Runtime、Spawn 本地 CLI、Vendor Agent SDK 和 ACP + MCP 五种方案，从开发成本、标准化程度、安全性等角度论证了 ACP + MCP 的优势。
- 02MCP-only Access 是关键设计：Agent 不直接操作 DOM 或本地模板文件，而是通过结构化的 MCP 工具（如 template.patch_node）请求修改，由 Host 决定执行并刷新画布，保持预览、diff、保存审核流程完整。
- 03Session Sandbox 为每次对话创建独立目录，包含系统提示词、MCP 配置和按需安装的技能（skills），Agent 只能通过这些标准化接口操作，不会对在线编辑器原有状态造成破坏。
- 04整体架构分为四层：在线编辑器、本地 Agent 代理、ACP Agent、MCP + Browser Tool Bridge，并给出了 System Prompt 编写、MCP 配置、技能管理、一次 prompt 完整链路等实现细节。
- 05线上 HTTPS 页面访问本地 127.0.0.1 服务时，需要处理跨域（CORS）、Private Network Access（PNA）preflight、设备接入认证（dev gate）以及启动脚本的优雅重试机制等工程问题。
反方 / 局限
- — 该方案要求用户本地必须安装并运行 CodeBuddy 或 Cursor 等 Agent 客户端，对于没有预装或不愿意安装额外软件的终端用户而言具有较高的使用门槛。
- — ACP 协议本身仍在发展阶段，其标准化程度和生态系统成熟度可能不如一些大厂的自研 SDK，未来协议变更可能带来兼容性问题。
4 分钟 · 4 卡片 · 8 资料
读原文 →