巨头的新战场:AI 编程 IDE(暨 字节 Trae 调用 MCP 教程)

作者: 阮一峰

日期: 2025年4月22日

一、引言

本周,我要加写一篇文章。

因为 AI 编程 IDE 突然成了热门,国内外都有大事发生。

先说国外,OpenAI 要用30亿美元收购 Windsurf

这个消息太惊人。Windsurf(前身叫做 Codeium)的历史很短,发布至今两年多,市场份额也不高,居然值这么多钱!

OpenAI 最新一轮融资(今年3月)不过400亿美元,现在一下子要拿出30亿去收购,看中 Windsurf 哪一点呀!

OpenAI 自己没有编程助手,所以唯一的解释是,它要收购 IDE 打入 AI 编程市场,这个市场对它很重要。

二、MarsCode 更名 Trae

再看国内,字节也有大动作。

它旗下的编程助手,最早是 MarsCode 插件,后来又多了一个独立的 AI IDE 产品 Trae

本周,MarsCode 宣布改名为 Trae 插件,不再作为独立品牌发展了。

以后,字节的 AI 编程助手,将只有 Trae 这一个品牌,分成两种产品形态。

习惯传统 IDE 的用户,可以加装 Trae 插件;想要更好 AI 体验的用户,可以安装独立的 Trae IDE。

这个消息公布的同时,Trae 新版本也一起发布,加入了重磅的新功能(后面会详谈)。

可以看出,字节是下了决心,整合了产品,准备在 AI 编程工具上发力了。

三、AI IDE + MCP

为什么国内外的巨头,在同一个时间,不约而同都看上了 AI IDE?

我猜想,答案是 MCP 的出现。

有了 MCP 以后,AI IDE 可以扩展外部能力,从而无所不能,这让它成为巨头的必争之地。

下面,我来解释 MCP 是什么,怎么在 Trae 里面调用。大家看了,就会理解为什么 MCP 这么重要。

四、Trae 的简介

我选择 Trae 来演示,主要因为它是国产软件,有中文界面和文档,并且完全免费(国外产品都需要付费)。

前面说过,Trae 分成插件和 IDE 两种形态,它的 IDE 又分成国内版和海外版。这些产品的功能基本一致,就是内置的 AI 模型不一样。

国内版:内置 deepseek R1、V3、v3-0324 和 doubao 1.5 pro 模型

海外版:内置 Claude 3.5、3.7,Gemini 2.5 pro,GPT-4o、GPT-4.1 模型

我建议使用国内版,因为海外版的内置模型经常需要排队,很浪费时间,而且可能还会通信不畅。

不过,这两个版本都支持自定义模型,你可以提供密钥,接入你指定的模型。所以,版本的差别也不算很重要。

顺便提一下,Trae 这个词的意思是"The Real AI Engineer"(真正的 AI 工程师)。我以前总是以为 Trae 的意思是 True Ai。

五、Trae 的新版本

Trae 的 MCP 调用功能,是从新版本 v0.5.0 开始加入的。

没安装的朋友,可以去官网下载新版。已经安装的朋友,请检查一下版本。

它的界面这一次简化了,聊天框和 Builder(项目生成)合并成一个对话框(下图)。所有跟 AI 的对话,都在这里输入。

上图中,左下角多了两个按钮:"@智能体"和"#上下文"。这就是本次新增的核心功能。

至于 Trae 的基本用法,这里就不提了,可以看以前的文章

六、调用智能体

MCP 调用的入口,就是上图左下角的"@智能体"按钮。

如果想要扩展 AI 的功能,就要使用这个按钮。因为 AI 模型的本质只是语言模型,自身的功能是有限的,必须通过外部应用(智能体)来扩展功能。

点击"@智能体"(或者输入@),就会弹出一个对话框,显示目前可用的智能体(下图)。

可以看到,Trae 内置了两个智能体:"@Build" 和 "@Builder with MCP"。

其中,"@Build"用来让 AI 生成一个可运行的新项目。

@Build 俄罗斯方块网页小游戏

输入上面的命令,就会生成一个 HTML 文件,打开就是俄罗斯方块小游戏。

另一个内置的智能体"@Build with MCP",就是用来连接 MCP 服务器。

七、MCP 是什么

我先解释一下,MCP 是什么,很容易理解。

我们知道,AI 模型通过连接外部应用,来扩展功能。每个外部应用的接口,都不一样,如果要接入10个应用,就要写10种接入代码,非常麻烦。而且,要是换一个模型,可能所有接入代码都要重写。

