用 Trae IDE 实战从零搭建一个可切换 DeepSeek、智谱等多模型的 AI 聊天应用，体验 Builder 模式自动生成项目、Chat 模式解 bug，记录暗黑模式等需求中 AI 改乱布局的坑，最后手动调好。项目涵盖流式响应、Markdown 渲染、代码高亮、自动滚动等，整体效率高，但复杂交互仍需人工盯一下。对不想付 Cursor 费用的中文开发者来说，是比较友好的选择。
Trae 是字节跳动推出的免费 AI 集成开发环境，内置了 Claude 3.5 和 GPT-4o 这些主流模型。支持中文界面，提供 AI 问答、智能代码生成、补全，还能直接丢图片给它。用了一段时间，觉得对于不想折腾配置、也不想付 Cursor 订阅费的人来说，是个挺趁手的工具。
如果已经了解过可以直接跳到实战部分，我带你从 0 开始用 Trae 写一个 ChatBot。
去官网下载就行。
点 Download 就能下到安装包。
安装程序会让你选主题和语言，原生中文支持，也能从 VSCode 一键导入插件和设置——这功能省了不少事。
接下来可以勾选添加 trae 命令行，这样在终端里就能直接 trae . 打开当前目录。
trae . # 打开命令行所在目录
trae /developers/app/xxx # 打开指定项目
如果授权登录失败，检查一下网络环境。
打开 Trae，界面挺清爽，左侧文件树，中间编辑区，右侧是 AI 对话。不像某些 IDE 插件那样杂乱。
Trae 的 AI 辅助分两个模式：Chat 和 Builder。简单说，Chat 用来聊、用来问，Builder 则直接动手干活。下面先用一个小游戏熟悉 Builder，再实战搞个 ChatBot。
Chat 就是常规的 AI 问答，通过对话让它给代码建议、修 bug、解释逻辑。
如果右侧栏没显示，按 Command+U 呼出，然后点上面的 Chat。
支持上下文引用、贴图片、切换模型（Claude 3.5 / GPT-4o）。用 # 能快速把文件或整个工作区塞进提示，鼠标移到文件名上还能预览目录树，文件多了也不怕选错。
AI 返回的代码块右上角有四个按钮：复制、插到光标处、添加到新文件、应用到对应文件。中间的'插到光标处'和'添加到新文件'比其它 IDE 更方便，不用先复制再找地方粘贴。
选中代码后按 Command+I，会弹出一个行内输入框，直接说要怎么改。
改完后会给你对比修改前后的差异，点接受或拒绝。
如果只是想提问，选中代码然后 Command+U，就能把代码片段一起发给 AI。按 esc 关闭行内输入框。
在输入框里用 # 引用文件，给 AI 更多上下文。为了回答更准，可以去设置里构建索引。构建到 100% 时，回答和项目的匹配度最高。
从 GitHub 拉下来的项目，想快速看懂源码，用 #workspace 把整个仓库喂给它，效率很高。
Chat 模式适合边学边问，而 Builder 模式更像一个能直接帮你把活干了的助手。下面先用 Builder 写个贪吃蛇感受一下。
Builder 模式能从零搭起一个完整的项目，自动写代码、创建文件，过程中还会问你是否要运行某条命令，点一下就行。
同样 Command+U 打开侧栏，点顶上的 Builder。
告诉它用 Vue 3 写个贪吃蛇游戏。
它给出的初始化命令，点运行就行。然后会自动创建文件、写代码，中间需要运行命令时也会提示，有报错还会自动修。
代码写完会让你运行启动命令，然后给一个预览按钮，点击后在 Trae 内嵌的 Webview 中打开。实测贪吃蛇玩起来没 bug。
如果对单个文件满意，可以点文件顶部的接受按钮；全都没问题就点'全部接受'。
整个过程基本没写代码，就点点确认，Builder 模式搭个原型确实快。
熟悉了基本操作，真正来搞个实际项目——一个可以切换 AI 模型、支持流式响应的聊天应用。技术栈选了 Vue 3 + Vite + TypeScript + Tailwind CSS，用 pnpm 管理依赖。
写个清楚的提示词能很大程度影响生成结果。我直接给了它一段需求描述，UI 布局、聊天气泡样式、技术栈都写清楚了。
## 角色 你是一位资深前端工程师，擅长使用 Vue 3 + Vite + TS + Tailwind CSS 开发现代 Web 应用。 ## 核心需求 开发一个聊天页面，包含以下功能： 1. **布局**： - 页面背景为白色，文字为黑色 - 使用 `main` 标签包裹内容，宽度在屏幕 >780px 时为 780px，否则为 100% - `main` 标签有 20px 的横向内边距，高度为 100vh，内容超出时显示滚动条 2. **输入区域**： - 底部固定定位，距离底部 20px - 包含一个 `textarea` 输入框和一个发送按钮 - `textarea` 背景为白色，placeholder 为'你有什么要我帮助的吗？' - 发送按钮为蓝色背景，使用 SVG 图标 - 输入区域整体有 1px 浅灰色边框，宽度为 100%（最大宽度为内容区域宽度） 3. **聊天列表**： - 用户聊天气泡：蓝底白字，文字居右，宽度自适应内容 - AI 聊天气泡：白底黑字，1px 浅灰色边框，文字居左，宽度自适应内容 ## 技术栈 - Vue 3 + Vite + pnpm - Tailwind CSS（用于快速样式开发） - 使用 SVG 图标（发送按钮） ## 输出要求 1. 使用 Tailwind CSS 实现样式 2. 确保布局和样式完全符合需求
如果没有安装 pnpm，把 pnpm 换成 npm 就行。技术栈也可以换成自己熟悉的。
新建一个空目录，打开 Builder 模式，把上面的提示词发过去。我顺便还传了一张示例图片，让它更清楚我想要的效果。
点击发送，它让运行初始化命令，我照做。
接着就自动创建了 Vue 3 项目，开始写代码。
中间 running 命令时有报错，它自己尝试修复，虽然给的命令不太对（正确应该是 npx tailwindcss init），但它帮我把 tailwind 配置文件补上了，跑起来没问题。
很快写好了，点预览。
报错了——它自己检测到并指出了问题，是依赖版本不对，删掉重装后正常了。
一个基本的聊天页面就有了，样式中规中矩，后面我再微调。
现在让它接入 AI 聊天能力，要求用 LangChain.js、支持流式响应，环境变量管理 API 密钥。
我需要你为我的项目接入 aibot 具体要求如下： 1. **功能扩展**： - 在现有聊天页面中集成 LangChain.js，实现与 AI 的对话功能。 - 支持流式响应（Streaming Response），提升用户体验。 2. **环境配置**： - 使用 `.env` 文件管理 API 配置，包括 `API_BASE_URL` 和 `API_KEY` 以及 `Model`。 - 确保环境变量在开发和生产环境中均可使用。 3. **技术栈**： - Vue 3 + Vite + pnpm - Tailwind CSS（用于样式） - LangChain.js（用于 AI 对话逻辑） **输出要求** 1. `.env` 文件示例 2. LangChain.js 集成逻辑 3. 流式响应实现代码
把这段发给 Builder，它修改了代码，还创建了 .env 文件。我填上 deepseek 的 API 信息。
重新运行，流式对话就通了。中间如果有 bug，Chat 模式随时可以问。
下面给它加点难度——加一个切换不同平台 AI 模型的下拉框。
改完后我点了全部接受。
让它写个切换模型的 Dropdown，把 DeepSeek 和智谱的配置放到单独的文件里，组件也要封装好。
**角色** 你是一位资深前端工程师，擅长使用 Vue 3 + TypeScript + Tailwind CSS 开发现代 Web 应用。 **核心需求** 1. **功能扩展**： - 在输入框上方添加一个 `Dropdown` 下拉框菜单，用于切换不同平台的 AI 模型。 - 按钮大小为 30x30px，使用设置图标（SVG）。 - 点击按钮后显示模型列表，点击列表项切换模型。 2. **模型配置**： - 新建 `src/config/models.ts` 文件，存放不同平台的 AI 模型配置。 - 从环境变量中读取 API 密钥、基础 URL 和模型名称。 3. **环境变量**： - 修改 `.env` 文件，支持 DeepSeek 和 Zhipu 两种模型配置。 4. **代码优化**： - 使用 TypeScript 实现强类型检查。 - 封装 `Dropdown` 组件，提升代码复用性。 **技术栈** - Vue 3 + Vite + pnpm - TypeScript - Tailwind CSS（用于样式） - Axios（用于 API 调用） **输出要求** 1. 完整的 Vue 组件代码（ChatPage.vue） 2. `Dropdown` 组件代码 3. `models.ts` 配置文件 4. 更新后的 `.env` 文件
发送后它就开始改。
创建了 Dropdown 组件和 models 配置，更新了 .env。
我把 .env 里的 key 和 baseUrl 改成自己的，DeepSeek 和智谱都配了。
App.vue 里有个报错，LangChain 里缺了类型导入，可能是 AI 漏掉了。我选中错误，点'添加到对话'问它，它给了修复方案，但没自动写进文件。手动添上后好了。希望以后能更智能一点。
效果出来了，但下拉框弹出方向不对，被挡住了。再开一次 Builder 对话（避免上下文太长），引用文件后让它改弹出方向。
改了相关代码，就好了。
这次引用文件，它直接自动选中了当前文件，回车就行。
改完后能正常切换模型了，没问题就全部接受。
AI 返回的内容有 Markdown 标记，直接显示是原始文本。让 Builder 接入 markdown 渲染。
它自动装了 markdown 渲染库，加了代码逻辑。
渲染是有了，但我还想要代码高亮。再提一句需求。
它会装上 highlight.js，并加好高亮逻辑。最终效果没问题。
全部接受。
最后一个需求：暗黑模式切换。给它指定的按钮样式、位置和主题色。
请你给这个项目添加暗黑模式 1. **暗黑模式切换**： - 新增一个切换按钮，圆形，大小为 45x45px，定位在 `main` 标签内容的右上角。 - 按钮图标在 Light 模式下显示月亮（Moon），Dark 模式下显示太阳（Sun）。 - 点击按钮切换 Light/Dark 模式。 2. **主题颜色**： - 主题色：`#3662e3`（用于按钮、链接等）。 - Light 模式背景色：`#fafafa`，文字颜色：`#09090b`。 - Dark 模式背景色：`#09090b`，文字颜色：`#fafafa`。 3. **技术栈**： - Vue 3 + Vite + pnpm - Tailwind CSS（用于样式） - SVG 图标（用于按钮） **输出要求** 1. 完整的 Vue 组件代码（DarkModeToggle.vue） 2. 更新后的 `main` 标签样式 3. 主题颜色配置
结果出来的效果不太理想。
让它接着改。
切换是能切换了，但布局被弄乱了。
来回改了几次都不满意，干脆全部拒绝，恢复到上一个版本。暗黑模式切换的逻辑本身没大问题，就是样式细节需要人手调一下。我手动改了改，最终变成我想要的样子。
最后再加个消息列表自动滚到底部的小功能。
我想要消息列表内容溢出时，内容区域自动滚动到底部
引用 App.vue 发过去。
它生成了 scrollToBottom 函数，并在新消息到来时调用，效果符合预期。
到这里，一个功能齐全的 ChatBot 就完成了。
除了搭项目，Trae 还能帮不少忙。
从 GitHub 拉下项目后，先构建索引，然后切到 Chat 模式，用 #workspace 引用整个仓库提问。它会总结项目结构、解释某个文件的用途，不用挨个点开看。
先构建索引。
这样回答更贴合项目。
提问时选 Chat 模式，输入 # 选 Workspace。
它能告诉你某个文件是干什么的、用了什么技术栈。
遇到不理解的代码，选中后 Command+U 直接问，或者引用整个文件，比 Google 快。
不想写 README 的时候，丢给 Builder。
用它生成个草稿，再自己改改。
还可以让它把项目经历写成简历条目。
在这基础上改一改就能用。
甚至能扮演面试官，围绕项目提问。
整个项目用下来，Builder 模式对付快速原型、初始化项目非常省力，它能自己跑命令、修报错，我只负责点确认。Chat 模式在解 bug、解释代码时也表现稳定。
但暗黑模式那一段也说明，复杂交互下 AI 容易改错地方，把样式搞乱。这时候需要果断拒绝，回到 stable 版本，然后手动微调。
如果觉得生成的不对劲，要么优化提示词，要么用 # 提供更多上下文，让 AI 更明白你要什么。
编写过程中，Tab 补全也很跟手。
让它加模型切换时，直接帮忙写了配置文件和组件。
Trae 的 Builder 模式、Chat 模式、代码补全、多模态输入、上下文引用，这些确实提高了效率。对比 Cursor，目前免费，中文支持也好，而且界面简洁。如果你不想付费，又需要一个带 AI 写代码功能的编辑器，Trae 值得一试。
微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
随机生成西班牙地址（支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选），支持数量快捷选择、显示全部与下载。 在线工具，随机西班牙地址生成器在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online