通义灵码+高德 MCP：30分钟定制出游攻略网页

前提条件

• 已在 IDE 中安装通义灵码，并确认版本在 2.5 以上。

• 已获取高德申请的key。

视频演示

步骤一：添加 MCP 服务

1. 单击 IntelliJ IDEA 侧边栏的通义灵码图标进入智能会话。

   本文使用 IntelliJ IDEA 进行演示，其他 IDE 的灵码图标位置可能稍有不同，您可参见下载和安装进入智能会话。

2. 在智能会话页面，您可通过以下两种方式进入MCP 服务页面。

   • 方式一：单击欢迎语中的MCP 工具链接进入 MCP 服务页面。

   • 方式二：单击右上角头像，并在下拉菜单中选择个人设置，然后在个人设置页面单击MCP 服务下的条形框。

   

3. 单击MCP 服务右侧的+，并选择手动添加，然后在弹出的添加MCP服务页面，配置以下选项：

   • 名称：输入服务名称，例如：amap-sse。

   • 类型：选择 SSE。

   • 服务地址：https://mcp.amap.com/sse?key=<您在高德申请的key>。

     使用获取高德申请的key替换<您在高德申请的key>，注意不要有空格。

4. 单击立即添加，等到链接图标变成绿色则代表MCP服务添加成功。

   

步骤二：生成travel_tips.html文件

1. 打开通义灵码智能会话对话框，并切换为智能体模式。

2. 在对话框中输入以下提示词并回车。

   ##北京3天端午节（25年5月31日到25年6月2日）的旅行攻略。
   #帮我制作旅行攻略，考虑出行时间和路线，以及天气状况路线规划。
   #制作网页，页面包含天气卡片展示3天的天气详情以及旅行小贴士，展示每天的旅行计划，每天安排3个景点。
   #制作网页地图自定义绘制旅游路线和位置。
   ##网页使用简约美观页面风格，景区图片以卡片展示。
   #行程规划结果在高德地图app展示，并集成到h5页面中。
   ##同一天行程景区之间我想打车前往。
   #生成文件名 travel_tips.html。

   

3. 灵码将根据您的需求，自主规格并调用所需工具，最终生成travel_tips.html文件。

   

4. 最终生成的页面效果如下所示。

   • 如果生成的页面效果、布局、字体及颜色不符合你的预期，你可以多次跟通义灵码沟通和对话。

   • 如果无法查看预览效果，可以直接选择通义灵码 agent 模型让AI帮你生成预览效果。