本文介绍了字节跳动旗下的AI编程产品TRAE，并重点演示了其在VS Code中的插件应用。通过组合使用高德地图MCP和Playwright MCP，作者成功制作了一份详尽的武汉市旅游攻略。该过程展示了TRAE如何通过调用外部API获取景点信息、查询天气，并利用Playwright验证图片链接的有效性。文章详细阐述了TRAE插件的安装、高德地图MCP的配置，以及如何通过自然语言提示词驱动AI完成从生成初稿到图文并茂的HTML攻略的转变。TRAE的强大之处在于其对多种MCP的灵活运用，极大地提升了开发效率和内容制作的质量。

✨ TRAE插件赋能VS Code，实现AI辅助编程：文章介绍了TRAE作为字节跳动旗下的AI编程产品，其VS Code插件能够集成到现有开发环境中，方便用户利用AI能力进行编程辅助，无需迁移至独立的IDE，尤其适合已有复杂配置的用户。

🗺️ 高德地图MCP助力信息获取与攻略生成：通过配置高德地图MCP，TRAE能够调用高德地图的API，实现如景点信息查询、天气预报等功能。在制作武汉旅游攻略的案例中，AI能够智能调用天气查询和景点详情接口，为用户提供科学、准确的行程建议。

📸 Playwright MCP实现内容验证与优化：Playwright MCP在内容制作过程中扮演了关键角色，主要用于验证生成的HTML内容，特别是图片链接的有效性。当AI生成的图片链接失效时，TRAE能通过Playwright MCP进行检测，并重新调用高德地图MCP获取有效的图片信息，确保最终攻略的图文并茂和信息准确性。

💡 AI驱动的“Vibe Coding”流程：文章展示了完整的AI驱动开发流程，从新建项目、选择大模型（如Doubao-Seed-1.6）、输入自然语言提示词，到AI自动调用MCP进行信息查询、内容生成，再到将内容转换为HTML，最后甚至能通过终端命令启动本地服务器预览。这一过程体现了TRAE的智能与自动化能力。

🚀 TRAE的价值在于MCP组合与效率提升：总结部分强调了TRAE通过综合运用多种MCP（如高德地图和Playwright）的组合能力，能够高效地生成美观且准确的旅游攻略等内容，极大地节省了用户在资料查询和内容制作方面的时间，提供了良好的开发体验。

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