TypeScriptAI大前端
Trae IDE 实战：从零开发 AI Chatbot 应用
介绍字节跳动推出的 AI IDE Trae，涵盖其安装、核心功能（Chat 模式与 Builder 模式）及实战演示。通过构建一个基于 Vue 3、TypeScript 和 LangChain 的 AI ChatBot 项目，展示了如何利用 Trae 进行代码生成、Bug 修复、多模态输入及环境配置。文章旨在帮助开发者快速上手 Trae，提升前端开发效率，并探索 AI 辅助编程的实际应用场景。
介绍字节跳动推出的 AI IDE Trae，涵盖其安装、核心功能（Chat 模式与 Builder 模式）及实战演示。通过构建一个基于 Vue 3、TypeScript 和 LangChain 的 AI ChatBot 项目，展示了如何利用 Trae 进行代码生成、Bug 修复、多模态输入及环境配置。文章旨在帮助开发者快速上手 Trae，提升前端开发效率，并探索 AI 辅助编程的实际应用场景。
Trae 是字节跳动推出的一款免费的 AI 集成的开发环境，集成了 Claude3.5 与 GPT-4o 等主流 AI 模型，提供 AI 问答、智能代码生成、智能代码补全、多模态输入等功能。支持界面全中文化，为中文开发者提供了高效的开发体验。
进入官网点击 Download 即可进入下载。进入安装程序后，可以选择主题以及语言，原生支持中文和英语。可以从其他 IDE 中导入数据如 VSCode，它会将你的插件以及设置等一键导入 Trae，这样你就可以轻松切换到 Trae。
这步它会让你添加 trae 命令行，当你需要在命令行中使用 Trae 打开项目时可以使用 trae 命令。
trae . # 打开命令行所在目录
trae /developers/app/xxx # 打开指定项目
[图片]
进入 Trae 可以看到典型的布局，左侧文件导航区，中间代码编辑区，右侧是 AI 聊天交互区。UI 界面简洁、直观。
[图片]
Trae 的 AI 辅助功能有两种分别是 Chat 模式、Builder 模式。
Chat 顾名思义就是聊天，可以通过对话方式提问，AI 提供代码建议、错误修复和优化方案。
如果没有显示侧边栏，可以使用 Command+U 快捷键打开，点击上方的 Chat 即可进入 Chat 模式。
[图片]
通过上面这张图可以看到输入框有上下文、多模态输入、模型切换（支持 Claude3.5、GPT-4o）等功能。
如果你要使用 Trae 的上下文引用，在输入框使用 # 就可以展示上下文列表，当鼠标移动到文件上时，会展示一个树形结构的预览，这样在重复名称的文件较多时，也能快速定位所需文件，而无需查看后面长长的路径。
它的代码片段右上角有四个操作按钮，不仅有'复制'和'应用到文件'的基本功能，相较于其他 AI IDE 还添加了插到光标所在处以及添加到新文件。
当你需要精确操作时，将代码选中点击 Command+I 快捷键打开行内对话框，输入你的需求。
它会直接在行内按照你的需求修改代码，并且有修改前与修改后对比，点击输入框下的接受 or 拒绝，表示是否接受此次修改。
或者你是想要提问，在编辑器内选中代码，执行 command + U 即可将代码片段一起提问给 AI，比如当你不理解某段代码的含义时，就可以这样做。如果你要关闭行内输入框，点击 esc 即可。
你还可以在输入框中使用 # 索引整个文件，将整个文件喂给 AI，给 AI 提供更多的上下文，提高回答的准确率。
如果你想提高 ai 回答的准确性，可以在设置中构建索引，构建度越高，ai 回答的准确性也就越高，当构建度为 100% 的时候，回答的准确率是最高的，符合当前项目。
有时候从 GitHub 上拉取代码，如想学习项目源码、快速了解该项目等等，使用 #workspace 引用整个项目，结合 AI 学习源码效率就会非常高。
通过上面的简单介绍可以了解到 Chat 模式适合 AI 问答辅助学习等流程，而 Builder 模式则不同更像一个程序员帮你写代码，下面我通过一个案例来演示如何使用 Builder 模式。
Builder 模式可以从 0 帮你构建一个完整的项目，自动编写代码，在生成的过程中，它也会向你询问一些意见，比如它生成了一行命令它会询问你'是否需要运行这行命令？'，你只需要点击即可。
如何使用 Builder 模式呢？当然也是 Command+U 打开侧边栏，之后点击最上面的 Builder，即可切换到 Builder 模式。
[图片]
把你的需求告诉它，比如让它使用 Vue 3 开发一个贪吃蛇游戏。
[图片]
接着点击运行它给出的初始化项目命令，命令行就会执行并初始化项目。
接下来它会自动帮你创建文件，一步一步的完成编写代码、创建文件等操作，在这过程中可能需要你运行它给出的命令，你只需点击运行即可，如果在运行命令的过程中出现任何报错它也会自动帮你修复。
[图片]
当编写完成后，它会让你运行启动命令，之后会给出一个预览按钮，点击预览之后会在 Trae 内打开一个 Webview 预览窗口，Webview 是 Trae 内置的一个功能，非常方便开发人员进行预览测试，经测试这个贪吃蛇游戏没有任何 bug。
[图片]
如果你觉得这个文件没问题的话可以点击文件顶部的接受按钮，接受对该文件的修改。
当然你觉得全部都没问题的话，可以直接点击全部接受，接受它所有的操作。
这样就使用 Builder 模式开发了一个贪吃蛇游戏，在这个过程中，你只需要点击确认运行的按钮，其他事情（编写代码、创建文件、修复 bug）都由 AI 自动完成，无需动手写代码等。
接下来，在了解完 Trae 如何使用之后，我们现在将 Trae 运用到实际项目当中，真实体验一下 Trae 在项目中的效果，我们会使用 Trae 开发一个 ChatBot，在这过程中我们会借助 Trae 的能力进行 AI 自动编写代码、Bug 修复、描述问题、同时我们还会向它获取意见（比如结合项目应该使用什么库）等等，帮助大家更好的了解 Trae。
编写一个完整的提示词可以精确的引导 AI 生成符合需求的结果，可以借助 AI 的能力优化提示词。
## 角色 你是一位资深前端工程师，擅长使用 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 你可以将技术栈改为你所想要使用的
使用 Trae 打开一个空目录，之后打开 Builder 模式，将上面的提示词发送给 AI，当然你可以添加一张示例图片一起发送给 AI，让 AI 更清楚的知道你想要的是什么。
此时我们点击发送，它会要我们运行初始化命令，我们只需点击运行，就会在根项目目录下创建一个 Vue3+Vite 的项目，然后等待它创建文件，编写代码等操作。
如果在运行的命令过程中，出现报错它会自动帮助我们修复，尝试其他命令。
但是命令依旧是错误的（正确命令是：npx tailwindcss init），不过它自动帮我创建了一个 tailwindcss 配置文件。
不过很快啊，它一下子就写好了，我们运行预览看看。
报错了，当页面发生报错时 AI 会自动检测并指出问题及修复。
它准确的发现是依赖问题并将依赖删除安装了正确的版本，之后重新运行，这样就完成了一个基本的聊天页面，样式还可以，还是比较符合的，到最后我会美化一下。
接下来我们需要将 ai 接入聊天。
我需要你为我的项目接入 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. 流式响应实现代码
将上面的提示词发送给 ai，它会帮你修改代码逻辑，并创建一个 .env 环境变量文件，接着你输入你的 api-key 以及对应平台的 base_url。
重新运行看一下，完美，如果在这实现的过程中有 bug 可以寻求 ai，接下来给他上一点点难度，让它添加一个切换不同平台 ai 模型的 Dropdown。
接着点击全部接受，表示接受全部修改。
**角色** 你是一位资深前端工程师，擅长使用 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` 文件
将这些提示词发送给 ai，紧接着他就开始修改了。
修改了 .env 文件并创建了两个文件 Dropdown 下拉框 和 models 模型配置。
当它完成了之后我们将 .env 的修改为正确的 api-key、baseUrl，当然这里你可以添加其他模型，我这里就拿着 deepseek 和 智谱 个做示例了，因为 deepseek 便宜，智谱有免费模型，可以看出来我是个穷人。
发现 App.vue 文件有一个报错，显然是这个没有从 langchain 中导入，考验一下 ai，接着使用鼠标选中，在显示的操作上点击'添加到对话'询问它，它也给出了正确答案，但是不会自动帮我写入到文件当中，希望以后会更加智能。
可以看到效果是出来了，但是位置不太对导致下拉框被挡住了，让它帮我修改一下 Dropdown 的弹出方向。
新建一个对话继续选择 Builder 模式，避免上下文过多导致混乱或 ai 失忆。
接着在输入框中输入 # 来引用文件选择 File 类型文件，当选择之后，它智能的直接选中了当前文件，回车即可。
它精确的修改了相关代码，完成修改之后我们看看效果。
成功完成了模型的切换。
如果没有问题，点击输入框上的全部接受。
现在渲染的格式并不正确，可以用 markdown 库来渲染，此时可以借助 Builder 的能力了，无需出手。
它会安装一个 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. 主题颜色配置
结果：
这样不行，我接着让他修改。
实现了切换暗黑模式，不过布局被修改了。
经过了几次交流修改，但结果并不是我所需要的，接着点击全部拒绝返回上一个版本。
暗黑模式切换没问题，只是样式存在一些小问题，我自己简单修改一下，当然你可以将准确的需求给 AI，让它进行修改。
经过我的手动简单修改，最终修改成了我所需要的样子。
最后一个功能就是消息列表内容溢出时，内容区域自动滚动到底部。
复制上面文本并使用 # 引用 App.vue 文件向它提需求。
之后它会帮我创建一个 scrollToBottom 函数用于滚动到容器底部，并且在消息列表变化时调用该函数。
不错效果是可以的。
好了就到这里吧。
在这个项目中，我们使用 Trae 开发了一个功能齐全的 ChatBot 应用，通过 Trae 集成的 AI 能力，使得我们能够快速生成代码、自动修复 Bug，并在开发过程中获得智能建议，大大提高了开发效率。
Trae 的作用不止这些，它还可以辅助你学习、面试、重复一些体力活等。
如果你需要快速了解该项目、学习项目源码等，那 Trae 绝对是一个好帮手，他可以帮你快速总结项目以及解读代码。
首先我们从 github 上拉取的项目，可以先打开设置，之后点击'开始构建'按钮。
这样 AI 给出与项目相关的回答，避免它 abababab 一大堆没用的内容。
选择 Chat 模式并在输入框输入 # 并选择 Workspace 向 AI 发起问答。
这样是不是一目了然了，不用你个个点开文件看，直接告诉你这个文件有什么作用以及用的什么技术栈。
如果不理解该代码，使用鼠标将其选中并使用快捷键 Command+U 向 AI 发起问答，当然可以直接 # 引用整个文件，在学习源码时非常有用。
如果你像我一样懒得或者不知道怎么编写项目的 README.md。
切换到 Builder 模式，让它给该项目编写 README.md 文档。
当然可以在这基础上你可以修改成符合你的要求。
你可以让 ai 帮你将这个项目写到你的简历上。
并且你可以在此模板上进行修改。
当然它还可以扮演面试官角色，询问你该项目相关的内容。
好啦写总结啦。
在本篇文章的开头我们了解 Trae 是什么？Trae 是字节跳动推出的一个强大的 AI IDE，以及 Chat 模式和 Builder 模式这两个强大的核心功能，后面我们使用了 Trae 进行了实战。
在实际项目中，根据我们的需求生成相应的代码，如果生成的代码可能并不符合我们的要求，这时我们可以点击输入框上的'拒绝'按钮，表示你不想要这次的修改，撤销修改。
或者你可以优化提示词 or 使用 # 提供更多上下文，让它更加'懂你'，生成你比较满意的代码。
在编写的代码过程中，它可以很精确的知道你下一步需要做什么，此时你只需要点击 Tab 即可补全。
向它提出'添加切换模型下拉框'需求，直接帮我编写了模型的配置文件以及环境变量，并帮我添加了一个下拉框的组件。
可能有时候 AI 修改的不太符合，比如在添加暗黑模式这一节，它成功添加了暗黑模式，并且可切换，但它修改了不相关的代码，导致布局错误。在这种情况下，我们可以选择拒绝本次修改，接着优化提示词，为 AI 提供更精确的需求，或者进行手动修改。
使用 Trae 可以实现相较于以往更为显著的效率提升，它提供了：
# 选择文件或目录，指定 AI 的上下文以提供更符合正确的回答这几个功能大大提高我们的开发效率。
相较于 Cursor 昂贵的费用，Trae 是一个不错的选择，目前限时免费，并且由国人团队开发，全面支持中文环境，总的来说 Trae 给我的体验还是挺不错的呢。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online