字节的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 步骤
- AI 侧栏 → Agent Tab → 创建新 Agent
- 设置：
- 名称：如 “UI还原大师”
- 提示词（Persona）：你是一位资深前端工程师，擅长从 Figma 还原像素级代码…
- 绑定 MCP Servers：勾选 Figma、GitHub、Tailwind MCP 等
- 内置工具：启用文件读写、终端执行等
- 保存后，在任意地方输入
@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 的安全输入框 |
六、下一阶段进阶方向
- 学习 MCP 协议规范（Anthropic 官网文档最权威）
- 开发自己的 MCP Server（推荐 Python FastAPI 模板）
- 结合 Trae SOLO 模式（全自动编程）+ 自研 MCP 实现公司内部闭环
- 关注 Trae 社区（飞书群、GitHub Trae-AI/TRAE、B站/小红书教程）
你现在是刚接触 Trae，还是已经加过几个 MCP 了？
想重点掌握哪个实战场景（Figma还原、高德地图、GitHub自动化、自研 MCP）？
告诉我具体需求，我可以给你贴出对应 JSON 配置 + Agent 提示词模板 + 完整调用示例，一步到位。
