微信扫码
添加专属顾问
字节跳动出品的AI原生IDE Trae更新,教你创建MCP Server并生成网页。 核心内容: 1. Trae最新版本发布,带来智能体系统、MCP工具链等重磅功能 2. 国内首个支持MCP的AI IDE,Agent+MCP设计让AI更懂你的需求 3. 手把手教程:用Trae创建MCP Server并调用生成网页,实现AI自动化工作流
Trae 是字节出品的免费国产 AI 原生 IDE,今天它正式更新了一波重磅功能!
首先,Trae 的名字就很有意思:The Real AI Engineer,真正的 AI 工程师。它不只是一个能写代码的 AI,而是一个能理解你意图、帮你规划项目、解决问题的全方位 AI 开发伙伴。
这次更新最让我震撼的是三个核心功能:
Trae 支持 Agent 和 MCP 模式是最大的亮点,咱们的这个教程重点针对这两点来测试。
先说说说 MCP(Model Context Protocol),这是一种让 AI 能调用外部工具的协议。
Trae 是国内首个支持 MCP 的 AI IDE,且 Agent with MCP 的设计,可以同时创建多个场景下的 Agent,并关联不同 MCP Server,免去了其他 MCP Client 需要根据任务不时的去增删服务的繁琐操作。
这意味着 AI 不再局限于已有知识,可以联网搜索、调用 API 等,只需要在处理任务时,随时@对应的 Agent 出来拆解任务,调用 MCP 干活。
在 Coze 上发布一个工作流,关联 Coze 智能体发布,示例:用来通过关键词获取头条新闻,大模型整理后返回若干条新闻素材。
在 Trae 里通过 AI coding 完成这个 Coze 工作流开发,编译成一个 MCP Server 的代码。
在 Trae 里调用最新的 Agent+MCP 模式,自主调用这个 MCP Server 来执行绑定的 Coze 工作流获取新闻素材,最终生成日报的网页。
第一步,先在 Coze 中搭建了一个 bot,工作流比较简单。
详细的教程见彬子老师的原文:
彬子,公众号:AI Agent 新手村快速将 Coze 工作流接入 MCP 的教学
首先,要新建 MCP Server。
这里我们使用 Trae 来创建和编写 MCP Server,效率加倍。
然后我们就可以借助 AI Coding 快速的完成 MCP Server 的代码编写,基本能一步到位。
在 Trae 右侧点击“新建对话”,之前的 Chat 和 Builder 模式合并了,现在的理解成本更低了。
填入以下内容来完成任务说明。我输入了一段非常长的说明文本,利用 Coze 工作流稳定获取当天头条新闻素材,并由豆包大模型整理后返回。
这里为了增加编码难度,选择非流式调用方案,需要使用三个接口才能异步获取到正确的数据。代码如下:
我需要通过npx /create-server 命令在当前目录下创建一个使用Coze API 来获取新闻素材的 MCP 服务:mcp-server-coze-daily-creator。入参是 Client 传入的新闻关键词,服务会通过API的方式调用Coze的指定的bot获取新闻素材内容,命令行示例如下,需要改写成TS代码:先通过```curl --location --request POST 'https://api.coze.cn/v3/chat' \--header 'Authorization: Bearer pat_dGstyY6RZxxxxx' \--header 'Content-Type: application/json' \--data-raw '{"bot_id": "指定的bot的id","user_id": "12345678","stream": false,"auto_save_history":true,"additional_messages":[{"role":"user","content":"AI Agent","content_type":"text"}]}'```返回数据结构```{// 在 chat 事件里,data 字段中的 id 为 Chat ID。"id": "737662389258662****","conversation_id": "737554565555041****","bot_id": "指定的bot的id","completed_at": 1717508113,"last_error": {"code": 0,"msg": ""},"status": "completed","usage": {"token_count": 6644,"output_count": 766,"input_count": 5878}}```发送日报的请求,再1500毫秒的频率轮询,不超过30次```curl --location --request GET 'https://api.coze.cn/v3/chat/retrieve?chat_id=id&conversation_id=conversation_id' \--header 'Authorization: Bearer pat_dGstyY6RZxxxxx' \--header 'Content-Type: application/json' \```返回数据结构```{// 在 chat 事件里,data 字段中的 id 为 Chat ID,即会话 ID。"id": "737662389258662****","conversation_id": "737554565555041****","bot_id": "736661612448078****","completed_at": 1717508113,"last_error": {"code": 0,"msg": ""},"status": "completed","usage": {"token_count": 6644,"output_count": 766,"input_count": 5878}}```查看"status"直到"completed"时,调用```curl --location --request GET 'https://api.coze.cn/v3/chat/message/list?chat_id=id&conversation_id=conversation_id' \--header 'Authorization: Bearer pat_OYDacMzM3WyOWV3Dtj2bHRMymzxP****' \--header 'Content-Type: application/json' \```返回数据结构```{"code": 0,"data": [{"bot_id": "737946218936519****","content": "{\"msg_type\":\"generate_answer_finish\",\"data\":\"\",\"from_module\":null,\"from_unit\":null}","content_type": "text","conversation_id": "738147352534297****","id": "738216762080970****","role": "assistant","type": "verbose"},{"bot_id": "7379462189365198898","content": "2024 年 10 月 1 日是星期二。您可以通过日历或者相关的日期查询工具来核实确认。 ","content_type": "text","conversation_id": "738147352534297****","id": "738216760624724****","role": "assistant","type": "answer"}],"msg": "","detail": {"logid": "20250106172024B5F607030EFFAD653960"}}```获取type 为 answer类型的那一项里的content的内容,返回给 Client 端
我们在右侧交互框中@Builder 的方式唤起 Agent 来初始化一个 MCP Server 的代码。
在这轮生成过程中,DeepSeek-v3-0324 的大模型配合使用最佳。不仅代码直接可编译通过,且代码结构非常优雅。比如将说明中的结构转化成接口定义。
interface CozeConfig {apiKey: string;botId: string;userId: string;}interface CozeResponse {id: string;conversation_id: string;bot_id: string;completed_at: number;last_error: {code: number;msg: string;};status: string;usage: {token_count: number;output_count: number;input_count: number;};}interface CozeMessage {bot_id: string;content: string;content_type: string;conversation_id: string;id: string;role: string;type: string;}
Builder 按照说明很好的拆解了执行步骤。
整个过程非常的丝滑。
将代码中 Coze APIKey 和 Bot Id 替换成我自己的。调用 npm run inspector 唤起网页测试,OK
接下来就是将这个 MCP 服务配置到 Trae,让 Builder with MCP 来调用。
这个新版本原生支持 MCP 配置,可以去 MCP Store 选择,也可以通过配置文件手动配置。我这里配置了上面开发的 MCP Server。并将这个服务关联到 Builder with MCP 来调用。
Trae 这个版本还有个有意思的地方是,除了默认的 Builder with MCP这个选择。还可以自己创建个性化的 Agent,并配置不同的 MCP Server。这样需要不用的Agent with MCP 就可以直接@来切换。极大的避免了之前为了完成不同任务,要手动去增删 MCP Server(这个操作非常不智能)。
配置完成后,在对话框中 @Builder with MCP 后输入一个任务执行看看效果。
Agent 很好的理解了这个任务,发现了MCP 的服务和可用的 Tool Use,并抽取关键词来进行调用获取新闻素材。
在完成 MCP 调用后可以无缝衔接其他的任务,比如使用返回的素材内容来进一步生成网页的编码任务。
从个人体验下来的感觉,对比 Deepseek v3 和 r1 的模型,Builder with MCP这里的执行,选择 Doubao-1.5-pro 效果更好,豆包对关联的 MCP Server 和对应的 Tools 的理解和使用更准确,而 Deepseek 有编码偏向性而忽略去使用可用的 MCP Server。
最终测试生成的几个版本中一版日报网页,直接生成后的样式并没有非常好看,想要增加美观度,用了下面一段提示词。
因为 CN 版的 Doubao 和 Deepseek 模型识别参考图,可以先用多模态提取参考图的设计风格。
基于以下海报风格描述:
1. 色彩方案 :- 采用高对比度的荧光色彩组合(亮绿色背景与鲜红色图形元素)- 三色配色方案:荧光绿、鲜红色和黑色,简洁而有冲击力- 色彩饱和度高,视觉冲击力强2. 排版特点 :- 大胆的几何构成,特别是圆形和放射状线条的组合- 文字排版采用极粗的黑体字,有明显的垂直拉伸变形处理- 标题文字尺寸巨大,占据画面主要视觉重量- 底部区域采用黑色色块作为强烈对比3. 图形元素 :- 大量使用圆形和放射状线条作为主要视觉元素- 黑色短线条随机分布,增加动感和节奏感- 英文字母以不规则角度分布在画面中,形成视觉节奏4. 设计风格 :- 具有明显的后现代主义和解构主义特征- 融合了20世纪初期的构成主义和当代韩国设计美学- 强调视觉冲击力和动态感,而非传统的和谐与平衡5. 文字处理 :- 韩文标题采用极粗黑体,有明显的垂直拉伸- 英文采用细体无衬线字体,以不同角度排列- 日期和时间信息采用工业风格的数字字体
最后用 Deekseek v3 324 版本写出一个很有意思的页面,还可以互动。
Trae 其实有两款产品:
如果你习惯现有 IDE,可以选择 Trae 插件;如果想体验更深度的 AI 协作,推荐 Trae IDE。
值得一提的是,Trae 插件在4月16日也更新了 Builder 模式,可以帮助从0到1开发项目,预计月底将支持 JetBrains 平台。
Trae 通过智能体系统和上下文理解,能真正理解我的意图和项目背景。
对专业开发者来说,Trae 不只是提高了编码速度,更重要的是它能帮你处理那些繁琐但必要的工作,比如查文档、写测试、重构代码等,让你能专注于创造性工作。
对于初学者,Trae 的自然语言交互和智能体系统,让编程变得更加直观和易学。
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费POC验证,效果达标后再合作。零风险落地应用大模型,已交付160+中大型企业
2026-06-29
dbskill 更新:一键排版发布公众号
2026-06-22
写代码你不在乎AI味儿,写文章为啥那么计较?
2026-06-03
用 WorkBuddy 辅助写投标技术方案:别让 AI 替你投标,让它替你把话说清楚
2026-05-30
企业级 AI Coding 还有一堆问题,并没有像PR一样说的这么好用
2026-05-27
如何使用 AI 设计企业级产品?
2026-05-24
我研究了这个 18.6k Star 的 Skills,做幼师的女朋友夸我真猛!
2026-05-21
AI里,你必学的新Office三件套:MD、CSV、HTML
2026-05-21
体验完阿里首款Design Agent,我开始替UI/前端焦虑了..
2026-04-14
2026-04-28
2026-04-18
2026-05-21
2026-05-27
2026-05-19
2026-05-06
2026-05-21
2026-05-24
2026-06-03
2026-06-22
2026-05-27
2026-02-28
2026-02-07
2026-01-29
2026-01-21
2026-01-06
2025-12-22
欢迎您使用【53AI 官方网站】(以下简称“本网站”或“我们”)。本《会员服务协议》(以下简称“本协议”)是您(以下简称“会员”或“用户”)与【深圳市博思协创网络科技有限公司】之间关于注册、登录及使用本网站会员服务所订立的法律协议。
在您注册或登录前,请务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的条款、知识产权条款、争议解决条款等。此类条款将以加粗形式提示您注意。 当您通过微信公众号授权、手机验证码验证或其他方式成功登录本网站时,即视为您已完全理解并同意接受本协议的全部内容。
一、 定义
本网站:指由【深圳市博思协创网络科技有限公司】运营的,域名为【53ai.com】的网站及相关移动端页面。
会员服务:指本网站向注册会员提供的知识库文章查阅、内容检索及其他相关增值服务。
知识库内容:指本网站发布的包括但不限于文字、图表、数据、研究报告、行业分析等数字化内容资源。
二、 账号注册与登录
登录方式:本网站支持以下登录方式,您可根据实际情况选择:
微信公众号授权登录:您同意将您的微信OpenID信息授权给本网站,用于创建或关联会员账号。
手机验证码登录:您需提供真实有效的手机号码,并通过短信验证码完成身份验证与登录/注册。
账号安全:您的账号仅限您本人使用,禁止赠与、借用、租用、转让或售卖。因您保管不善导致的账号被盗、密码泄露等损失,由您自行承担。
实名认证:根据相关法律法规要求,我们可能要求您在特定功能下完成实名认证。如您拒绝提供,可能无法使用部分或全部服务。
未成年人保护:若您未满18周岁,请在法定监护人的陪同下阅读本协议,并在征得监护人同意后使用本服务。
三、 服务内容与规范
知识库查阅权限:会员登录后,有权按照其会员等级对应的权限范围,在线浏览、检索本网站知识库中的相关文章及内容。
服务变更:我们有权根据业务发展需要,调整、变更或终止部分服务内容,并将以网站公告、公众号消息等方式提前通知。
禁止行为:您在使用服务时不得实施以下行为:
利用技术手段批量爬取、下载、转存知识库内容;
将知识库内容用于商业目的或未经授权地向第三方传播;
干扰本网站正常运行或侵犯其他用户合法权益;
发布违法违规信息或从事违反公序良俗的活动。
四、 知识产权声明
权利归属:本网站知识库中的排版设计、软件代码等内容的知识产权均归【公司全称】或原权利人所有,受《中华人民共和国著作权法》等法律保护。
有限许可:本网站授予会员一项非独占、不可转让、不可转授权的普通许可,仅限于个人学习、研究之目的在线查阅知识库内容。
侵权追责:未经书面许可,任何单位或个人不得以任何形式复制、转载、摘编、镜像、汇编或以其他方式使用上述内容。一经发现,我们保留追究其法律责任的权利。
五、 个人信息保护
我们重视对您个人信息的保护。关于我们如何收集、使用、存储和保护您的个人信息,请单独阅读 《隐私政策》。
您通过微信公众号授权或手机号验证所提供的信息,我们将严格按照《个人信息保护法》的规定处理,仅用于身份识别、服务提供及安全验证等必要用途。
您可以随时通过网站设置或联系客服行使查阅、更正、删除个人信息及撤回授权同意的权利。
六、 免责声明
内容准确性:知识库内容仅供参考,不构成专业建议。我们不对其完整性、准确性、时效性作任何明示或暗示的保证,您应自行判断并承担使用风险。
不可抗力:因自然灾害、政策法规变化、网络故障、第三方平台接口异常(如微信接口维护、运营商短信通道故障)等不可抗力导致的服务中断或延迟,我们不承担违约责任。
第三方链接:本网站可能包含指向第三方网站的链接,该等网站的内容和服务不受我们控制,请您自行甄别风险。
七、 违约责任
如您违反本协议约定,我们有权视情节采取警告、限制功能、暂停服务、注销账号等措施,并保留要求赔偿损失的权利。
如因您的违约行为导致我们遭受行政处罚、第三方索赔或商誉损失,您应承担全部赔偿责任(包括但不限于罚款、赔偿金、律师费、公证费等)。
八、 法律适用与争议解决
本协议的订立、执行和解释均适用中华人民共和国大陆地区法律。
因本协议产生的或与本协议有关的任何争议,双方应友好协商解决;协商不成的,任何一方均可向【公司所在地】有管辖权的人民法院提起诉讼。
九、 其他
本协议构成双方就本服务达成的完整协议,取代此前任何口头或书面约定。
本协议任一条款被认定为无效或不可执行的,不影响其他条款的效力。
我们对本协议享有最终解释权,并在法律允许的范围内保留随时修改的权利。修改后的协议一经公布即生效,继续使用服务即视为同意修订内容。