玩转MCP | 一文看懂如何在 Trae IDE 中解锁 MCP

● 当微服务接口频繁变更，日志分散在多个仓库，你还在逐个仓库人工检索吗？

● 当 UI 设计稿的文本样式更新，你的前端代码还在逐行查找替换吗？

● 当网页的动态表格因 AJAX 加载随机延迟，你的测试脚本还在逐行调整 XPath 选择器吗？

● 这一切，是否正吞噬着你本应用于技术突破的创造力？

新版本中，Trae IDE 的自定义智能体能力让 AI 能够基于开发者需求灵活调度多维度的工具和资源，从而为任务提供全方位的支持，只需@一下即可召唤智能体，这个过程中，MCP 让智能体能够接入外部资源，实时扩展其知识和工具库，构建精准的解决方案。

通过 MCP，你的智能体可以无缝调用外部 API、服务和工具，具备更广泛的功能，打造智能体的无限潜力，更好地为你所用。

什么是MCP

MCP，全称 Model Context Protocol，是一种由 Anthropic 发布的协议，旨在为大语言模型（LLMs）提供一种标准化的方式，以访问外部的上下文数据源与工具。

在 Trae 中，MCP 被作为一种连接外部工具与智能体之间的桥梁。通过 MCP，开发者可以为智能体添加各种第三方工具或服务，使其具备更强的任务执行与理解能力。例如，可以接入 Supabase 进行数据库操作，或集成文档搜索服务（如 FireCrawl）为模型提供最新的技术背景。在 Trae IDE 中，MCP Server 支持两种传输类型：stdio 传输、SSE 传输。

简而言之，MCP 使 AI 不再局限于模型本身的能力，而能够借助强大的外部工具，进行更专业、更复杂的开发任务。

使用说明

你可以直接通过设置入口进入 MCP 配置页面，或在智能体模式下通过「添加更多工具」进入。

从市场添加 MCP Servers

Trae 内置了 MCP 市场 ，提供了社区中热门的 MCP Servers，你可以将它们添加到智能体中。步骤如下：

1. 在 Trae IDE 的 AI 面板中点击右上角的设置图标，选择「MCP」进入配置页面，点击「添加」。

2. 从列表中找到所需的 MCP Server，然后点击右侧的 + 按钮。

3. 其中，Trae IDE 为 4 个 MCP Server 提供了轻松配置方式，你无需查找并填写配置 JSON，即可快速添加 MCP Server。下面以 GitHub 为例，只需要将 Tokens 粘贴到配置项中，点击「确认」即可完成添加。

你可以选择使用已有的 Tokens 或在 GitHub 重新按照需求创建，复制对应的 Tokens 填入指定位置即可。

该 MCP Server 的配置已完成。当前需在智能体中调用 MCP，你可以将其添加到指定智能体中，你配置的所有 MCP Servers 都会自动添加到 @Builder with MCP。

手动配置 MCP Servers

如果在市场中无法找到你想要的 MCP Server，或者想使用自己开发的 MCP Server ，可以进行手动配置。

1. 你可以直接通过设置入口进入 MCP 配置页面，或在智能体模式下通过「添加更多工具 」进入。

2. 在 手动配置 窗口中，粘贴 JSON 配置内容，推荐优先使用 NPX 或 UVX 配置。

批量添加 MCP Servers

如果你想批量添加 MCP Servers，可以通过打开原始配置文件，粘贴代码来实现。

管理 MCP Servers

你可以编辑或删除 MCP Server。

MCP 应用实战

接下来，小编将以使用 Figma Al Bridge ，还原设计稿生成前端页面为例，手把手教你上手 MCP，Let's go!

1. 打开 MCP 配置页面

2. 在 Figma 个人主页生成 Token

3. 粘贴至轻松配置的文本框中，点击确认

4. 你可以@Builder with MCP 使用你配置的所有 MCP，或自定义一个智能体，配置所需要的工具和提示词 。

提示词参考： “根据用户提供的 Figma 链接，精准还原 UI 设计，生成语义化、响应式的前端页面代码。代码结构清晰，遵循行业最佳实践，视觉细节与设计稿高度一致，默认使用 [React + Tailwind]（可按实际替换），需支持多端适配。禁止擅自修改设计内容，确保忠实还原。”

5. 接下来，你只需要在对话框输入生成前端代码的指令即可快速获取前端代码。例如“请严格按照我提供的 figma 链接内容生成前端页面。UI 要严格还原设计稿，需要实现响应式设计（附上 figma 设计稿链接，需确认配置 token 的账号有该设计稿的访问权限）。”

可以看到，Trae 快速地获取 Figma 中的布局信息，按照结构和样式生成了文件代码。

6. 最后，查看效果，Trae 已经按照要求完成了开发。

除此之外，当交互稿中的组件和文案有更新时， Figma Al Bridge 还可以帮助你完成批量替换的工作，大大提升工作效率。

更多使用场景

你还可以将 MCP 应用在更多场景：

1. 在 Blender 中实现自动 建模 。通过 Blender-MCP ， Trae 可以根据用户的要求自动完成建模。

*该案例由栋人佳Dougle 同学分享

2. 跨仓库 调试与问题定位。 连接 Filesystem MCP 同时访问多个仓库，辅助问题追踪和调试。

3. 自动化文 档更新。 连接 GitHub MCP 访问 GitHub 仓库，自动根据代码更改更新 API 文档、更新 Swagger 定义，变更日志条目。

4. 智能 数据库运维。 连接 PostgreSQL MCP 直接查询数据库，实现数据库模式的自动生成和更新等。

5. 自动化网 页执行和测试。 连接 Puppeteer MCP 自动化浏览器操作，例如点击、表单填写等操作，动态内容也不在话下。

6. 路线 规划。 连接 高德地图 MCP 或 Google Maps MCP 可访问基于位置的数据，搜索地点并计算路线。

7. K8s 集群 管理。 连接Kubernetes MCP 可管理 Kubernetes 集群，包括 Pod、部署和服务。

8. 更多场景，等你来探索。

MCP 如何帮助你提升开发效率？

Trae & 稀土掘金——超级体验官活动进行中，分享你的实践作品，秀出你的脑洞，赢奖励+官方曝光！

活动链接： https://juejin.cn/post/7495578098840436774

未来，随着 Trae IDE 可集成的外部工具的持续扩充，我们将看到越来越多的任务可以交由 AI 自主完成，从设计、编码、调试，到部署与文档编写，Trae IDE 将陪伴你真正迈向“智能无限”的协作开发时代。