利用AI技术20倍速开发Chatbot：字节跳动Trae工具使用指

224

在当今迅速发展的技术时代，Chat （）已成为企业与用户互动的重要工具。但是，对于许多初学者来说，开发强大的工作仍然是一项艰巨的任务。传统的开发方法不仅是耗时的，而且还需要深厚的技术背景。本文将带您进入一个全新的领域，使用AI技术以更快的速度开发您的第一个领域。我们将介绍如何使用启动的AI编程工具TRAE来实现自动调试和多模型切换，从而使您可以在短时间内掌握开发的核心技能。无论您是编程新手还是想要提高发展效率的高级开发人员，本文都将为您提供宝贵的实践经验和实践技能。

前言

大家好，我是小Q. 最近推出了由中国团队开发的AI IDE -TRAE，并且时间有限和自由体验。

接下来，让我们一起使用trae，看看Trae与其他AI IDE的比较

什么是Trae？

TRAE是由启动的免费AI集成开发环境，集成了主流AI模型，例如.5和GPT-4O，并提供了诸如AI Q＆A，智能代码生成，智能代码完成和多模式输入之类的功能。支持整个界面文化，为中国开发人员提供有效的开发经验，关键也是免费的

如果您已经学会了它，则可以直接跳到TRAE实用部分，并带您从0开始开发TRAE

TRAE安装

单击以输入TREA的官方网站以下载

输入官方网站，您将看到此页面

单击输入下载

输入安装程序，它将让您选择主题和语言，本地支持中文和英语，并且您可以从其他IDE（例如）等其他ID中导入数据，它将您的插件和设置一次性地将您的插件和设置导入TRAE，以便您可以轻松地切换到TRAE

当您需要在命令行中使用TRAE打开项目时，此步骤将允许您添加TRAE命令行

您可以使用trae命令

trae .  # 打开命令行所在目录
trae /developers/app/xxx # 打开指定项目

如果您在授权登录时发生此错误，则需要科学地在线上

TRAE核心功能

您可以看到典型的布局，左侧的文件导航区域，中间的代码编辑区域以及右侧的AI聊天交互区域。我不得不说，这个UI确实很好。我习惯于阅读和这些插件的主题。 Trea的UI界面非常简单且直观，这使人们感到精神焕发。

TRAE有两个AI辅助功能，即聊天模式和模式。接下来，我将以介绍TRAE的基本功能的方式介绍聊天模式。然后，我将使用该模式来编写小型贪婪的蛇游戏。最后，我将使用该模式开始。

聊天模式

顾名思义，“聊天”是聊天，您可以通过对话提出问题，而AI提供了代码建议，错误修复和优化解决方案。

使用聊天模式

