TRAE智能体与MCP工具使用教程——新手友好完全指南

引言

刚开始接触TRAE时，我和很多新手一样，对着平台上一堆陌生的名词和按钮感到有点懵。什么“智能体”、什么“MCP工具”、什么“Figma集成”……听起来很高大上，但到底怎么用起来呢？

经过几周的摸索和实际项目中的使用，我逐渐摸清了门道。现在回头来看，其实只要理解了几个核心概念，跟着清晰的步骤操作，很快就能上手。我把自己的学习过程整理成这份教程，尽量用大白话讲清楚每个环节，同时也会引入必要的专业术语和技术原理，希望能帮你少走弯路，快速把TRAE变成你的开发利器。

一、TRAE到底是什么？先有个整体认识

1.1 简单来说，TRAE是什么？

你可以把TRAE想象成一个“超级智能的代码助手”。它不是一个普通的编辑器，而是一个集成了AI能力、多种开发工具和协作功能的智能开发平台。它由Trae团队开发，基于内部研发的专有模型，目标是让写代码、管理项目、团队协作变得更轻松。

从技术架构角度看，TRAE采用了模块化设计，通过插件系统和API接口实现功能扩展，核心是其智能代码理解与生成引擎，能够分析代码上下文并提供精准的开发建议。

1.2 为什么我要用TRAE？它解决什么问题？

在我实际使用中，TRAE主要帮我在以下几个方面节省时间：

  • 写代码更智能：它能理解我的代码上下文，给出靠谱的建议，甚至帮我重构或修复错误。底层依赖的语义分析引擎能够识别代码意图和潜在问题。
  • 工具都在一个地方：不用在多个软件之间切来切去，搜索、文件操作、命令执行等功能都集成好了，遵循单一界面原则。
  • 团队协作更顺畅：可以实时和同事一起编辑代码、讨论问题，基于WebSocket实现的实时同步确保了协作的流畅性。
  • 自定义自动化：可以创建“智能体”帮我处理重复性任务，比如自动检查代码风格、生成测试用例等，这是TRAE的核心差异化功能。
  • 扩展能力强：通过“MCP市场”可以安装各种专业工具（比如连接设计工具Figma），让平台能力不断延伸，体现了生态系统思维。

1.3 TRAE长什么样？怎么访问？

TRAE主要通过网页端使用（未来可能也有客户端），你只需要一个浏览器。
访问官网（假设是 trae.dev），注册登录后，你会看到一个结构清晰的界面：

界面主要分三块：

  • 左侧导航栏：像菜单一样，所有核心功能（项目、智能体、MCP市场等）的入口都在这里。
  • 中间主工作区：你写代码、看文档、操作工具的主要区域，采用标签页式设计，支持多文件同时编辑。
  • 右侧辅助面板：显示文件结构、搜索、版本控制等信息，可以按需展开或收起，遵循上下文相关原则。

我感觉这个solo模式还挺好用的
在这里插入图片描述

二、智能体：你的AI小助手，让它帮你干活

2.1 “智能体”到底是什么？能吃吗？

别被名字吓到。你可以把“智能体”理解为你在TRAE里训练的一个专属小机器人。你告诉它：“我写前端代码时，你要帮我检查样式规范；我写Python时，你要留意PEP8格式。” 然后它就会在你编码时，在旁边默默提供帮助。

从技术角度看，TRAE的智能体是基于多智能体系统架构设计的，每个智能体都是一个独立的AI代理，具有特定的能力集和任务执行策略。它可以理解用户意图，规划任务步骤，调用相应工具，并将结果以自然语言形式呈现给用户。

2.2 手把手创建你的第一个智能体

咱们不聊理论，直接动手做一个。假设我想做一个帮我审查JavaScript代码的智能体。
在这里插入图片描述

步骤1：找到入口
登录TRAE后，看左边导航栏，找到并点击 “智能体” 按钮。

步骤2：开始创建
进入智能体控制台，你会看到一个显眼的 “+ 创建智能体” 按钮，点击它。