有鉴于此,Anthropic 公司在2024年11月提出了 MCP 协议。外部应用只需要支持这个协议,提供一个 MCP 接口(又称 MCP 服务器),那么 AI 模型就可以用统一的格式接入,不需要了解外部应用的接入细节。

所以,MCP 可以理解成一个 AI 与外部应用之间的适配层。对于 AI 来说,只要安装某个应用的 MCP 服务器,就能接入该应用,不用写任何代码(除了少数的配置项)。

由于 MCP 解决了 AI 应用的接入痛点,诞生至今仅半年,已经变得极其流行,就连 Anthropic 的竞争对手 OpenAI 公司都公开支持,网上开源的 MCP 服务器项目已经有上万个。

八、调用 MCP

现在就来看 Trae 怎么调用 MCP。

点击 AI 标签栏右上角的齿轮图标,弹出一个菜单,选择菜单项 MCP。

它会跳出一个 MCP 的标签页(下图),点击底部的"+ 添加 MCP Servers"。

Trae 内置了 MCP 市场,提供一些常用的 MCP 服务器。如果里面没有你需要的,可以点击"手动配置",添加你自己的 MCP。

为了便于演示,我选择第一个服务器 Puppeteer,让 AI 可以调用无头浏览器。

鼠标点击 Puppeteer 的名字,会进入该开源项目的主页,可以查看一下它提供的内部命令(即能力)。

上图中可以看到,这个 MCP 服务器提供 puppeteernavigator(打开指定网址)、puppeteerscreenshot(截图)、puppeteer_select(选中页面元素)等内部命令,供 AI 模型调用。

用户不需要记住这些命令,只需了解它有哪些能力就可以了。

接着,点击它后面的加号,添加该 MCP 服务器。

这个 MCP 带有"轻松配置"标签,表示不需要任何设置,可以直接运行。

所有自己添加的 MCP,默认都放在内置的智能体"@Build with MCP",所以可以通过这个智能体来使用。

在 AI 对话框里面,选中智能体"@Build with MCP",然后输入下面的命令"打开 https://www.baidu.com",试试看新安装的 Puppeteer 服务器。

正常情况下,Trae 会让你选择一个项目文件夹,然后就会打开一个浏览器窗口,显示百度的首页。

这就是 MCP 的作用。AI 本来没有能力控制浏览器,但是现在就可以通过 MCP 来控制。

接着,可以给出一些更复杂的命令,比如生成截图,也能顺利完成。

这就是调用 MCP 的基本流程。你还可以把添加的 MCP 服务器保存成智能体(下图)。

然后,通过你起的名字,调用该智能体(下图),从而连接指定的 MCP 服务器。

九、上下文功能

除了 MCP 调用,Trae 的本次更新,还加强了上下文功能,这里也简单提一下。

所谓上下文,就是额外提供的信息,帮助 AI 模型思考,来完成任务。

通过#号,可以调出上下文菜单。

从上图可以看到,可以提供的上下文,包括额外的代码(code)、文件(file)、目录(folder)、工作区(workspace)。

本次更新多了两个选项,"Doc"表示额外的文档。

点击"添加文档集",就可以添加文档目录,作为 AI 模型的上下文。

另一个选项"Web",表示用网上信息作为上下文。这为 AI 提供了实时联网能力。

上图的实时天气问题,AI 只有具有联网能力,才能回答。

十、总结

有了 MCP 调用和联网能力,AI IDE 就具备了巨大的想象空间,不仅仅是编程工具,而成了一个无所不能的 AI 控制台。

那些大公司一定是看到了这一点,所以才愿意投入大量资源,去做这个产品。

我认为,在 AI IDE 里面调用 MCP 服务器,将成为近期软件业的热点,值得大家重点关注。

(完)

留言(24条)

以后多一个岗位mcp开发

我们普通人能做什么?包括最近coze智能体的开发生态,作为一名程序员能在这次技术革命中做些什么呢?

mcp和智能体,更多的作用,是能帮助自己,个性化定制自己需要的网络工具。提升工作效率。

trae体验还是很不错的

引用truming的发言:

我们普通人能做什么?包括最近coze智能体的开发生态,作为一名程序员能在这次技术革命中做些什么呢?

AI的出入,对于大部分用户来说,就是学习它,跟上潮流,辅助自己的办公、编程。
要想变现,要么就用它来开发产品,要么卖课,要么打着AI的旗帜去拉项目,去营销,吸引潜在的客户。

