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

admin 2025年4月23日00:08:00评论17 views字数 2550阅读8分30秒阅读模式
玩转MCP | 一文看懂如何在 Trae IDE 中解锁 MCP

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

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

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

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

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

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

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

什么是MCP

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

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

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

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

使用说明

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

玩转MCP | 一文看懂如何在 Trae IDE 中解锁 MCP
玩转MCP | 一文看懂如何在 Trae IDE 中解锁 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 粘贴到配置项中,点击「确认」即可完成添加。

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

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

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

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

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

手动配置  MCP Servers

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

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

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

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

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

批量添加 MCP Servers

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

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

管理 MCP Servers

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

你可以编辑或删除 MCP Server。

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

MCP 应用实战

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

1. 打开 MCP 配置页面

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

2. 在 Figma 个人主页生成 Token

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更多使用场景

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

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

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

*该案例由栋人佳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 将陪伴你真正迈向“智能无限”的协作开发时代。

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

原文始发于微信公众号(字节跳动技术团队):玩转MCP | 一文看懂如何在 Trae IDE 中解锁 MCP

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2025年4月23日00:08:00
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   玩转MCP | 一文看懂如何在 Trae IDE 中解锁 MCPhttps://cn-sec.com/archives/3985927.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息