步骤3：填写基本信息
就像给新生儿起名字一样，这里要填：

  • 名称：起个一眼能懂的名字，比如“JS代码审查小管家”。
  • 描述：简单写写它的职责，比如“专注于JavaScript/TypeScript代码的语法检查和基础风格提示”。
  • 图标（可选）：可以上传个小图片，让它更有辨识度。

步骤4：配置核心能力（关键！）
这里是决定智能体“会什么”的地方。我们主要关注：

  • 代码理解等级：对于代码审查，选择“中等”或“高级”，让它能理解更多上下文。从技术上讲，这会影响底层语义分析器的深度和广度。
  • 可使用的工具：勾选“静态代码分析”、“语法检查”这类工具。这些工具基于**抽象语法树（AST）**分析，能够精准识别代码问题。
  • 任务执行权限：如果是个人使用，选择“允许在用户确认后执行修改”；如果是团队公用，建议选“仅提供建议”。这涉及到权限管理策略，确保代码安全。

小贴士：第一次创建时，建议不用勾选太多工具，先专注一两个核心功能，后续可以再调整。智能体的能力边界应该与其预期任务相匹配，避免功能冗余导致的性能下降。

步骤5：保存并激活
填写完所有信息后，点击 “保存并部署”。系统会花几分钟时间配置，底层会为智能体分配计算资源并初始化其知识库。完成后，你的智能体就“活”了，状态会显示为“运行中”。
在这里插入图片描述

2.3 怎么使用这个智能体？

创建好了，怎么让它工作？有三种常用方式：

  1. 在编辑器里随时召唤：当你打开一个JS文件写代码时，在代码区域右键，菜单里会出现你智能体的名字，点击它就能请求审查。这是最直接的上下文相关调用方式。
  2. 通过命令面板呼出：按 Ctrl+Shift+P 调出万能命令面板，输入你智能体的名字（如“JS审查”），选择对应的命令。这种方式适合跨文件操作或复杂任务。
  3. 在侧边栏聊天：TRAE通常有一个聊天侧边栏，你可以像和朋友聊天一样输入：“嘿，帮我看看这段代码有没有问题”，然后把代码贴给它。这体现了自然语言交互的优势，降低了使用门槛。

2.4 高级技巧与避坑指南

  • 一专多能还是专精一项？ 初期建议创建多个单一功能的智能体（如“审查JS的”、“写SQL的”），比创建一个“大而全”的更好管理。从智能体设计原则上讲，单一职责的智能体执行效率更高，错误率更低。
  • 权限设置要小心：如果给智能体“直接执行修改”的权限，务必确保你信任它的逻辑，或者重要代码先备份。这涉及到代码安全和版本管理的最佳实践。
  • 它不灵了怎么办？ 去智能体控制台，检查其状态是否为“运行中”，尝试“重启”一下。如果还是不行，可能是配置的工具出了问题，可以去查看智能体日志，里面会有详细的错误信息。
  • 性能优化：如果智能体响应较慢，可以适当降低“代码理解等级”，减少其分析的深度，或者限制其可访问的文件范围，这涉及到计算资源分配和任务复杂度管理。

三、MCP平台：给TRAE安装“插件超市”

3.1 MCP是什么？为什么需要它？

如果把TRAE比作你的智能手机，那么MCP（Marketplace Component Platform）就是一个官方应用商店。TRAE团队不可能开发所有功能，于是他们开放了接口，让其他开发者可以把好用的工具（比如连接数据库的、调用API的、对接设计软件的）做成标准化的“插件”上架到这里。你需要什么，就来“市场”里安装。

从技术架构角度看，MCP是TRAE的扩展平台，基于标准化API接口和OAuth2.0授权机制，允许第三方服务安全地集成到TRAE生态中。每个MCP工具都是一个独立的微服务，通过标准化的协议与TRAE核心系统通信。

3.2 逛市场，找到你需要的神器

步骤1：进入市场
在左侧导航栏，点击 “MCP市场”。

