TRAE和高德地图MCP生成旅游攻略

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需要大家去高德官网申请

perl 复制代码

 {
   "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，我要它发挥一下前端编程的能力。输入以下提示词

css 复制代码

 将《武汉市明日（8月6日）旅游攻略》制作成图文并茂的HTML旅游攻略

看看上面的思考过程，提到了使用CDN引用静态资源，使用 SVG icons 等等细节，思考完成，有一个新文件需要我审查

审查完要我启动一个本地Web服务器进行预览（其实这个有点多余，直接打开HTML就OK了），我们也体会一下TRAE操作终端的能力

可以看到，安装完http-server，TRAE错误的使用启动命令，但是他从终端报错中立即找到了问题，换成了npx http-server

执行成功后就可以预览我们的成果了

但是没有做到图文并茂，再折腾他一下

复制代码

 景点能否使用真实的景点图片

遗憾的发现，他使用了百度上已经失效的图片，那么我们这时候不能放弃

复制代码

 并没有啊，你检查一下，图片都是不存在的，你要不调用一下MCP确认一下

这个时候，TRAE会先调用Playwright MCP工具来验证图片URL的有效性，以下是Playwright MCP的配置

perl 复制代码

 {
   "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的组合，即可以做出美观准确的旅游攻略，大大节省了我们日常查询资料，制作资料的时间，能够给我们带来很好的开发体验。