Trae 重磅更新：AI编程+智能体+MCP，言出法随的新世界入门

1- Trae 重磅更新：AI 编程 + 智能体 +MCP，言出法随的新世界入门

Vibe Coding 和 MCP 都是最近特别流行的概念。

Vibe Coding，是氛围编程，是代码生成的言出法随，想要什么功能，就让 AI 写出代码。

MCP，是大模型上下文协议，是工具调用的言出法随，需要什么工具，就把叫它过来一起干活。

而如果把两者结合，会碰撞出怎样的火花？

先来看一段录屏，这是我花了十分钟写出来的一个探索大理的网页：

设计、开发、生成配图、添加动效，全部都是我用 AI 编程 +MCP 完成，一行代码都不用写，一行图片提示词都不用写。

这两天，Trae 的新版更新了一堆新功能，支持了 MCP、自定义智能体、网页浏览、自定义规则，相比第一版进步很大，而且智能体功能非常好用。

我就以 Trae 为例写了这份 AI 编程 +MCP 新手入门级教程，希望能带你进入这个言出法随的世界。

1.1- Trae 的下载和安装

Trae 是字节出品的 AI 编程工具，产品交互设计得非常好，用起来很简单，我们直接去官网下载，可点【阅读原文】直接跳转，或者复制粘贴这个链接到浏览器访问 https://sourl.cn/5p7ePD

下载好之后，安装软件并启动就能用了。

我们看到新版已经支持了智能体和 MCP，这两个功能都非常实用，我们在后面会详细讲解。

另外 Trae 的国内版最近一个特别棒的更新是支持了添加自己的模型了。编程方面最强的还是 Claude，我们这次也用它来实战。如果你用的是 Trae 的海外版，它已经自带了 Claude，开箱即用。

1.2- MCP 的初始配置

如果你在之前已经配置好了本地的 MCP 服务，可以跳过这一步，接着往下看。

如果没有配置过，还是要配置一下，不然你到软件里直接配置 MCP ，一运行就会提示你，根本就没有这个文件。

在配置方面，我参考了藏师傅的两篇 MCP 教程，在文末放有参考链接。

他写的已经很好了，但说真的，配置 MCP 确实细节太多，我实际配置的时候还是遇到了三个坑，感谢藏老师手把手地教，我才跨过去。

现在把这三个坑也分享给各位新手，希望大家都能顺利配置完成。

1.2.1- MCP 的两种模式

MCP 现在一共有两种模式，SEE 和 Stdio：

SEE 的配置方式非常简单，只有一个链接，基本上都是 Stdio 的方式，然而这种 MCP 很少。

Stdio 是主流的 MCP 方式，我们要用 MCP，肯定要搞定它。

搞定它安装 2 个命令行工具：

一个是 UVX，一个是 NPX。

1.2.2- UVX 的安装

uvx 我们需要安装 uv：

Windows 用户：可以按 “Win” 键，点击搜索后输入 “PowerShell”，然后右键选择 " 以管理员身份运行 "，粘贴下面的命令回车就行，运行完记得重启。

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

Mac 用户，点击 " 启动台 " 搜索 " 终端 " 应用，然后输入下面的代码回车就行。

curl -LsSf https://astral.sh/uv/install.sh | sh

这时候你大概率会遇到第一个坑：

这是因为这个网址访问不了。

请自行开启科技，并打开全局 + 增强模式，多试几次。

1.2.3- NPX 的安装

npx 的安装就比较简单了，只需要安装 Node.js 就行，访问官网（https://nodejs.org/）点击下载正常安装就行。

恭喜你，终于安装完了 MCP 的基础工具，在这里你已经超过了 99.99% 的人。

为你感到骄傲。

最难的部分已经过去了，接下来让我们打开 Trae，开始安装我们需要的 MCP。

1.2.4- 添加 Figma 的 MCP

Figma 是最流行的设计工具，Figma 的 MCP 可以把 Figma 文件导入到 AI 编程工具里，让 AI 根据设计稿做出还原度很高的代码。

我们首先在 Trae 右上角的【AI 功能管理】中，找到 MCP 并打开。

然后在 MCP 市场找到 Figma

Trae 为一些 MCP 做了人性化的适配，你会看到【轻松配置】的标志，这种配置非常简单，只需要填入自己的 Figma Token，点击确认就配置完成了。

那 Figma Token 去哪里找呢？

先到 Figma 首页，左上角你的名字，点击名字，找到 Settings 设置。

然后切换到 Security 安全设置里，找到 Generate new token

然后，在生成 token 的界面，输入名字，并把下面所有的权限都打开，然后保存，就获得了 token。

1.2.5- 添加 MiniMax 的 MCP

MiniMax 的 MCP 可以直接调用 MiniMax 的文本、音频、图片、视频模型来生成内容，用来做网页非常方便。

MiniMax 的 MCP 还没上到市场，需要点击这里的【手动配置】

然后把这段代码粘贴进去，替换相应的字段

{
  "mcpServers": {
    "MiniMax": {
      "command": "uvx",
      "args": [
        "minimax-mcp"
      ],
      "env": {
        "MINIMAX_API_KEY": "你的 API key",
        "MINIMAX_MCP_BASE_PATH": "/Users/替换用户名/Documents/minimax_mcp",
        "MINIMAX_API_HOST": "https://api.minimaxi.chat",
        "MINIMAX_API_RESOURCE_MODE": "local"
      }
    }
  }
}

需要配置的地方有两个

1.配置 API key，去 Minimax 的后台充值一点钱，得到 API key：

https://platform.minimaxi.com/user-center/basic-information/interface-key

2.配置生成内容的存储地址，如果是 mac，你就把用户名替换成你的电脑用户名，然后在文稿里新建个文件夹，命名为 minimax_mcp 就行。Windows 的话，自己复制下路径，替换这里的路径。

这里要注意的坑是，路径前面一定要加上斜杠/。

此外，注意 MiniMax 的 API Host 里，是 minimaxi 不是 minimax，多了一个字母 i ，这也是个小坑。

好了，到这里，踩了三个坑之后，我们的配置就全部完成了。

嗯，后面就非常轻松了。。。

如果你还想安装更多的 MCP，我的好朋友向阳乔木，贴心地把自己亲自测试过的 MCP 和环境配置，写了个飞书文档，可以在这里查看：
https://xiangyangqiaomu.feishu.cn/wiki/EsBtwDERNiCeEkkE0D9cLn34n0g

1.3- 接下来，项目实战开始

1.3.1- 探索大理的网页

接下来我们看看如何一步一步地做出文章开头演示的这个网页。

第一步，我们先创建一个智能体。

使用智能体的的好处是能固化提示词，能让所有的网页做出来都有高级且一致的风格。

还能在智能体里配置 MCP，强强组合。这里我们勾选 MiniMax 和 Figma 的 MCP。

智能体的 Prompt 是这样的，直接复制即可，也可以自由修改为你喜欢的风格：

审美极好的程序员，喜欢用一个网页页面进行可视化展示

网页生成要求是：

根据上面内容生成一个 HTML 动态网页

使用Bento Grid风格的视觉设计，纯黑色底配合亮橙色颜色作为高亮
强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
中英文混用，中文大字体粗体，英文小字作为点缀
简洁的勾线图形化作为数据可视化或者配图元素
运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
模仿 apple 官网的动效，向下滚动鼠标配合动效
数据可以引用在线的图表组件，样式需要跟主题一致 7. 使用 Framer Motion （通过CDN引入）
使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
避免使用emoji作为主要图标
不要省略内容要点

我们在 Trae 的输入框，可以选择或者@智能体。