步骤2：浏览与搜索
市场首页会推荐热门工具。你也可以在顶部的搜索框里直接搜，比如“Figma”、“Git”、“Docker”。市场采用分类导航和标签系统，方便用户快速找到所需工具。

步骤3：了解工具详情
点击任何工具卡片，会进入详情页。这里一定要看：

  • 功能描述：它到底能干嘛？通常会列出核心功能点和适用场景。
  • 安装要求：需不需要额外的账号、API密钥？这涉及到第三方服务集成的权限管理。
  • 技术参数：部分工具会列出支持的版本、资源占用等技术指标。
  • 用户评价：看看其他开发者的反馈，这是社区驱动的重要体现。
    在这里插入图片描述

3.3 安装并配置一个工具（以Figma为例）

找到了想要的工具，怎么装？

步骤1：点击安装
在Figma工具详情页，点击绿色的 “安装” 按钮。系统会开始下载工具包并进行环境检查。

步骤2：授权与配置
这时会弹出一个配置向导：

  1. 第一步：它会问你要Figma的个人访问令牌（Access Token）。这是关键！别慌，下一步会告诉你怎么获取。
  2. 第二步：去Figma获取令牌（现在跟着我做）：
    • 新开一个浏览器标签页，访问 https://www.figma.com/developers。
    • 用你的Figma账号登录。
    • 找到“Access Tokens”相关区域，点击“Create new token”。
    • 为令牌起个名字（如“For TRAE”），然后生成。
    • 非常重要：立刻复制那串长长的字符（像figd_xxxxxxxx），它只会显示一次！
  3. 第三步：回到TRAE配置页，把复制的令牌粘贴到输入框里。TRAE会使用这个令牌通过Figma REST API进行认证和授权。
  4. 第四步：后续可能会问一些简单偏好设置，比如默认下载图片的格式（PNG/SVG），按需选择即可。
  5. 第五步：点击 “完成配置”。系统会保存你的配置，并建立TRAE与Figma的安全连接。

步骤3：验证安装成功
安装完成后，回到MCP市场，点击 “已安装” 标签页，应该能看到刚刚安装的Figma工具，状态是“已启用”。你也可以点击“配置”按钮查看或修改当前的设置。

3.4 管理你的工具

  • 更新：当工具作者发布新版本时，在“已安装”列表里会有“更新”提示，点击即可。更新通常会修复安全漏洞或增加新功能。
  • 禁用/卸载：如果暂时不用，可以“禁用”；确定不再需要，就“卸载”。禁用只是暂停工具服务，而卸载会删除所有相关配置和数据。
  • 配置：安装时的设置以后可以随时修改，点击工具卡片上的“配置”按钮就行。部分高级工具还支持自定义脚本和钩子函数，实现更复杂的集成逻辑。
  • 权限管理：定期检查已安装工具的权限范围，确保它们只访问必要的资源，这是安全最佳实践的重要部分。
    在这里插入图片描述
    在这里插入图片描述

四、Figma网站介绍

4.1 什么是Figma？

在这里插入图片描述

Figma是一款基于浏览器的协作设计工具，它彻底改变了设计师和开发人员的工作方式。与传统的桌面设计软件不同，Figma完全基于云服务，允许多人实时协作设计，无需安装复杂的软件，只需一个浏览器即可开始工作。

从技术角度看，Figma采用了Web技术栈（HTML5、CSS3、JavaScript）构建，通过WebSocket实现实时协作，使用矢量图形引擎处理设计元素，核心优势在于其云端架构和实时同步机制。

4.2 Figma的核心功能

  • 实时协作：多人可以同时在同一个设计文件中工作，看到彼此的操作，基于** Operational Transformation** 算法确保数据一致性
  • 基于浏览器：无需安装软件，可在任何设备上访问，体现了**SaaS（软件即服务）**的优势
  • 设计系统支持：支持创建和管理设计系统，确保设计一致性，通过组件库和样式变量实现
  • 原型设计：内置原型功能，可创建交互式原型，支持页面跳转和交互动画
  • 组件库：支持创建可重用的组件，提高设计效率，采用实例化和继承机制
  • 版本控制：自动保存设计历史，可随时回溯到之前的版本，基于增量存储技术
  • 插件生态：丰富的插件系统，扩展Figma的功能，基于Figma Plugin API开发

