从0到1彻底掌握Trae：手把手带你实战开发AI Chatbot，提升开发效率的必备指南！
我正在参加Trae「超级体验官」创意实践征文，本文所使用的 Trae 免费下载链接：www.trae.ai/?utm_source…
暴富技巧
比特鹰作为国内领先的 AI+Web3 领域企业，团队充满年轻活力 ——95% 成员为 00 后，不仅技术氛围浓厚，还会为每位成员量身定制成长规划；在职业发展层面，公司前景广阔，提供餐饮补贴、租房补贴、年底奖金、股票期权及额外假期等多重福利，助力员工在 35 岁前实现财富自由
目前公司正招聘海外运营、前端、后端、智能合约、AI 开发、HR 等岗位，有意向者可加微信联系: ai_lianqq
前言
大家好，我是小Q，字节跳动近期推出了一款 AI IDE—— Trae，由国人团队开发，并且限时免费体验
接下来，让我们一同使用 Trae，来看看Trae与其它 AI IDE 对比效果如何
Trae是什么？
Trae是字节跳动推出的一款免费的AI集成的开发环境，集成了Claude3.5与GPT-4o等主流AI模型，提供AI问答、智能代码生成、智能代码补全，多模态输入等功能。支持界面全中文化，为中文开发者提供了高效的开发体验，关键还免费
如果已经了解过可以直接跳到Trae实战小节，带你使用Trae从0开始开发一个ChatBot
Trae安装
点击进入Trea官网下载
进入官网你会看到这个页面
点击Download即可进入下载
进入安装程序，它会让你选择主题以及语言，原生支持中文和英语，可以从其他IDE中导入数据如（VSCode），它会将你的插件以及设置等一键导入Trae，这样你就可以轻松切换到Trae
这步它会让你添加trae命令行，当你需要在命令行中使用Trae打开项目时
可以使用trae命令
trae .# 打开命令行所在目录 trae /developers/app/xxx # 打开指定项目
如果你授权登录的时候发生这种错误，那么就需要你科学上网
Trae核心功能
进入 Trea 就可以看得到，典型的布局，左侧文件导航区，中间代码编辑区，右侧是 AI 聊天交互区，不得不说，这个 UI 确实可以，看习惯了 VSCode 以及那些插件的主题，Trea 的 UI 界面很简洁、直观的设计，让人焕然一新
Trae的AI辅助功能有两种分别是Chat模式、Builder模式，接下来我会以介绍Trae基础功能的方式介绍Chat模式，之后使用Builder模式入门编写一个贪吃蛇小游戏，最后实战阶段
Chat模式
`Chat`顾名思义就是聊天，可以通过对话方式提问，AI 提供代码建议、错误修复和优化方案
使用Chat模式
如果没有显示侧边栏，可以使用`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模式
Builder模式可以从0帮你构建一个完整的项目，自动编写代码，在生成的过程中，它也会向你询问一些
意见，比如它生成了一行命令它会询问你“是否需要运行这行命令？”，你只需要点击即可
使用Builder模式
如何使用Builder模式呢？当然也是Command+U打开侧边栏，之后点击最上面的Builder，即可切换到Builder模式
发布需求
把你的需求告诉它，比如让它使用 Vue 3 开发一个贪吃蛇游戏
执行操作
接着点击运行它给出的初始化项目命令，命令行就会执行并初始化项目
接下来它会自动帮你创建文件，一步一步的完成编写代码、创建文件等操作，在这过程中可能需要你运行它给出的命令，你只需点击运行即可，如果在运行命令的过程中出现任何报错它也会自动帮你修复
预览效果
当编写完成后，它会让你运行启动命令，之后会给出一个预览按钮，点击预览之后会在 Trae 内打开一个 Webview 预览窗口，Webview是Trae内置的一个功能，非常方便开发人员进行预览测试，经测试这个贪吃蛇游戏没有任何bug
接受修改
如果你觉得这个文件没问题的话可以点击文件顶部的接受按钮，接受对该文件的修改
当然你觉得全部都没问题的话，可以直接点击点击全部接受，接受它所有的操作
这样就使用 Builder 模式开发了一个贪吃蛇游戏，在这个过程中，你只需要点击确认运行的按钮，其他事情（编写代码、创建文件、修复 bug）都由 AI 自动完成，无需动手写代码等。
Trae实战：开发ChatBot
接下来，在了解完Trae如何使用之后，我们现在将Trae运用到实际项目当中，真实体验一下Trae在项目中的效果，我们会使用Trae开发一个ChatBot，在这过程中我们会借助Trae的能力进行AI自动编写代码、Bug修复、描述问题、同时我们还会想它获取意见（比如结合项目应该使用什么XXX库）等等，帮助大家更好的了解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接入聊天
接下来我们需要将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，我这里用的是deepseek的
- VITE_OPENAI_API_KEY =api密钥
- VITE_OPENAI_API_BASE_URL =请求url
- VITE_OPENAI_MODEL=模型名称
重新运行看一下
完美，如果在这实现的过程中有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，让它进行修改
经过我的手动简单修改，最终修改成了我所需要的样子
自动滚动 To 底部
最后一个功能就是消息列表内容溢出时，内容区域自动滚动到底部
我想要消息列表内容溢出时，内容区域自动滚动到底部 复制上面👆文本并使用#引用App.vue文件向它提需求
之后它会帮我创建一个scrollToBottom函数用于滚动到容器底部，并且在消息列表变化时调用该函数
不错效果是可以的
好了就到这里吧，源代码在 https://github.com/lian-1024/trae-demo-aibot
在这个项目中，我们使用Trae开发了一个功能齐全的ChatBot应用，通过Trae集成的AI能力，使得我们能够快速生成代码、自动修复Bug，并在开发过程中获得智能建议，大大提高了开发效率
Trae还能这么用？
Trae的作用不止这些，它还可以辅助你学习、面试、重复一些体力活等
学习开源项目、学习源码
如果你需要快速了解该项目、学习项目源码等
那Trae绝对是一个好帮手，他可以帮你快速总结项目以及解读代码
首先我们从github上拉取的项目，可以先打开设置，之后点击“开始构建”按钮，
这样AI给出与项目相关的回答，避免它abababab一大堆没用的内容
选择Chat模式并在输入框输入#并选择Workspace向AI发起问答
这样是不是一目了然了，不用你个个点开文件看，直接告诉你这个文件有什么作用以及用的什么技术栈
如果不理解该代码，使用鼠标将其选中并使用快捷键Command+U向AI发起问答，当然可以直接#引用整个文件，在学习源码时非常有用
写项目README.md
如果你像我一样懒得或者不知道怎么编写项目的README.md
切换到Builder模式，让它给该项目编写README.md文档
当然可以在这基础上你可以修改成符合你的要求
面试
你可以让ai帮你将这个项目写到你的简历上
并且你可以在此模板上进行修改
当然它还可以扮演面试官角色，询问你该项目相关的内容
好啦写总结啦
总结
在本篇文章的开头我们了解Trae是什么？Trae是字节跳动推出的一个强大的AI IDE，以及Chat模式和Builder模式这两个强大的核心功能，后面我们使用了Trae进行了实战
在实际项目中，根据我们的需求生成相应的代码，如果生成的代码可能并不符合我们的要求，这时我们可以点击输入框上的“拒绝”按钮，表示你不想要这次的修改，撤销修改
或者你可以优化提示词or 使用#提供更多上下文，让它更加“懂你”，生成你比较满意的代码
在编写的代码过程中
它可以很精确的知道你下一步需要做什么，此时你只需要点击Tab即可补全
向它提出“添加切换模型下拉框”需求，直接帮我编写了模型的配置文件以及环境变量，并帮我添加了一个下拉框的组件
可能有时候AI修改的不太符合，比如在添加暗黑模式这一节，它成功添加了暗黑模式，并且可切换，但它修改了不相关的代码，导致布局错误。在这种情况下，我们可以选择拒绝本次修改，接着优化提示词，为AI提供更精确的需求，或者进行手动修改
使用 Trae 可以实现相较于以往更为显著的效率提升，它提供了：
- Builder模式：在这个模式下它可以帮你编写项目、创建或删除文件、生成并运行终端命令、提取报错自动修复等
- Chat模式：在这个模式下它可以回答你的bug问题、讲解代码仓库、生成代码片段等
- 代码自动补全：根据你的代码，提供智能的补全建议、根据代码注释补全等
- 多模态：可以将你的报错代码或UI截屏发送给AI，提供相应的建议
- 上下文：你可以在文件中选中代码片段或在终端中选中报错日志以及使用
#选择文件或目录，指定AI的上下文以提供更符合正确的回答
这几个功能大大提高我们的开发效率
相较于 Cursor 昂贵的费用，Trae 是一个不错的选择，目前限时免费，并且由国人团队开发，全面支持中文环境，总的来说 Trae 给我的体验还是挺不错的呢，点击下方链接免费下载
免费Trae下载链接: https://www.trae.ai/
源码: https://github.com/lian-1024/trae-demo-aibot
