聊聊 AI Coding 时代生产力工具的工程架构

1.

2. 聊聊 AI Coding 时代生产力工具的工程架构以 Trae IDE 为例探索AI与研发生产力的创新融合汇报人：杨吉明 (Trae IDE 架构师)

3. IDE + AI 新操作系统 Trae IDE 介绍与亮点 Trae IDE 工程架构 Trae AI 技术解密 Trae IDE 定制化 3

4. IDE + AI AI Coding 时代的操作系统 4

5. 手工编码时代的 IDE AI 生成时代的 IDE - 代码编辑：代码导航、高亮、补全、格式化 - 智能代码补全 - 编译与构建：编译器、构建工具 - 代码上下文理解引用（No Copy-Pastse） - 代码调试：断点、变量、调用栈、控制台 - 自然语言生成代码（NL2Code） - 插件与扩展：插件体系、插件市场 - 开发流程优化（AI Debug、AI Fix）

6. IDE 成为 AI 编码操作系统，加速 Coding 进化 1.智能代码补全 2.代码上下文理解引用（AI Context）根据用户代码输入预测下一个行为，实现智能补全。代码上下文理解、智能添加上下文信息给模型。给 AI 提供仓库级别代码上下文，分析代码质量，并进行优化。 3.自然语言生成代码（NL2Code） 4.开发流程优化（Keep In Flow）用户意图识别、用户历史会话上下文自动追加。 6 用户故事自动分解为代码任务，并自动验证、排错、预览。自然语言需求转化为项目代码，并可在 IDE 中调整。无需再拷贝、粘贴代码，研发工作流程提效。

7. 泛代码补全模式 Agent 模式技术：基于插件 API，预测、补全代码技术：基于 IDE 服务，生成、辅助编码 - MarsCode 插件 - Trae IDE - Alibaba 通义灵码 - Cursor IDE - Baidu Comate - Windsurf - Github Copilot - Github Copilot …… …… 7

8. Copilot L0 没有 AI 传统 IDE 模式 - 手动编码场景 L1 IDE Agent L2 L3 驾驶辅助部分自动化有条件自动化 IDE AI 插件形态 IDE + AI 联手形态 AI 强主导 IDE 形态 - 光标上下文 - 全 IDE 上下文 - AI Agent - 代码补全、问答 - AI 拆解子任务 - IDE 工具化、服务化 MarsCode 插件 Trae IDE

9. Trae IDE 介绍与亮点 https://www.trae.com.cn/ 9

10. Trae IDE 介绍 01 AI 原生增强原生支持 AI 补全、Chat、Builder 支持文件、文件夹、终端、代码上下文 02 UI 定制增强更符合程序员审美的增强用户界面内置中文、预览等开箱即用能力 03 端云一体 RemoteSSH 连接远程主机开发云端部署能力 04 兼容 VSCode 生态体系完全与 VSCode 插件生态兼容，操作习惯保持一致 Trae IDE 是一款 AI-IDE ，旨在为开发者提供高效、智能的开发环境。它结合了最新的 AI 技术和先进的工程架构，致力于解决传统 IDE 在开发效率和智能化方面的不足。下载： https://www.trae.com.cn/

11. Trae IDE+AI 架构大图

12. Trae IDE 工程架构解析 12

13. Trae IDE 工程亮点 IDE 模块化 AI 原生 VSCode 定制化后端服务模块化更丰富的上下文对接 VSCode 插件生态前端组件模块化与 IDE 更多联动内置现代化 UI，提升体验

14. Trae IDE 为何要做分层模块化？服务层模块化 UI 层模块化采用微服务架构，减少模块冗将关键功能集中管理，简化模余，实现快速部署与迭代。块间交互，提升系统效率。非 VSCodeAPI，非 VSCodeAPI，而是微服务架构。而是 UI 内核定制。

15. 服务层模块化 - 背景与原因 • 性能较好：体积小、内存小 • 安全性高：内存安全语言，减少漏洞 • 架构统一：使用 Rust 构建工具链 • 降本增效：内存占用降低 80%+

16. 服务层模块化 - 整体构成

17. 服务层模块化整合 - 子模块管理：进程保活管理器 - 通讯链路：使用 msgpack 二进制 - 服务发现：模块与服务维度 - 服务注册：模块维度子模块 - 开发标准：统一模块注册格式 - IDL 定义与协议：Thrift/gRPC - 模块间通信协议：降低耦合度

18. UI 层模块化 - 背景与原因 • 降低与 IDE 内核耦合 • 灵活技术栈选择 • 提高开发效率 • 业务定制方便界面图

19. UI 层模块化 - WebComponents注入方式 • 优势说明 - 与 VSCode 松耦合(Command级) - WebComponent 样式隔离 • 业务效果 - 顶部按钮异步加载延迟(>5s)到同步出现(0s)

20. UI 层模块化 - 依赖反转注入方式 • 优势说明 - 与 VSCode 强耦合 (Service级) - 前端框架自由（React/Vue） • 业务效果 - 前端独立开发组件 - AI Chat / AI Builder

21. Trae AI 技术解密 21

22. Trae IDE AI 核心能力对比

23. AI Fast Apply

24. AI Fast Apply 核心模块及流程

25. AI Fast Apply • AI Chat Client (UI 端) - UI 层，负责与用户交互 - Apply 层，负责通过IDE操作代码 • AI Client Server (近端服务) - Chat 逻辑层，分析并处理 Context • AI Server (远端服务) - 管理 Prompt & 与 LLM

26. AI Builder

27. AI Builder 核心模块及流程

28. AI Builder（自动档模式） • AI Builder Client (UI 端) - UI 层，负责与用户交互 - Tool层，负责与IDE打通 • AI Client Server (近端服务) - Agent 逻辑层，LLM Context 处理 - 本地存储分析等 • AI Server (远端服务) - 管理 Prompt & 与 LLM

29. Trae IDE 定制化增强 29

30. Trae 为何要做定制化？ • AI 内置（开箱即用） • 内置定制主题（极至还原） • 内置多语言与图标（中文友好） • 内置预览能力（打通流程） • 丝滑升级（快速迭代）

31. Trae 增强开箱即用

32. CodeOSS 跟版避坑指南 • 合码工具化：自制工具集加速合码 • 模块化方式：降低耦合性，迭代隔离 • 更新检测：上游 CodeOSS 更新提醒 • 测试验证：自动化 UI 测试

33. 总结与展望 33

34. 从 Trae IDE 的视角，未来展望 • Agent -> Multi-Agent • 一方能力开放 • 生态体系建设 • Browser Use、Computer Use • 极致的端到端性能、成本 • Dev -> Dev + Ops

35. THANK YOU