4.3 Figma的应用场景

  • UI/UX设计：创建网站、应用程序的用户界面和用户体验设计，是Figma最核心的应用场景
  • 产品设计：从概念到原型的完整产品设计流程，支持产品思维和用户研究的落地
  • 团队协作：设计师、开发人员和产品经理之间的协作，打破了传统设计工具的信息孤岛
  • 设计系统管理：建立和维护企业设计系统，确保品牌一致性和设计规范的执行
  • 原型测试：创建交互式原型，进行用户测试，收集用户反馈并快速迭代

4.4 如何获取Figma文件信息

在使用Figma MCP工具之前，你需要了解如何获取Figma文件的关键信息：

  1. 获取fileKey：

    • 打开Figma文件
    • 查看浏览器地址栏，URL格式通常为：https://www.figma.com/file/{fileKey}/文件名
    • 复制fileKey部分（通常是一串字母和数字的组合），这是Figma文件的唯一标识符

  2. 获取nodeId：

    • 在Figma编辑器中选择你需要操作的元素
    • 右键点击该元素，选择"复制链接"
    • 粘贴链接到文本编辑器中，URL格式通常为：https://www.figma.com/file/{fileKey}/文件名?node-id={nodeId}
    • 复制nodeId部分，这是Figma文件中具体元素的唯一标识符

  3. 创建Figma账号：

    • 访问Figma官网（https://www.figma.com）
    • 点击"注册"按钮，创建一个Figma账号
    • 登录后，你可以创建新的设计文件或访问共享的文件，开始你的设计之旅

五、Figma与TRAE联动实战：从设计图到代码资源

很多团队用Figma做设计，开发则需要从设计图里获取尺寸、颜色、下载切图。TRAE的Figma MCP工具就是为了打通这个流程，实现设计到代码的无缝衔接。

5.1 准备工作：获取Figma文件的关键ID

要操作一个Figma文件，你需要两个“钥匙”：

  1. fileKey（文件钥匙）：

    • 在浏览器中打开你的Figma设计文件。
    • 看地址栏，URL长得像：https://www.figma.com/file/AbC123dEfGhIjKl/我的设计稿
    • AbC123dEfGhIjKl 这个部分就是 fileKey，把它复制下来。这是Figma API识别文件的唯一标识。

  2. nodeId（节点ID，指具体某个元素）：

    • 在Figma里，用鼠标点击选中一个具体的图形、组件或画板。
    • 右键点击它，选择菜单里的 “Copy link”（复制链接）。
    • 把链接粘贴到记事本里，它长得像：...?node-id=1-5
    • 1-5 这个部分就是 nodeId，把它复制下来。这是Figma API识别具体元素的路径标识。

5.2 实战1：把设计数据“吸”到TRAE里

假设我想知道一个按钮在Figma里的精确尺寸和颜色值。

操作步骤：

  1. 在TRAE里，按 Ctrl+Shift+P 打开命令面板。
  2. 输入 figma get，选择 mcp_Figma_get_figma_data 这个命令。
  3. 会弹出参数填写框：
    • fileKey: 粘贴你刚才复制的文件钥匙。
    • nodeId: 粘贴你复制的按钮节点ID。
  4. 点击执行。TRAE会调用Figma REST API的/files/{fileKey}/nodes端点，获取指定节点的数据。
  5. 稍等片刻，结果会以结构化的JSON数据形式展示在下方。里面会包含这个按钮的坐标、宽高、填充色、边框等所有设计属性。

这样有什么用？ 你可以快速对照这些数值来写CSS，保证还原度。从技术上讲，这些数据遵循Figma Node API的数据结构，包含了元素的几何属性、样式属性和层级关系。

