TikTok 推出新 IDE Trae，用于快速構(gòu)建 AI 應(yīng)用
字節(jié)跳動(dòng)（TikTok 的母公司）最近發(fā)布了一款名為 Trae 的集成開發(fā)環(huán)境（IDE），基于 Visual Studio Code（VS Code）進(jìn)一步定制。在 VS Code 原本的強(qiáng)大功能上，Trae 附加了 AI 模塊，幫助開發(fā)者更輕松地編寫、調(diào)試和優(yōu)化代碼，有時(shí)甚至無(wú)需手寫任何代碼。
如果你用過(guò) Cursor AI，應(yīng)該會(huì)覺得 Trae 有點(diǎn)類似。但我的上手體驗(yàn)是，Trae 界面更現(xiàn)代、操作更直接，而且不會(huì)讓人有“功能太多不知道先點(diǎn)哪兒”的困擾。
Trae 是什么？
Trae 旨在幫助開發(fā)者提升效率，做的不僅僅是自動(dòng)補(bǔ)全。它在調(diào)試、重構(gòu)、注釋和測(cè)試用例建議等方面都能給出智能提示。更棒的是，Trae 跟 VS Code 和 Cursor 的配置可以互相兼容，幾乎不需要額外遷移就能直接使用。
image.png
當(dāng)前版本只支持 macOS 系統(tǒng)（Windows 版仍在開發(fā)），并且免費(fèi)開放所有 AI 功能，沒有次數(shù)或額度限制。對(duì)比市面上一些需要付費(fèi)或功能受限的同類工具，Trae 的確顯得很有吸引力。
Trae 由字節(jié)跳動(dòng)的新加坡子公司進(jìn)行全球發(fā)行，是字節(jié)跳動(dòng)拓展社交媒體以外業(yè)務(wù)的一環(huán)。正好最近美國(guó) TikTok 禁令法案有所推遲，Trae 倒是趕著這個(gè)節(jié)點(diǎn)上線了，多少給人一種“多線并進(jìn)”的意味。
Trae 的核心亮點(diǎn)
- 支持 GPT-4o 與 Claude 3.5 Sonnet
Trae 內(nèi)置了 OpenAI 的 GPT-4o 模型和 Anthropic 的 Claude-3.5-Sonnet，讓你能直接在 IDE 里享受強(qiáng)大的 AI 編碼和對(duì)話能力。 - AI 輔助編碼
通過(guò)自然語(yǔ)言就能讓 Trae 生成、優(yōu)化、調(diào)試代碼。對(duì)新人或想快速雛形化項(xiàng)目的開發(fā)者非常友好。 - 多模態(tài)交互
你可以上傳圖片來(lái)說(shuō)明需求，AI 能根據(jù)圖中的界面或元素理解布局和樣式，然后生成相應(yīng)代碼。非常適合做界面克隆或 UI 參考。 - 兩種指令方式：
- Chat Mode：實(shí)時(shí)和 AI 溝通，適合一邊聊天一邊寫代碼。
- Builder Mode：更偏自動(dòng)化的模式，像是一次性創(chuàng)建一個(gè)完整的項(xiàng)目或功能模塊。
image.png
Trae 還能分析整個(gè)項(xiàng)目的代碼基底，不只是單獨(dú)某個(gè)文件，這讓開發(fā)者在大范圍重構(gòu)、調(diào)試時(shí)更輕松。
如何安裝 Trae
- 前往 trae.ai，點(diǎn)擊“Download for macOS”。
image.png
- 下載完成后，按提示安裝到本地。
image.png
- 因?yàn)?Trae 基于 VS Code，所以你可以選擇導(dǎo)入 Cursor 或 VS Code 的配置。
image.png
首次使用時(shí)需要注冊(cè)并登錄賬號(hào)。登錄完成，會(huì)看到 Trae 的主界面，整體跟 VS Code 類似，但多了很多 AI 輔助功能和面板。
image.png
Trae 的使用示例
下面展示一個(gè)簡(jiǎn)單的應(yīng)用場(chǎng)景：讓 Trae 直接生成一個(gè)簡(jiǎn)易的 Next.js 聊天應(yīng)用。
示例 1：生成簡(jiǎn)單聊天應(yīng)用
Prompt: “create a simple chatbot app based on nextjs”
- AI 選擇 Claude 3.5 Sonnet 模型，開始編寫項(xiàng)目文件和代碼。
- 生成完畢后，點(diǎn)擊 Webview 就能在 IDE 內(nèi)部直接預(yù)覽 Next.js 應(yīng)用，無(wú)需去瀏覽器打開鏈接。
image.png
雖然例子非常基礎(chǔ)，但值得注意的是，Trae 只用一次 prompt 就能“搭骨架+跑起來(lái)”，對(duì)原型開發(fā)來(lái)說(shuō)很高效。
image.png
示例 2：多模態(tài)支持
Trae 支持上傳圖片，例如你可以上傳 Spotify 的截圖，讓 AI 按照截圖里的布局用 Next.js 搭建一個(gè)初步的克隆版本。
image.png
- Prompt: “build a spotify clone using NextJS”
image.png
- AI 識(shí)別截圖中的界面元素，包括配色、圖標(biāo)位置、頁(yè)面布局等，并自動(dòng)生成相應(yīng)的代碼。
- 最終輸出雖然和真正的 Spotify 還有差距，但已經(jīng)能看出基本的主題風(fēng)格、圖標(biāo)和大體布局。如果繼續(xù)和 AI 互動(dòng)，可加入更多圖標(biāo)、臨時(shí)圖片或組件。
image.png
另外，Trae 的 Webview 可以直接在 IDE 內(nèi)看到效果，不必再另外開瀏覽器窗口來(lái)檢查界面。這對(duì)快速迭代和測(cè)試非常方便。
image.png
Trae 的優(yōu)點(diǎn)與局限
- 優(yōu)點(diǎn)
- 免費(fèi)提供無(wú)限制的 AI 調(diào)用，目前沒有付費(fèi)門檻
- 同時(shí)內(nèi)置多家模型，讓你可以挑選合適的 AI 實(shí)現(xiàn)
- 多模態(tài)支持讓界面克隆和 UI 原型變得更輕松
- 可以與 VS Code 或 Cursor 配置互通
- 局限
- Mac 版本優(yōu)先上線，Windows 版尚未完成
- 部分情況下 AI 響應(yīng)稍顯遲緩，尤其處理特別大的文件時(shí)容易卡頓
- 工具還在早期階段，可能還存在不穩(wěn)定或功能缺失
- 字節(jié)跳動(dòng)的隱私爭(zhēng)議，一些用戶會(huì)對(duì)數(shù)據(jù)安全有顧慮
有人將 Trae 與 Cursor 對(duì)比，認(rèn)為它是“Cursor 殺手”，但目前看還言之尚早。Cursor 在速度、跨平臺(tái)兼容等方面可能更成熟，而 Trae 也有更現(xiàn)代的 UI 設(shè)計(jì)和免費(fèi)用不完的 AI 額度。是否要立即轉(zhuǎn)投 Trae，要看個(gè)人需求和對(duì)隱私的態(tài)度。
信任問(wèn)題：要不要放心用？
談到字節(jié)跳動(dòng)就繞不開隱私和地緣政治話題。TikTok 被美國(guó)和其他一些國(guó)家密切審查，難免讓人擔(dān)心用 Trae 會(huì)不會(huì)有數(shù)據(jù)泄露的風(fēng)險(xiǎn)。官方說(shuō)這是新加坡子公司發(fā)行，使用了開源或國(guó)際認(rèn)可的 AI 模型，試圖與中國(guó)總部做切割。但這依然不能完全打消某些人的疑慮。
如果對(duì)隱私格外敏感，可以嘗試以下做法：
- 在隔離或沙箱環(huán)境里使用 Trae，不在上面保管關(guān)鍵生產(chǎn)代碼
- 用臨時(shí)賬號(hào)或小號(hào)注冊(cè)，以免暴露真實(shí)個(gè)人信息
- 留意官方的隱私和使用條款，任何工具都要定期備份代碼到安全的私有倉(cāng)庫(kù)
結(jié)語(yǔ)
Trae 代表了字節(jié)跳動(dòng)在 IDE 領(lǐng)域的新嘗試：它整合了主流的 AI 模型，界面舒適易用，并且免費(fèi)無(wú)限量。對(duì)于想快速做原型或不想手寫太多代碼的開發(fā)者來(lái)說(shuō)，是個(gè)值得嘗試的新選項(xiàng)。
當(dāng)然，隱私和地緣政治上的顧慮依舊存在。加之 Trae 目前只面向 macOS 用戶，功能仍在打磨階段，尚未到可以取代 VS Code 或 Cursor 的程度。對(duì)大多數(shù)人來(lái)說(shuō)，最合理的做法是先用它進(jìn)行一些非核心項(xiàng)目或小型實(shí)驗(yàn)，看看是否真的能大幅提高工作效率。等它在跨平臺(tái)性能、模型響應(yīng)速度、穩(wěn)定性等方面有所提升后，也許會(huì)成長(zhǎng)為一個(gè)真正的“Cursor 級(jí)”競(jìng)爭(zhēng)對(duì)手。
總的來(lái)說(shuō)，如果你正在尋找一款能提供快速 AI 支持、還能直接在 IDE 里預(yù)覽并運(yùn)行應(yīng)用的工具，Trae 值得一試。但要深度使用，還需要進(jìn)一步觀察它的發(fā)展走向，以及字節(jié)跳動(dòng)在隱私和合規(guī)上的努力。
