本文适用:简单的贪吃蛇项目实现;全栈开发者和NLP工程师,聚焦使用Trae框架从零构建生产级AI对话系统。涵盖智能客服、语音助手等场景,尤其适合需快速落地的企业技术团队。
🔥🔥🔥
引言
「不会写神经网络也能开发AI对话机器人?」——这正是Trae框架要给你的答案。作为2023年GitHub增速最快的低代码AI开发平台,Trae以「三零原则」重新定义Chatbot开发:零算法基础要求、零复杂环境配置、零冗长部署流程。
不同于TensorFlow/PyTorch需要深厚的机器学习功底,Trae通过可视化对话流设计器和预训练模型库,让小白开发者用「搭积木」的方式构建智能对话系统。你可以这样理解:Trae就像AI界的WordPress,即使不懂PHP也能做出专业网站。
本文将会制作一个简单的【 贪吃蛇游戏的html项目 】!
无论你是刚接触Python的在校生,还是寻求业务自动化的企业员工,跟着本文一步步操作,三天即可完成从「AI小白」到「对话系统开发者」的蜕变。
目录
📚
1. Trae
1.1. 简介
Trae 是国内首个 AI IDE,深度理解中文开发场景。AI 高度集成于 IDE 环境之中,为你带来比 AI 插件更加流畅、准确、优质的开发体验。
Trae 是你的得力编程伙伴。 它提供了 AI 问答、代码自动补全和基于代理的 AI 编程能力等功能。 在使用 Trae 开发项目时,你可以与 AI 协同工作,提升开发效率。 Trae 提供了基础的 IDE 功能,包括代码编写、项目管理、扩展管理、版本控制等。 在编码过程中,你可以随时与 AI 助手对话寻求帮助,包括请 AI 助手解释代码、编写代码注释、修复错误等。
1.2. 优点
- 智能问答
在编写代码时,你可以随时与 AI 助手对话,获得代码解释、代码注释和错误修复等帮助。详情参考《侧边对话》和《内嵌对话》。
- 实时代码建议
AI 助手能够理解当前代码并在编辑器中实时提供代码建议,提升编程效率。详情参考《代码自动补全》。
- 代码片段生成
通过自然语言描述你的需求,AI 助手将生成相应的代码片段,甚至能够编写项目级或跨文件的代码。
- 从 0 到 1 开发项目
告诉 AI 助手你想开发的程序,AI 助手将根据你的描述提供相关代码或自动创建所需文件。详情参考《Builder 模式》。
1.3. 支持的操作系统
- macOS 10.15 及以上
- Windows 10、11
1.4. 官方文档
Trae 国内版文档站 - trae使用文档https://docs.trae.com.cn/docs/what-is-trae
1.5. 到底是个什么东西?
首先科普一下 Trae,这是字节跳动旗下的 AI 原生编程工具,类似 Cursor、Windsurf 等 IDE 工具,可以让用户通过自然语言,编写出网页、软件。
字节出的产品,用户体验基本不用太怀疑。
Trae 的三大特性:
- 国内用户友好,中国官网、中文界面、国内模型,稳定,快速
- 使用完全免费,不用折腾会员,下载之后直接使用,支持豆包1.5pro和满血版DeepSeek R1、V3模型
- 内置预览插件,写完代码一键运行,所见即所得
前置的折腾完全避免了,可以说是新手入门AI编程的最佳工具。
同时 Trae 也是一个完备的 IDE,资深程序员也可以用它来大幅提升自己编程速度。
1.6. Trae 国内版有什么不同?
- 访问网址不同
国际版访问网址是 Trae.ai 而国内版是 Trae.com.cn。
- 登陆方式不同
海外版使用谷歌授权方式登录,国内版需要手机号或掘金社区授权登录。也就是说国内版和国际版的账户是完全隔离开的。
- 可选模型不同
国际版使用 GPT4 和 Claude ,而国内版使用过的是 豆包1.5pro 和满血版 DeepSeek R1 、V3模型。
- Trae-Builder 模式 版本不同
国际版是 Bate 国内版显示是 Alpha,猜测只是更新进度不同。
- 缺少上传参考图功能
国内版对比国际版缺少上传参考图功能,应该是模型问题,目前对解析参考图并生成代码能力较强的还是 Claude 系列模型。
📚
2. 安装 Trae 并完成初始设置
2.1. 下载
Trae - AI 原生 IDEhttps://www.trae.com.cn/
2.2. 启动 Trae
🤩 进入 Trea 就可以看得到,典型的布局,左侧文件导航区,中间代码编辑区,右侧是 AI 聊天交互区,不得不说,这个 UI 确实可以,看习惯了 VSCode 以及那些插件的主题,Trea 的 UI 界面很简洁、直观的设计,让人焕然一新
🙋♀️ 第三步:若你的电脑中已安装并配置 VS Code 或 Cursor,你可以点击 从 VS Code 导入 或 从 Cursor 导入 按钮。系统将会从对应的 IDE 中获取插件、IDE 设置、快捷键设置等信息并一键导入到 Trae 中,帮助你快速从其他 IDE 切换到 Trae。
🙋♀️ 第四步:可添加 Trae 相关的命令行,添加 Trae 相关的命令行后,你可以在终端中使用命令行更快速地完成 Trae 相关的操作。例如:
- 使用 trae 命令快速唤起 Trae。
- 使用 trae my-react-app 命令在 Trae 中打开一个项目。
点击 安装 `trae` 命令 按钮,然后完成授权流程。
🙋♀️ 第六步:开始使用 Trae,在 Trae 中,开发你的项目,例如:
打开已有的项目或克隆 Git 仓库。详情参考《管理项目》。
使用 AI 助手从 0 到 1 创建一个新项目。详情参考《Builder 模式》。
📚
3. 管理项目
你可以管理 Trae 中的项目,包括创建项目和切换项目。
3.1. 什么是 “工作空间”?
“工作空间” 通常为一个在 Trae 中打开的文件夹。若你的项目较为复杂,也可以将多个文件夹添加至一个 “工作空间”。
3.2. 创建项目
Trae 提供三种创建项目的方式:导入本地文件夹、克隆 Git 仓库。
3.2.1. 方式一:导入本地文件夹
🙋♀️ 点击左侧面板中央的 打开文件夹 按钮,或在界面左上角点击 选择项目 > 打开文件夹。
3.2.2. 方式二:从 GitHub 克隆仓库
🙋♀️ 点击左侧面板中央的 克隆 Git 仓库 按钮,或在界面左上角点击 选择项目 > 克隆 Git 仓库。
...
3.2.3. 方式三:直接从 Git 仓库的 URL 克隆
🙋♀️ 此方式无需授权 GitHub 登录 Trae,你可以直接使用目标仓库的 URL 来将其克隆至 Trae。
4. 管理插件
4.1. 安装插件
4.1.1. 从 Trae 的插件市场安装
想要完成 #贪吃蛇项目 需要安装插件:Deno;
4.1.2. 从 VS Code 的插件市场安装
安装后,可导入至该软件
5. Builder 模式
Builder 模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。
在 Builder 模式下,AI 助手在回答时会根据需求调用不同的工具,包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。
5.1. 可用的模型
- DeepSeek-Chat(V3)
- DeepSeek-Reasoner(R1)
- Doubao-1.5-pro
5.2. Builder 模式的工作流程
Builder 模式下,AI 助手会主动读取当前项目中的文件内容,拆解任务并逐步执行,包括:
- 提取相关上下文
- 创建或修改文件
- 生成并运行终端命令
- 分析命令运行状态
5.3. 配置 PowerShell(Windows)
对于 Windows 操作系统,若需要使用 Builder 模式,则必须为 Trae 配置 PowerShell 6 或更高版本。若当前非此配置,参考以下步骤完成配置:
5.3.1. 安装 PowerShell 6 或更高版本。安装说明参考此文档。
5.3.2. 返回 Trae 并打开 终端 面板。
5.3.3. 点击右上方区域的 + > 选择默认配置文件。
5.3.4. 选择带有 \PowerShell\{版本号}\xxx 字样的配置文件(一般会自动检测到 )。
⚠️ 提示
- {版本号} 大于等于 6。
- 勿选择系统内置的旧版本 PowerShell,例如图中的 Windows PowerShell。
5.4. 启用 Builder 模式
- 使用快捷键(macOS:Command + U;Windows:Ctrl + U)打开侧边对话框。
- 在侧边对话框的左上角,点击 Builder。
- 在 Builder 对话框中,点击 启用 Builder 按钮。
- 选择你想使用的大语言模型。
5.5. 探索 Builder 模式
Builder 提供一系列实用的功能,精准且高效地助力你从 0 到 1 开发项目。
5.5.1. 添加上下文
AI 助手可以理解当前项目中的上下文,包括代码、文件和文件夹,从而更精确地协助你完成开发需求。详情参考《上下文》。
5.5.2. 生成并处理代码变更
根据你的需求,AI 助手会自动创建新文件或编辑已有文件,并自动保存生成的代码。你可以选择接受或拒绝代码变更,包括:
- 处理多文件内的所有代码变更:点击输入框上方待审查文件列表中的 全部接受 或 全部拒绝 按钮,批量接受或拒绝当前项目中的所有代码变更。
- 处理单文件内的所有代码变更:在编辑器内打开文件,点击上方提示条中的 接受 按钮(快捷键:macOS 为 Command + Enter;Windows 为 Ctrl + Enter)或 拒绝 按钮(快捷键:macOS 为 Command + Backspace;Windows 为 Ctrl + Backspace),批量接受或拒绝当前文件内的所有代码变更。
- 处理单处代码变更:在编辑器内,将鼠标悬浮至某个代码变更处,然后点击右上角的 ^Y 按钮(快捷键:macOS 为 Control+Y;Windows 为 Alt + Y)或 ^N 按钮(快捷键:macOS 为 Control + N;Windows 为 Alt + N),接受或拒绝该变更。
5.5.3. 生成并运行命令
🙋♀️ 根据你的需求,AI 助手会适时推荐必要的 Shell 命令供你运行(以下图为例)。你可以选择运行或跳过某个命令,AI 助手会根据你的操作完成后续的工作。
🙋♀️ 点击 运行 后,终端将运行该命令。命令运行后,AI 助手会自动读取并分析运行结果。如果运行异常,AI 助手会自动分析原因,并给出建议解决方案。
若命令运行成功,你可以点击命令卡片右上角的 终端 按钮,然后在终端中查看该命令的运行日志。
⚠️ 系统需要安装 Python环境!
5.5.4. 成功啦
5.5.5. 回退版本
你可以将项目回退到指定会话轮次发起前的版本。
⚠️ 提示
- 回退操作不可撤销;
- 仅支持在最近活跃的 Builder 窗口中回退版本;
- 仅支持回退至最近 10 轮会话内的版本。
使用以下步骤回退项目的版本:
- 找到目标对话气泡。
- 点击左侧的 回退 按钮。
对话框中展示本次回退会影响的文件。
- 点击文件名。编辑器内会打开该文件,显示即将发生的变更。
- 确认本次回退的影响范围。
- 若本次回退符合预期,点击 确定。Builder 开始回退项目。
Builder 开始回退项目。
5.5.6. 管理历史对话
点击 Builder 窗口右上角的 历史会话 按钮后,左侧会显示 历史记录 窗口,展示 Chat 模式和 Builder 模式的所有对话记录。
- 若你需要查看某轮历史对话,点击该对话条目,你会跳转至该对话的位置。
- 若需要删除某轮对话,可以将鼠标悬浮至该对话,然后点击右侧的 删除 图标。⚠️ 对话记录删除后无法恢复。
6. 侧边对话(Chat 模式)
侧边对话(Chat 模式)是编码过程中的全能 AI 伙伴,可以用来回答编码问题、讲解代码仓库、生成代码片段、修复错误等。
6.1. 打开 Chat 模式
进入 Trae 后,一般默认进入 Chat 模式。若非如此,可以参考以下步骤打开 Chat 模式。
- 使用快捷键(macOS:Command + U;Windows:Ctrl + U)打开侧边对话框。
- 在侧边对话框的左上角,点击 Chat。
6.2. 选择模型
Chat 模式默认使用 “Doubao-1.5-pro”。你可以点击模型名称,然后选择切换至 DeepSeek-Reasoner (R1) 或 DeepSeek-Chat (V3) 模型。
6.3. 探索 Chat 模式
6.3.1. 添加上下文
AI 助手可以理解当前项目中的上下文,包括代码、文件、文件夹和整个工作空间,从而更精确地协助你完成开发需求。详情参考《上下文》。
6.3.2. 生成并处理代码变更
Chat 模式下,根据你的需求,AI 助手会自动创建新文件或编辑已有文件并自动保存生成的代码。你可以接受或拒绝变更,包括:
⚠️ 若你选择接受代码变更,AI 助手会新建文件或将代码变更应用于已有的文件。应用的代码会以 Diff 的形式展示。
6.3.3. 生成并运行命令
Chat 模式下,根据你的需求,AI 助手会提供可一键运行的 Shell 命令。
你可以按需进行以下操作:
编号 | 说明 |
1 | 点击 复制 按钮,复制该命令。 |
2 | 点击 添加到终端 按钮,将命令添加至未被占用的终端。 |
3 | 点击 运行 按钮,在未被占用的终端中运行该命令。 |
6.3.4. 回退版本
你可以将项目回退至指定会话轮次发起前的版本。
⚠️ 提示:
- 回退操作不可撤销;
- 仅支持在最近活跃的 Builder 窗口中回退版本;
- 仅支持回退至最近 10 轮会话内的版本。
- 找到目标对话气泡。
- 点击左侧的 回退 按钮。
对话框中展示本次回退会影响的文件。
- 点击文件名。编辑器内会打开该文件,显示即将发生的变更。
- 确认本次回退的影响范围。
- 若本次回退符合预期,点击 确定。AI 助手开始回退项目。
6.3.5. 管理历史对话
点击 Chat 窗口右上角的 历史会话 按钮后,左侧会显示 历史记录 窗口,展示 Chat 模式和 Builder 模式的所有对话记录。
- 若你需要查看某轮历史对话,点击该对话条目,你会跳转至该对话的位置。
- 若需要删除某轮对话,可以将鼠标悬浮至该对话,然后点击右侧的 删除 图标。
⚠️ 提示:对话记录删除后无法恢复。
6.1.2. 了解更多:Builder 模式
Chat 模式是单纯的一问一答模式,AI 助手不会在后台调用相关工具来提升其回答的有效性。
在 Builder 模式下,AI 助手在回答时会根据需求调用不同的工具,包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。详情参考《Builder 模式》。
点击 Chat 窗口右上角的 历史会话 按钮后,左侧会显示 历史记录 窗口,展示 Chat 模式和 Builder 模式的所有对话记录。
📚
7. 内嵌对话
Trae 提供了内嵌在代码编辑器中的内嵌对话(Inline Chat)。你能够在编码的过程中随时唤起内嵌对话。使用内嵌对话可以让你在与 AI 助手对话的同时更好地保持编码心流。
7.1. 唤起内嵌对话
你可以通过以下两种方式唤起内嵌对话:
- 在编辑器内的光标处,使用快捷键(macOS:Command + I;Windows:Ctrl + I)。
- 在编辑器内,选中任意代码,然后使用快捷键(macOS:Command + I;Windows:Ctrl + I)或点击悬浮菜单中的 编辑 按钮。
7.2. 开始问答
在内嵌对话输入框中输入你的需求,包括为代码添加注释、解释选中的代码、优化选中的代码等等,然后点击右侧的 发送 按钮或敲击回车键。
7.3. 处理结果
发送需求后,AI 助手生成的内容将以 Diff 的形式展示在编辑器内。你可以预览变更前后的代码,然后选择采纳或拒绝。
- 若你需要接受或拒绝所有内容,点击对话框左下角的 接受 按钮(快捷键:macOS 为 Command + Enter;Windows 为 Ctrl + Enter)或 拒绝 按钮(快捷键:macOS 为 Command + Backspace;Windows 为 Ctrl + Backspace)按钮。
- 若你需要接受或拒绝部分内容,点击内容片段右上角的 ^Y 按钮(快捷键:macOS 为 Control + Y;Windows 为 Alt + Y)或 ^N 按钮(快捷键:macOS 为 Control + N;Windows 为 Alt + N)。
7.4. 重试对话
若 AI 助手生成的内容不符合你的要求,你可以点击对话框左下方的 重试 按钮,重新发起一轮同样的对话,让 AI 助手再次尝试回答。
📚
🐷🐷🐷
- End -
(* ̄︶ ̄)创作不易!期待你们的 点赞+收藏+评论 喔!
本文来源网络,免费分享知识,版权归原作者所有。如涉及作品版权问题,请联系我删除!
---
如果彻底解决您的问题,请一键三连,点赞+收藏哦!💗💗💗