如果未显示侧边栏，则可以使用``+'u'u`快捷键打开它。单击上面的“聊天”以输入``聊天模式''

输入框功能

通过上图，您可以看到输入框具有诸如上下文，多模式输入，**模型切换（.5，GPT-4O）**，等等。

如果要使用TRAE的上下文参考，请在输入框中使用＃显示上下文列表。当鼠标移动到文件时，将显示树结构的预览。这样，当有许多具有重复名称的文件时，您可以快速找到所需的文件，而无需查看其背后的长路径。

代码操作功能

复制

插入光标在哪里

添加到新文件中，它将帮助您创建文件并将其写入

应用于相应的文件，将代码应用于相应的文件

其代码段的右上角有四个操作按钮，不仅具有“复制”和“适用于文件”的基本功能，而且还与其他AI IDE相比，将插入插入到光标和新文件中。

内联输入框

当您需要精确操作时，选择要单击 +i快捷键以打开“内联”对话框并输入您的要求

它将根据您的需要直接修改行中的代码，并在修改之前和之后进行比较。单击“接受或在输入”框下拒绝，以指示是否接受修改。

或者，您想提出一个问题，选择编辑器中的代码，执行 + U，然后向AI要求代码段。例如，当您不了解某个代码的含义时，就可以执行此操作。如果要关闭行中的输入框，请单击ESC。

上下文功能

您也可以使用＃将整个文件索引在输入框中，将整个文件馈送到AI，为AI提供更多上下文，并提高答案的准确性

如果您想提高AI答案的准确性，则可以在设置中构建索引。构建程度越高，AI答案的准确性越高。当构建学位为100％时，答案的准确性最高，并且符合当前项目

有时，如果您想学习项目的源代码，快速理解项目等，请使用＃引用整个项目，并结合AI以学习源代码，效率将非常高。

通过上面的简要介绍，我们可以理解聊天模式适用于AI问答，辅助学习和其他过程，而模式则不同，更像是为您编写代码的程序员。下面我将演示如何通过案例使用该模式

模型

该模式可以帮助您从0构建一个完整的项目，并自动编写代码。在生成过程中，它也会问您一些问题。

评论，例如生成一系列命令，它会问您“您需要运行此命令行吗？”，您只需要单击

使用模式

如何使用该模式？当然，打开侧栏也是 +u，然后单击顶部切换到模式

发布要求

告诉您您的需求，例如让它使用Vue 3开发蛇游戏

执行动作

然后单击以运行由其给出的初始化项目命令，命令行将执行并初始化项目。

接下来，它将自动为您创建文件，并完成操作，例如编写代码，逐步创建文件。在此过程中，您可能需要运行其给出的命令。您只需要单击即可运行。如果在运行命令期间发生任何错误，它将自动修复它们。

预览效果

写作后，它将让您运行启动命令，然后给出一个预览按钮。单击预览后，将在TRAE中打开一个预览窗口。它是TRAE的内置函数，对于开发人员进行预览测试非常方便。测试后，这款蛇游戏没有错误。

接受修改

如果您认为此文件很好，则可以单击文件顶部的“接受”按钮以接受文件的修改

当然，如果您认为一切正常，则可以单击并单击以接受其所有操作

这样，使用该模式开发了蛇游戏。在此过程中，您只需要单击按钮即可确认运行。其他事情（编写代码，创建文件，修复错误）是由AI自动完成的，而无需手写代码，等等。

TRAE实用：发展

接下来，在了解如何使用TRAE之后，我们现在将将TRAE应用于实际项目，以体验TRAE在项目中的影响。我们将使用TRAE开发一个。在此过程中，我们将使用TRAE的功能自动编写代码，修复错误，描述问题，同时我们还会考虑获得意见（例如，应该与项目结合使用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打开一个空目录，然后打开模式，然后将上述提示单词发送到AI。当然，您可以添加示例图像将其发送给AI，以使AI更清楚地知道您想要的

现在我们点击发送

它将要求我们运行初始化命令，我们只需单击即可运行

Root 将创建VUE3+VITE项目，然后等待其创建文件，写代码等。

如果在运行命令期间发生错误，它将自动帮助我们修复它。尝试其他命令

但是该命令仍然错（正确的命令是：npx init），但是它会自动为我创建一个配置文件

但是很快，它就在很短的时间内写了。让我们运行预览以查看

报告了错误。当页面上发生错误时，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和相应的平台。我在这里使用它

重新看一看

完美，如果此实现过程中存在错误，则可以寻求AI。接下来，给它一些困难，然后将其添加到不同平台上的AI模型。

然后单击“接受全部”以表示接受所有修改

添加切换模型按下拉菜单

**角色**  
你是一位资深前端工程师，擅长使用 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文件并创建了两个文件下拉框和模型配置

完成后，我们将.ENV修改为正确的API-KEY。当然，您可以在此处添加其他型号。我将用Zhipu取一个样本。因为它很便宜，所以Zhipu有一个免费的模型，您可以看到我是一个穷人

我发现app.vue文件中存在错误。显然，这不是从中进口的。我测试了AI。然后，我选择了鼠标，然后在显示的操作上单击“添加到对话”以询问它。它还给出了正确的答案，但不会自动将其写入文件。我希望将来会更聪明。

您会看到效果浮出水面，但是位置不正确，因此下拉框被阻塞。让它帮助我修改弹出方向

创建新的对话并继续选择模式以避免过度上下文引起混乱或AI记忆丧失

然后在输入框中输入＃以参考文件，然后选择文件类型文件。选择后，它可以智能地直接选择当前文件，然后按Enter。

它准确地修改了相关代码，完成修改后，我们将看到效果

成功完成了模型的切换

如果没有问题，请单击输入框上的全部接受

格式渲染

渲染格式现在不正确，因此您可以使用库进行渲染。您可以使用此时使用它的能力，而无需采取行动

它安装了渲染器并在项目中添加代码逻辑

效果可用，但我需要它突出显示代码块并提出要求

它将安装一个.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文件以请求它

之后，它将帮助我创建一个函数，以滚动到容器的底部，并在消息列表更改时调用该功能

好的效果还可以

好吧，让我们来吧，源代码是

在这个项目中，我们使用TRAE开发了功能齐全的应用。通过TRAE的集成的AI功能，我们可以快速生成代码，自动修复错误并在开发过程中获得明智的建议，从而大大提高了开发效率

Trae仍然可以这样使用吗？

TRAE不仅具有这些功能，还可以帮助您学习，面试，重复一些体力劳动，等等。

学习开源项目并学习源代码

如果您需要快速理解该项目，请学习项目源代码，等等。

那么Trae绝对是一个好帮手，他可以帮助您快速总结项目并解释代码

首先，我们可以打开我们从中撤出的项目的设置，然后单击“启动构建”按钮。

这样，AI给出了与项目相关的答案，以避免很多无用的内容

选择聊天模式，然后在输入框中输入＃，然后选择使用AI开始问答

这清楚了吗？您无需单击该文件即可查看它，只需告诉您文件是什么以及使用什么技术堆栈。

如果您不了解代码，请使用鼠标选择它并使用快捷键 + U来启动问题并回答AI。当然，您可以直接#整个文件，这在学习源代码时非常有用

写.md

如果您像我一样懒惰或不知道如何编写.md

切换到模式，让它为项目编写.MD文档

当然，您可以根据此修改它以满足您的要求

面试

您可以要求AI帮助您将该项目写入简历

您可以在此模板上修改它

当然，它也可以扮演面试官的角色，并询问您与该项目有关的内容

好，写一个摘要

总结

在本文的开头，我们了解Trae是什么？ TRAE是由启动的功能强大的AI IDE，也是聊天模式和模式的两个强大的核心功能。后来，我们使用TRAE进行实际战斗。

在实际项目中，根据我们的需求生成相应的代码。如果生成的代码可能无法满足我们的要求，我们可以单击输入框上的“拒绝”按钮，以表明您不需要此修改并取消修改

或者，您可以优化提示单词或使用＃提供更多上下文，使其更加“了解您”，并生成更满意的代码。

在代码编写期间

它可以确切知道您接下来需要做什么，目前您只需要单击选项卡即可完成它

它提出了“添加切换模型下拉框”的要求，直接帮助我编写了模型配置文件和环境变量，并帮助我添加了下拉框组件。

有时，AI修改不是非常一致。例如，在添加深色模式的一节中，它成功添加了暗模式并可以切换，但是它修改了无关紧要的代码，从而导致布局错误。在这种情况下，我们可以选择拒绝此修改，然后优化提示单词以提供更准确的AI要求，或​​进行手动修改

与以前的TRAE相比，使用TRAE可以实现更大的效率提高，这提供了：

这些功能极大地提高了我们的发展效率

与昂贵的成本相比，TRAE是一个不错的选择。目前它是有限时间免费的，是由中国团队开发的。它完全支持中国环境。总的来说，Trae给了我很好的经验。单击下面的链接免费下载。

免费TRAE下载链接：

源代码：

通过对本文的研究，您掌握了使用AI技术快速开发的基本方法。我们介绍了如何使用先进的AI工具来实现自动调试和多模型切换，从而大大提高了开发效率。希望这些技巧和经验可以帮助您在未来的项目中取得更大的成功。请记住，每天都在技术发展发生变化。只有通过不断学习和实践，我们才能在竞争激烈的科学技术领域中无敌。期待您在发展之路并创造更多惊人的作品！

AI编程trae