“懒人”必备！字节Trae MCP+智能体自动生成有声网页，3步操作全搞定！

原文链接（点击可添加交流群）：https://mp.weixin.qq.com/s/7GoJAQ7rBAm8mAE6UGlO0A

前段时间字节跳动出品的AI编程软件Trae（The Real AI Engineer）更新支持了MCP、Agent、自定义规则等重磅功能。

Trae安装第三方MCP Server

相比其他AI编程软件来说，Trae安装MCP Server更加方便，有自带的MCP市场，支持轻松配置，也可以从其他第三方MCP市场找到合适的MCP Server进行手动配置：

下面给出一些整理MCP Server比较完善的第三方MCP市场：

https://www.modelscope.cn/mcp

https://sai.baidu.com/ai/mcp

https://mcp.so

以阿里推出的国内最大的模型开源平台ModelScope（魔搭）出品的MCP广场为例：

其收录了众多常用的MCP，并且支持按类别进行检索，还提供了实验场进行探索测试，有较完整的MCP教程和实践可以进行学习。

今天的案例需要使用语音合成服务，以语音合成使用较多的MiniMax MCP为例，点击https://www.modelscope.cn/mcp/servers/@MiniMax-AI/MiniMax-MCP进入详情页面：

有较详细的介绍和使用说明。

如果要安装MiniMax MCP，也可以参考MiniMax官方的开源说明文档https://github.com/MiniMax-AI/MiniMax-MCP/blob/main/README-CN.md。

要使用MiniMax MCP，需要安装Python包管理器uv，如果已经安装了Python，可以直接使用pip进行安装：

pip install uv

其他安装方式也可以参考uv安装主页https://github.com/astral-sh/uv?#installation。

MiniMax Server的配置示例如下（按需修改4项配置为你自己的信息）：

{
  "mcpServers": {
    "MiniMax": {
      "command": "uvx",
      "args": [
        "minimax-mcp"
      ],
      "env": {
        "MINIMAX_API_KEY": "你的API Key",
        "MINIMAX_MCP_BASE_PATH": "本地存储位置，例如D:\\Work\\Code\\AI Programming\\MCP Agent in Trae\\agent_output",
        "MINIMAX_API_HOST": "https://api.minimax.chat",
        "MINIMAX_API_RESOURCE_MODE": "可选，图片、音频、视频的存储模式，url（资源链接）/local（本地），默认值为url，这里可以设置local，保存音频到本地文件夹"
      }
    }
  }
}

⚠️注意：API Key需要与Host匹配，如果出现API Error: invalid api key错误，需要检查API Host是否正确：

• 国际版Host：https://api.minimaxi.chat（有额外的字母i）
• 国内版Host：https://api.minimax.chat（一般用国内即可）

然后在Trae中进行手动配置：

等待加载显示可使用即说明配置成功：

再比如安装Fetch，Anthropic官方提供的一个简便的网页抓取MCP Server（免费、无需配置其他信息）：

{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    }
  }
}

安装配置好所需的MCP后，就可以开始创建智能体来调用MCP完成特定的任务了。下面分享两个实现有声网页的案例。

案例1——信息收集有声网页

智能体的作用和好处在于可以选择指定的一组MCP Server组成一个工具集，在实际执行时，每个步骤根据需要调用指定的MCP工具来完成对应的子任务，同时不同的智能体之间相互隔离、互不干扰，需要完成某个任务时直接@对应的智能体，并动动嘴（用自然语言提需求），对应的智能体就可以根据提前预设好的步骤自动完成一些复杂的任务。

这里先实现根据关键词进行搜索、并将收集到的内容做成有声网页，创建信息收集有声网页小助手智能体，提示词如下：

1.先调用联网搜索，将收集到的资料整理写入一个md文档。
2.再将md文档用可爱童声生成音频。
3.最后，基于生成的音频和md文档生成一个美观的HTML页面，确保页面上音频可播放。

按照如下步骤进行配置：

创建好后，就可以在对话窗口@刚刚创建的智能体：

收到指令后，智能体按照提示词中定义好的步骤一一调用MCP执行相应的子任务：

等所有的子任务完成后，本地文件夹就得到了对应的md文档、mp3音频和html网页（一般3个文件的文件名会保持相同），在浏览器打开效果如下：

实现了根据关键词搜索网页内容并整理得到有声可视化网页的效果。

案例2——双语有声网页

基于案例1的启发，还可以进一步挖掘有声网页的场景，将其应用到英语学习领域，通过中英双语的方式来辅助英语阅读，同时配以英文音频，来实现边读边听边学的效果。其基本流程如下：

1. 1. 根据链接抓取原始网页的内容，生成中英双语对照文本，并提取出其中的重点单词。
2. 2. 调用MCP服务将英语文本合成音频。
3. 3. 基于文本和音频制作成可视化网页，实现边阅读边听英语。

创建双语有声网页生成器智能体，提示词如下：

1.调用工具抓取用户提供链接的主体内容，并将内容翻译成中英双语，提取不超过10个CET4以上的单词，解释并造句，写入一个md文件，文件名根据网页取，提升可读性。
2.根据抓取的文件名内容创建一个对应的文件夹，并移动md文件到这个文件夹中，同时后续生成的文件都放入同一个文件夹。
3.将md文档用美式英语童声生成音频文件，进行相应命名。
4.基于上面生成的音频和md文档，制作一个美观的交互式HTML网页。

按照如下步骤进行配置：

创建好后，就可以在AI对话窗口@刚刚创建的智能体进行对话完成任务，直接输入简单指令就可以完成上面体诗词中涉及的一系列任务，这里直接输入网页链接就可以，下面进行2个案例演示：

华为公司简介页面

智能体执行过程：

页面效果：

Qwen3发布介绍页面

智能体执行过程：

页面效果：

可以看到，虽然在智能体的提示词中并没有显式指定使用什么MCP完成相应的任务，但是大模型都根据实际任务需求很好地匹配到对应的MCP、并按序完成任务，最后得到了简洁美观的有声网页。

最后再谈一点最近使用Trae的感受，字节在AI编程上确实倾注了很多资源，从最开始发布MarsCode IDE插件，再到年初发布Trae Mac版，再到2月份发布Trae Windows版，同时先后发布海外版和国内版，功能上的更新和稳定性上的优化频率也很高，还有最近出的大版本更新（智能体系统、MCP工具链、更丰富的上下文、自定义规则），每一步都在向着更好的AI编程体验走出的重要一步。我也是在Trae Windows版刚推出来就第一时间体验、然后完全离不开了，逐渐熟悉了基于VSCode风格的编程模式，而完全抛弃了大而全的PyCharm的编程模式。

🛫AI时代让我们有了更多的可能，AI编程就是让这些可能走向现实的最便捷的工具之一，而Trae（The Real AI Engineer）势必会大大加快将创意转化为实际应用的进程。