Trae AI IDE 简介
Trae 是字节跳动推出的一款免费 AI 集成的开发环境，集成了 Claude3.5 与 GPT-4o 等主流 AI 模型，提供 AI 问答、智能代码生成、智能代码补全、多模态输入等功能。支持界面全中文化，为中文开发者提供了高效的开发体验。
Trae 安装
进入官网点击 Download 即可下载。安装程序允许选择主题及语言，原生支持中文和英语。支持从其他 IDE（如 VSCode）导入插件及设置。
安装过程中会提示添加 trae 命令行，以便在终端中使用 trae . 或 trae /path/to/project 打开项目。
Trae 核心功能
Trae 的布局典型，左侧文件导航区，中间代码编辑区，右侧是 AI 聊天交互区。AI 辅助功能分为 Chat 模式和 Builder 模式。
Chat 模式
Chat 模式通过对话方式提问，AI 提供代码建议、错误修复和优化方案。
- 快捷键：使用
Command + U打开侧边栏进入 Chat 模式。 - 输入框功能：支持上下文引用（使用
#）、多模态输入、模型切换（Claude3.5、GPT-4o）。 - 代码操作：支持复制、插入到光标处、添加到新文件、应用到相应文件。
- 行内输入框：选中代码后按
Command + I打开行内对话框，直接修改代码并查看修改前后对比。 - 上下文功能：使用
#索引整个文件或#workspace引用整个项目，提高回答准确率。
Builder 模式
Builder 模式可以从 0 帮你构建一个完整的项目，自动编写代码、创建文件、运行命令并修复报错。
- 发布需求：在 Builder 模式下描述需求，例如'使用 Vue 3 开发一个贪吃蛇游戏'。
- 执行操作：AI 生成初始化命令，用户确认后执行。AI 会自动创建文件、编写代码，并在报错时尝试自动修复。
- 预览效果：完成后可在 Trae 内置 Webview 中预览。
- 接受修改：可逐个或全部接受 AI 生成的文件修改。
Trae 实战：开发 ChatBot
本章节演示如何使用 Trae 开发一个功能齐全的 ChatBot 应用。
初始化项目
使用 Builder 模式，输入详细的 Prompt 引导 AI 生成符合需求的 Vue 3 + Vite + TS + Tailwind CSS 项目结构。
## 角色 你是一位资深前端工程师，擅长使用 Vue 3 + Vite + TS + Tailwind CSS 开发现代 Web 应用。
## 核心需求
1. 布局：页面背景白色，文字黑色，main 标签包裹内容。
2. 输入区域：底部固定定位，包含 textarea 和发送按钮。
3. 聊天列表：用户聊天气泡蓝底白字，AI 聊天气泡白底黑字。
## 技术栈
Vue 3 + Vite + pnpm, Tailwind CSS, SVG 图标
发送 Prompt 后，AI 将初始化项目并创建文件。若遇到依赖问题，AI 会自动检测并修复。
接入 AI 能力
需要集成 LangChain.js 实现对话功能，支持流式响应。
- 配置环境变量：创建
.env文件管理 API_KEY 和 BASE_URL。
