Trae AI IDE 是一款对标 Cursor 和 Windsurf 的 AI 编程工具。介绍其安装下载、界面功能区划分及核心使用技巧。通过 React 工程示例，演示了如何运行项目、修改样式及增加交互功能，展示了 Builder 与 Chat 模式在代码生成与编辑中的应用。
近期，字节发布了一款 AI Coding 产品 —— Trae，它是一款对标 Cursor 和 Windsurf 的全新 IDE，也是一款真正为中文开发者量身定制的工具。其优雅的 UI、丝滑的交互、母语级的支持、更高的 AI 集成度，都让你感到亲切和惊艳！它不再是一个工具，而是一个能'思考'和'共创'的协作者，帮助你更灵活地调用 AI 参与项目，实现更高效率的开发体验。
前往官网 https://www.trae.ai/ 点击 Download 下载。
本地安装时，会提示是否导入配置，可选择从 VS Code 或 Cursor 导入。
接着可以选择安装 Trae 命令。
然后可以选择跳过或者登录账号。
首次使用建议注册账号并登录，登录成功后可看到界面提示。
在此可以更改配置语言，一般默认是中文，但开发习惯用英文。
主要分为四大块区域：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
这里以前端工程代码为例，打开一个 React 工程代码，首次打开的时候会需要选择信任这个作者。
首先运行这个工程代码，直接在 Chat 模式里输入：
帮忙运行这个 React 项目
然后可以看到输出如下信息所示，提示要执行以下命令：
npm install
npm start
由于这个项目用的是 vite 构建工具，所以一开始提示的用 npm start 启动会报错，于是继续提示：
这里运行的构建工具是 vite，用 npm start 启动会报错
然后点击 Open WebView，就会在 WebView 这里打开一个窗口，运行端口，这里就可以看到页面的预览效果了。
比如想要改造上述按钮的颜色为蓝色，则在 Builder 模式下去输入：
修改这个 count is 0 按钮的背景色为蓝色
然后就可以看到输出的内容和修改的文件。
在修改的文件那里会提示'更改已经成功被应用了，请确认'，可以点击：
在未点击确认之前，这里新增代码的背景色会是绿色。
点击 Accept 之后，再次运行可以看到下面按钮的背景色已经变成了蓝色。
比如想要在点击这个按钮之后，增加一个 dialog 的弹窗提示，输入这样的命令，可以看到提示修改的代码。
其中，点击对应要修改的提示代码文件的 Review，就可以跳转去对应的文件。
可以看到：
点击 Accept 之后，再次运行，看到效果如下所示：
点击这个按钮，确实新增了一个弹窗组件，并提示对应的信息。
如果想要复制自己上次输入的整个上下文信息，则需要点击左边这三个点，选择 Copy。
