玩转 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 不再局限于模型本身的能力,而能够借助强大的外部工具,进行更专业、更复杂的开发任务。
Trae 下载链接:Trae
二、使用说明
你可以直接通过设置入口进入 MCP 配置页面,或在智能体模式下通过「添加更多工具 」进入。


从市场添加 MCP Servers
Trae 内置了 MCP 市场,提供了社区中热门的 MCP Servers,你可以将它们添加到智能体中。步骤如下:
在 Trae IDE 的 AI 面板中点击右上角的设置图标,选择「MCP」进入配置页面,点击「添加 」
从列表中找到所需的 MCP Server,然后点击右侧的 + 按钮。
其中,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 ,可以进行手动配置。
你可以直接通过设置入口进入 MCP 配置页面,或在智能体模式下通过「添加更多工具 」进入。

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

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

管理 MCP Servers

你可以编辑或删除 MCP Server。
三、MCP 实战
接下来,小编将以使用 Figma Al Bridge ,还原设计稿生成前端页面为例,手把手教你上手 MCP,快跟着小编一起试试吧!(Trae 下载链接:Trae)Let's go!
打开 MCP 配置页面

在 Figma 个人主页生成 Token


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

你可以 @Builder with MCP 使用你配置的所有 MCP,或自定义一个智能体,配置所需要的工具和提示词 。
提示词参考:“根据用户提供的 Figma 链接,精准还原 UI 设计,生成语义化、响应式的前端页面代码。代码结构清晰,遵循行业最佳实践,视觉细节与设计稿高度一致,默认使用 [React + Tailwind](可按实际替换),需支持多端适配。禁止擅自修改设计内容,确保忠实还原。”


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

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

最后,查看效果,Trae 已经按照要求完成了开发

除此之外,当交互稿中的组件和文案有更新时, Figma Al Bridge 还可以帮助你完成批量替换的工作,大大提升工作效率。
四、更多使用场景
你还可以将 MCP 应用在更多场景
在 Blender 中实现自动建模。通过 Blender-MCP , Trae 可以根据用户的要求自动完成建模。
*该案例由栋人佳 Dougle 同学分享
跨仓库调试与问题定位。连接 Filesystem MCP 同时访问多个仓库,辅助问题追踪和调试。
自动化文档更新。连接 GitHub MCP 访问 GitHub 仓库,自动根据代码更改更新 API 文档、更新 Swagger 定义,变更日志条目。
智能数据库运维。连接 PostgreSQL MCP 直接查询数据库,实现数据库模式的自动生成和更新等。
自动化网页执行和测试。连接 Puppeteer MCP 自动化浏览器操作,例如点击、表单填写等操作,动态内容也不在话下。
路线规划。连接 高德地图 MCP 或 Google Maps MCP 可访问基于位置的数据,搜索地点并计算路线。
K8s 集群管理。连接 Kubernetes MCP 可管理 Kubernetes 集群,包括 Pod、部署和服务。
………更多场景,等你来探索
未来,随着 Trae IDE 可集成的外部工具的持续扩充,我们将看到越来越多的任务可以交由 AI 自主完成,从设计、编码、调试,到部署与文档编写,Trae IDE 将陪伴你真正迈向“智能无限”的协作开发时代。点击链接,直达 Trae 官网下载,快来试试吧!下载链接:Trae
版权声明: 本文为 InfoQ 作者【Trae】的原创文章。
原文链接:【http://xie.infoq.cn/article/faae9c4c5d88a9839430aece0】。文章转载请联系作者。
评论