TRAE，字节跳动旗下的AI编程系列产品，我这里使用的是VS Code下面的TRAE插件（TRAE Plugin）。这里使用插件版本主要是自己积累了很多VS Code的插件和专有配置，很难完全移植到TRAE IDE上，其实TRAE插件也蛮好用的，只要你能够准确提供上下文，国内的模型完成常见任务也能胜任。
这里介绍一个制作我的故乡武汉的旅游攻略的例子，我组合运用了2个MCP
- 高德地图MCP —— 获取景点信息
- Playwright MCP —— 验证生成的HTML
安装TRAE Plugin
安装TRAE Plugin没有任何的难度，搜索TRAE就轻松装上了，我一般喜欢把TRAE放到右边的辅助栏上
配置高德地图MCP
这里做一个通过高德地图MCP制作我的故乡武汉的旅游攻略的例子，首先我们需要在TRAE中配置高德地图MCP
如上图点击即可，TRAE提供以下2种添加方式
- 从市场添加
- 手动添加
我个人一般用手动添加，因为可以灵活配置各种参数，如图编辑json即可，其中AMAP_MAPS_API_KEY需要大家去高德官网申请
{
"mcpServers": {
"amap-maps": {
"command": "npx",
"args": [
"-y",
"@amap/amap-maps-mcp-server"
],
"env": {
"AMAP_MAPS_API_KEY": "**********"
}
}
}
}
开始vibe coding
新建一个项目，使用VS Code打开该项目的目录。在TRAE中输入@符号，选择Builder with MCP，我选用的是Doubao-Seed-1.6，这是我在多个项目中使用的国产大模型，个人认为相当能打。
输入提示词
请制作一个武汉市明日的旅游攻略
这里注意，我输入了“明日”，大模型会聪明的自动调用高德地图MCP的天气查询（maps_weather），确定明日的天气，以便更加科学的生成旅游攻略
查询天气之后，再调用maps_text_search + maps_search_detail进行景点信息的详细查询工作
经过一段时间的查询分析，得到了《武汉市明日（8月6日）旅游攻略》，作为本地人仔细看了看还是蛮靠谱的。
当然这个发给朋友可能有点low，我要它发挥一下前端编程的能力。输入以下提示词
将《武汉市明日（8月6日）旅游攻略》制作成图文并茂的HTML旅游攻略
看看上面的思考过程，提到了使用CDN引用静态资源，使用 SVG icons 等等细节，思考完成，有一个新文件需要我审查
审查完要我启动一个本地Web服务器进行预览（其实这个有点多余，直接打开HTML就OK了），我们也体会一下TRAE操作终端的能力
可以看到，安装完http-server，TRAE错误的使用启动命令，但是他从终端报错中立即找到了问题，换成了npx http-server
执行成功后就可以预览我们的成果了
但是没有做到图文并茂，再折腾他一下
景点能否使用真实的景点图片
遗憾的发现，他使用了百度上已经失效的图片，那么我们这时候不能放弃
并没有啊，你检查一下，图片都是不存在的，你要不调用一下MCP确认一下
这个时候，TRAE会先调用Playwright MCP工具来验证图片URL的有效性，以下是Playwright MCP的配置
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--executable-path",
"C:\Tools\chrome\chrome.exe"
]
}
}
}
确认了图片地址无效后，再次调用高德地图MCP获取指定景点的信息（包括图片），再通过Playwright MCP工具来验证图片URL的有效性，如此反复，我就不一一截图了，这样，通过Playwright MCP + 高德地图MCP的配合作业，最终生成了图文并茂的《武汉市明日（8月6日）旅游攻略》
总结
TRAE综合运用多种MCP的组合，即可以做出美观准确的旅游攻略，大大节省了我们日常查询资料，制作资料的时间，能够给我们带来很好的开发体验。
