字节的AI编辑器 TRAE 中 MCP Server 使用指南：从入门到精通
（基于2026年3月最新版本信息，Trae v1.3+ 及后续更新）

Trae（The Real AI Engineer）是字节跳动推出的AI原生集成开发环境（AI IDE），对标 Cursor、Windsurf 等工具。它深度集成大模型（豆包、Claude、Gemini 等），并在2025年4月左右的重磅更新中全面支持 Model Context Protocol (MCP)。

MCP（模型上下文协议）是一个开放标准，允许大模型像调用工具一样访问外部服务、API、数据库、设计工具（Figma）、地图、搜索等。Trae 把 MCP 做成了最易用的形态之一：内置 MCP 市场 + 一键添加 + 自定义 Agent 联动，几乎零门槛。

一、MCP 在 Trae 中的核心价值（为什么值得学）

• 让 AI “言出法随”：不再只是聊天或补代码，而是能真正调用外部工具完成闭环任务
• 典型场景提升：
  • @Builder with MCP → 直接读 Figma 文件生成前端代码
  • 接入高德地图 MCP → 让 AI 规划真实行程并生成地图链接
  • 接入 GitHub MCP → AI 自动创建 PR、查 issue
  • 自研 MCP Server → 把公司内部系统、数据库、Jenkins 等接入 AI
• 免费 + 社区生态丰富（2026年已有数百个常用 MCP Server）

二、快速入门（5分钟上手）

前提：确保 Trae 已更新到支持 MCP 的版本（v1.3.0+，2025年4月后版本）

步骤1：进入 MCP 配置页面

• 打开 Trae → 点击右侧 AI 侧栏（或快捷键 Cmd/Ctrl + L）
• 点击右上角 齿轮设置图标 → 选择 MCP（或 “模型上下文协议”）
• 进入后看到 MCP 市场 + 手动配置 两个 Tab

步骤2：从市场一键添加（最推荐新手）

• 在 MCP 市场浏览热门 Server（GitHub、Figma、Tavily Search、高德地图、Notion、Slack 等）
• 找到想用的（如 Figma MCP），点击右侧 + 添加 按钮
• 部分 Server 支持傻瓜式配置（只需粘贴 API Token / Key）
  • 示例：Figma → 粘贴 Figma Personal Access Token → 一键完成
  • GitHub → 输入 GitHub PAT（Personal Access Token）
• 添加成功后，该 MCP Server 会出现在你的可用工具列表中

步骤3：立即在 Agent 中使用

• 在 Chat 或 Builder 面板输入：

  @Builder with MCP
  根据这个 Figma 链接生成 React 代码：https://www.figma.com/file/xxxx
  

• 或：

  @行程规划助手
  帮我规划杭州3天2夜行程，要包含高德地图导航链接
  

• AI 会自动调用对应的 MCP Server 获取实时数据并生成结果

三、中级：手动配置 & 自定义 MCP Server

当市场里没有你需要的工具时，可以手动添加或自己开发。

方式1：手动粘贴 JSON 配置（推荐）

• 在 MCP 配置页点击 手动配置 或 添加更多工具
• 粘贴以下格式的 JSON（以高德地图为例）：

{
  "mcpServers": {
    "amap-maps": {
      "command": "npx @amap/mcp-server@latest",
      "args": ["--key", "你的高德Web服务Key"]
    }
  }
}

• 常用启动方式：
  • npx xxx（Node.js 工具，最常见）
  • uvx xxx（Python 工具，越来越流行）
  • http://localhost:8000（本地已运行的 MCP Server）

方式2：项目级 vs 全局配置

• 全局：~/.trae/mcp.json（所有项目共享）
• 项目级：在项目根目录创建 .trae/mcp.json 或 mcp_settings.json
• 项目级优先级更高，便于团队共享

方式3：自己开发 MCP Server（进阶）

• MCP 是简单的 HTTP + JSON 协议
• 官方推荐用 Python FastAPI / Node Express 快速搭
• 最低实现只需暴露 /tools（列出工具）和 /invoke（执行工具）两个端点
• 参考开源模板：anthropic/mcp-python-template 或字节社区的示例仓库

四、高级：自定义 Agent + MCP 联动（生产级玩法）

Trae 允许你创建专属智能体，并绑定多个 MCP Server。

创建自定义 Agent 步骤

1. AI 侧栏 → Agent Tab → 创建新 Agent
2. 设置：
   • 名称：如 “UI还原大师”
   • 提示词（Persona）：你是一位资深前端工程师，擅长从 Figma 还原像素级代码…
   • 绑定 MCP Servers：勾选 Figma、GitHub、Tailwind MCP 等
   • 内置工具：启用文件读写、终端执行等
3. 保存后，在任意地方输入 @UI还原大师 根据这个 Figma 链接...

实战案例推荐（2026年热门）

• Figma → 前端代码还原 Agent
• 高德地图 + Amap MCP → 智能行程规划 Agent
• Tavily Search + GitHub MCP → 技术调研 + 代码生成 Agent
• Notion / 飞书 MCP → 文档自动总结 + 任务生成 Agent
• 自研内部 Jenkins / Jira MCP → 自动化 CI/CD Agent

五、常见问题 & 避坑清单（2026年高频）

问题	解决办法
添加 MCP 后不生效	重启 Trae / 检查 Token 是否过期 / 确认 Agent 已绑定该 Server
“工具调用失败”或 404	检查 MCP Server 是否正在运行（npx/uvx 命令是否卡住）
市场里没有某个 Server	手动 JSON 配置，或去 Civitai / GitHub 搜索社区 MCP
响应太慢	优先用本地 MCP Server（localhost），避免网络延迟大的云服务
批量管理多个 Server	编辑 ~/.trae/mcp.json 文件，直接粘贴多条配置
Agent 不调用 MCP	提示词要明确写“使用工具”“调用 MCP”“查询外部数据”等触发词
Token 泄露风险	不要把 Key 直接写在项目里，用环境变量或 Trae 的安全输入框

六、下一阶段进阶方向

1. 学习 MCP 协议规范（Anthropic 官网文档最权威）
2. 开发自己的 MCP Server（推荐 Python FastAPI 模板）
3. 结合 Trae SOLO 模式（全自动编程）+ 自研 MCP 实现公司内部闭环
4. 关注 Trae 社区（飞书群、GitHub Trae-AI/TRAE、B站/小红书教程）

你现在是刚接触 Trae，还是已经加过几个 MCP 了？
想重点掌握哪个实战场景（Figma还原、高德地图、GitHub自动化、自研 MCP）？

告诉我具体需求，我可以给你贴出对应 JSON 配置 + Agent 提示词模板 + 完整调用示例，一步到位。