正在用Trae IDE,谢谢阮老师的分享。

我按照上述一模一样的添加了Puppeteer MCP,问了相同问题,却没有打开浏览器。回答是:“作为AI编程助手,我无法直接操作浏览器或外部网站。如果您需要实现网页自动化功能,可以考虑使用Puppeteer或Selenium等工具。需要具体功能实现建议吗?”

可是很多公司的代码是要保密的,不允许索引代码

引用赫仔的发言:

我按照上述一模一样的添加了Puppeteer MCP,问了相同问题,却没有打开浏览器。回答是:“作为AI编程助手,我无法直接操作浏览器或外部网站。如果您需要实现网页自动化功能,可以考虑使用Puppeteer或Selenium等工具。需要具体功能实现建议吗?”

是不是没有下载相关依赖与环境

https://docs.trae.com.cn/ide/model-context-protocol

官方文档中有写到,需要先安装环境

引用赫仔的发言:

我按照上述一模一样的添加了Puppeteer MCP,问了相同问题,却没有打开浏览器。回答是:“作为AI编程助手,我无法直接操作浏览器或外部网站。如果您需要实现网页自动化功能,可以考虑使用Puppeteer或Selenium等工具。需要具体功能实现建议吗?”

我今天测试能打开百度,但是不能截图保存。开始还以为权限不足,后来都给everyone,也没有保存成功。感觉这个Puppeteer出问题了,大家都试试

一直在用,国际版使用claude3.7编程,体验最佳

cursor白嫖结束,准备切换trae先用着了

其实并不是海外版需要排队,而是给用户限额了,每天高速通道的额度是定量的,用完了就要去和一帮人抢免费通道的额度。

大公司这么尽力打造IDE的目的是什么?

vs code 插件版1.2.4好像并没有看到可以自定义模型的地方。

引用Zavier的发言:

我今天测试能打开百度,但是不能截图保存。开始还以为权限不足,后来都给everyone,也没有保存成功。感觉这个Puppeteer出问题了,大家都试试

我也能跳网页,但是并不是通过 puppeteer 服务实现的, 是直接通过win 下终端 start命令跳转的

所以MCP就是一个供AI操纵其他程序的协议 可以用MCP让AI向人一样利用工具 比如使用计算器?

引用Amier的发言:

大公司这么尽力打造IDE的目的是什么?

cursor 估值100亿美元,OpenAI花30亿美元收购windsurf,你还问做工具干嘛?

引用赫仔的发言:

我按照上述一模一样的添加了Puppeteer MCP,问了相同问题,却没有打开浏览器。回答是:“作为AI编程助手,我无法直接操作浏览器或外部网站。如果您需要实现网页自动化功能,可以考虑使用Puppeteer或Selenium等工具。需要具体功能实现建议吗?”

优化提问:打开浏览器,进入百度主页,搜索:阮一峰的博客

哈哈哈哈

我来说几个观点:
大家如果真想了解MCP,就自己实现一个mcp host和 mcp server.
观察所有的stdio或是sse通信,会发现token爆增.
mcp只是定义了mcphost和mcpserverr的通信规范,并没有定义前两者与LLM的通信规范.
我认为核心是把原有的各种技术,包括docx读写,playright操作浏览器,firecrawl等等打通了.
在大模型的上下文理解能力加持下,把原来专业人员才能进行的调用,现在可由非专业自然语言来完成.
真正要用好puppeteer或各种mcp工具,上限还对于相关领域的认知.

引用赫仔的发言:

我按照上述一模一样的添加了Puppeteer MCP,问了相同问题,却没有打开浏览器。回答是:“作为AI编程助手,我无法直接操作浏览器或外部网站。如果您需要实现网页自动化功能,可以考虑使用Puppeteer或Selenium等工具。需要具体功能实现建议吗?”

一样的问题,谁来分享下

震惊了!之前一直听说MCP,但没了解。现在发现,这不就是当年的 DOS 操作系统吗?靠输入指令做事情。将来直接把这些指令再封装一层,图像化/简化,不就是新的计算机形态吗?这直接颠覆了未来计算机的使用方式了!

引用zuooo的发言:

以后多一个岗位mcp开发

Prompt工程师的风还没过,又来个mcp工程师,哈哈

引用Amier的发言:

大公司这么尽力打造IDE的目的是什么?

中年焦虑

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接