5.3 实战2：一键下载设计图中的图片

设计师导切图太麻烦？用工具自动下。

操作步骤：

  1. 同样打开命令面板，输入 figma download，选择 mcp_Figma_download_figma_images。
  2. 填写参数：
    • fileKey: 同上。
    • nodes: 这是一个数组，格式如下（注意JSON格式）： 
      [
  {
    "nodeId": "1-5",
    "fileName": "logo.png"
  },
  {
    "nodeId": "10-20", 
    "fileName": "hero-banner.jpg"
  }
]
      意思就是：把节点ID为1-5的元素，下载下来并命名为logo.png；把10-20下载为hero-banner.jpg。
    • localPath: 填写你项目里想保存的文件夹路径，比如 ./src/assets/images/。
  3. 点击执行。TRAE会调用Figma REST API的/images/{fileKey}端点，获取指定节点的图片数据。
  4. 工具会开始下载，完成后你可以去指定的 localPath 文件夹里找到刚刚下载好的图片，直接在代码里引用即可。

5.4 常见问题排错

  • 错误：Invalid Token → 你的Figma令牌失效或填错了。去Figma后台重新生成一个，回来更新配置。这涉及到OAuth2.0令牌管理的最佳实践。
  • 错误：File not found → 检查 fileKey 是否复制正确，以及你的Figma账号是否有权限访问这个文件。这涉及到API权限管理和资源访问控制。
  • 错误：403 Forbidden → 你的Figma令牌权限不足，或者TRAE的IP地址不在Figma的允许列表中。需要在Figma开发者设置中检查令牌权限范围。
  • 图片下载失败 → 检查 localPath 路径是否存在，或者文件名是否有非法字符。这涉及到文件系统操作和路径处理的基本原理。
  • 数据解析错误 → 可能是Figma API返回的数据格式发生了变化，或者TRAE的Figma工具版本过旧。需要更新MCP工具到最新版本。

六、把一切串起来：一次完整的实践练习

光看不动手容易忘。我们来做个小练习，目标：创建一个智能体，让它利用Figma工具，帮我自动生成设计标注文档。

  1. 第一步：创建智能体

    • 去智能体控制台，创建名为“设计标注提取器”的智能体。
    • 在能力配置中，开启“文件操作”和“调用MCP工具”的权限。
    • 在行为配置中，设置“任务执行策略”为“详细规划”，让它在执行复杂任务时先制定步骤。
    • 保存。

  2. 第二步：确保Figma工具已安装

    • 去MCP市场确认Figma工具已安装并配置好令牌。
    • 检查Figma工具的版本，确保是最新版，避免API兼容性问题。

  3. 第三步：给智能体“派活”

    • 在聊天界面或命令面板对你的智能体说：“使用Figma工具，获取fileKey为AbC123dEfGhIjKl的文件中，nodeId为1-5的元素数据，并把主要样式信息整理成Markdown格式告诉我。”
    • 看它如何一步步调用工具，并返回整理好的信息。从技术上讲，智能体会：
      1. 解析用户意图，识别出需要使用Figma工具
      2. 规划任务步骤，确定需要先获取数据，再整理格式
      3. 调用MCP工具，传递正确的参数
      4. 处理返回数据，提取关键信息
      5. 格式转换，将JSON数据转换为Markdown格式
      6. 呈现结果，以自然语言形式展示给用户

  4. 第四步：验证结果

    • 检查智能体返回的Markdown文档，确认包含了所有必要的样式信息
    • 与Figma原设计进行对比，确保数据的准确性
    • 如果有遗漏，可以向智能体反馈，让它改进提取逻辑

通过这个练习，你能体会到智能体作为“调度员”，是如何串联起不同工具来完成一个复杂任务的。从技术架构角度看，这体现了多智能体系统的协作能力，以及工具集成的价值所在。

七、总结与后续学习建议

恭喜你！如果你跟着做到了这里，已经掌握了TRAE最核心、最实用的两个功能：创造智能助手和扩展工具生态。同时，你也了解了相关的技术原理和专业术语，为后续的深入学习打下了基础。

核心心法回顾：

  1. 智能体 = 专属机器人：先想清楚要它帮你解决什么具体问题，从简单的开始创建。从技术上讲，智能体是AI代理的实例，具有特定的能力集和任务执行策略。
  2. MCP工具 = 插件商店：缺什么功能就去市场找，安装的关键是准备好对应的API密钥。MCP是TRAE的扩展平台，基于标准化API接口和OAuth2.0授权机制。
  3. 联动使用威力大：让智能体去调用MCP工具，可以实现自动化的工作流。这体现了系统集成的价值，1+1>2的效果。
  4. 技术原理很重要：了解底层技术原理，不仅能帮你更好地使用工具，还能在遇到问题时快速定位和解决。

接下来可以探索什么？

  • 高级智能体配置：学习如何设置智能体的记忆机制、任务规划策略和工具使用优先级，打造更智能的助手。
  • MCP工具开发：如果你有开发能力，可以尝试基于MCP SDK开发自己的工具，为TRAE生态贡献力量。
  • 深度集成：研究如何将TRAE与你的CI/CD流程、项目管理工具或其他开发系统深度集成，打造一体化的开发环境。
  • 性能优化：探索如何优化TRAE的资源占用、响应速度和代码分析深度，根据你的硬件条件和项目需求找到最佳平衡点。
  • 安全最佳实践：学习TRAE的安全配置和权限管理最佳实践，确保代码和数据的安全。

技术学习路径建议：

  1. 入门阶段：熟悉TRAE的基本操作，创建简单的智能体，安装常用的MCP工具。
  2. 进阶阶段：学习智能体的高级配置，尝试使用Figma等复杂MCP工具，参与TRAE社区讨论。
  3. 专家阶段：开发自定义MCP工具，构建复杂的智能体工作流，为TRAE生态贡献代码或文档。

刚开始可能会觉得步骤有点多，但就像学任何新软件一样，多用几次就熟练了。最重要的是动手尝试，遇到问题就利用官方文档和社区。希望这份指南能让你顺利起步，享受TRAE带来的高效开发体验！

附录：懒人快捷键备忘单

  • Ctrl+Shift+P：万能命令面板（找工具、找命令）
  • Ctrl+K：快速打开/聚焦到智能体聊天框
  • Ctrl+Shift+M：直接打开MCP市场
  • Ctrl+S：保存（任何时候都要记得保存！）
  • Ctrl+F：在当前文件内搜索
  • Ctrl+Shift+F：在整个项目内搜索
  • Ctrl+D：选择下一个匹配项
  • Alt+Click：多光标选择
  • Ctrl+Space：智能代码提示
  • Ctrl+/：注释/取消注释

有用的链接

  • TRAE官方帮助中心：https://help.trae.dev（遇到问题先来这里搜）
  • Figma Developers API文档：https://www.figma.com/developers/api（需要深度集成时查阅）
  • TRAE用户论坛：https://forum.trae.dev（看看其他人的经验分享和解决方案）
  • TRAE GitHub仓库：https://github.com/trae-ai/trae（如果你想贡献代码或报告问题）
  • MCP工具开发文档：https://docs.trae.dev/mcp（学习如何开发自定义MCP工具）

教程写到这里，基本上把我踩过的坑和总结的经验都包含进去了。每个步骤我都尽量写得“无脑”可跟，同时也引入了必要的专业术语和技术原理。你可以根据这个框架，在需要的地方配上对应的界面图片，一篇图文并茂的详细教程就诞生了。祝你学习顺利！

Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

智能体2026：AI从工具到生产系统的转变与机遇

avatar 2048 AI社区
cover

突破RAG天花板：Agentic-R双视角检索技术详解

avatar 2048 AI社区
cover

对比一圈后，更贴合本科生的AI论文平台，千笔AI VS 学术猹

avatar 2048 AI社区