10分钟定制端午出游攻略:通义灵码 + 高德 MCP 助你轻松搞定

还在愁端午攻略?通义灵码+高德MCP教你10分钟定制专属出游计划,行程、天气、路线一键生成,更有个性化定制等你来探索!

原文标题:端午出游高定:通义灵码+高德 MCP 10 分钟定制出游攻略

原文作者:阿里云开发者

冷月清谈:

本文介绍了如何利用阿里云的通义灵码和高德地图 MCP 2.0 服务,快速定制个性化的端午节北京旅游攻略。文章详细讲解了如何添加 MCP 服务,使用通义灵码生成包含天气信息、每日行程安排和地图路线的 H5 页面,并将攻略导入高德地图 APP。此外,还介绍了如何通过定制专属的 MCP 服务,根据个人需求打造更酷炫的页面效果和更个性化的功能,例如固定基础页面生成流程、扩展更多工具等。文章还提供了详细的开发步骤和示例代码,方便读者动手实践,打造专属的旅游攻略。

怜星夜思:

1、文章里说可以自定义MCP服务,打造更炫酷的页面。除了文章中提到的自定义页面风格和固定页面生成流程,大家觉得还可以通过定制MCP服务实现哪些更个性化的旅游攻略功能?
2、文章提到通义灵码可以调用多个MCP工具迭代生成内容,最终得出满意的答案。那么在使用过程中,如果智能体调用了错误的MCP工具或者传入了错误的参数,有什么好的方法可以及时发现并纠正?
3、文章最后鼓励大家在专属MCP服务基础上进行二次开发和深度定制。对于没有编程基础的旅游爱好者,如果想参与到这种定制化攻略的开发中,有什么比较容易上手的方法或者工具推荐吗?

原文内容

马上端午小长假,计划去北京旅游,如何使用通义灵码编程智能体+高德MCP 2.0 制作 3 天端午旅行攻略页面。同时将生成的旅行攻略导入高德地图APP生成专属旅行地图,以满足行中探店、导航、打车等出行需求。甚至自己利用通义灵码定制专属的MCP 服务,打造更多个性化出游计划。今天我们就一起来试下吧!

利用已有MCP服务定制出游攻略

前提条件

  • 下载通义灵码 AI IDE[1];

  • 获取高德申请的key[2]

步骤一:添加 MCP 服务

1. 单击通义灵码欢迎语中的 MCP 工具链接,或在右上角头像处进入个人设置,单击条形框,进入 MCP 服务页面。

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

  • 名称输入服务名称,例如:amap-sse。

  • 类型选择 SSE

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

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

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

步骤二:生成travel_tips.html文件

重要

在通义灵码智能体工作之前,请务必确保已经打开了任一工程文件,否则 MCP 调用会失败 ,更多通义灵码相关MCP使用问题,MCP常见问题说明[3]

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

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

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

3. 通义灵码智能体根据输入的需求进行代码文件自主生成,最终生成travel_tips.html文件。

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

  • 如果生成的页面效果、交互形式、字体及颜色不符合您的预期,您可以通过多轮对话,如prompt补充进去“每个地点到下一个地点需要生成打车链接命名为:从 XX 到 XX 打车“、“打车按钮的链接显示白色”、“打车点位坐标需要正确对上浏览景点”等,让通义灵码持续优化生成的代码;

  • 使用浏览器打开生成的travel_tips.html即可查看最终实现效果;

完整代码见文末参考链接[4]。

步骤三:手机端查看已发布上线的攻略

详情见文末参考链接[5]。

如需要部署上线,可参考以下环节中的“利用通义灵码打造自己专属的MCP服务”本地部署方式

利用通义灵码打造自己专属的MCP服务


发现当前问题

初步体验已告一段落。整体效果直观明了,但仍有一些个性化需求有待进一步完善:

  • 我希望可以自定义页面风格,打造更具视觉冲击力与特色的酷炫界面;

  • 我希望基础功能页面的生成能够固定化,每次生成页面,无需输入完整提示词;

  • 我希望MCP 服务支持更多扩展工具,以满足多样化的使用场景。

了解工作原理

为了解决上述问题,不妨回头看看智能体和MCP是如何协同工作的。

展开高德MCP服务详情,如您所见,它包含一系列工具簇,每个工具详细规定了输入参数和输出结果的内容和格式。以maps_weather为例,规定的输入是城市名称,输出是该城市的天气信息。

我们可以单独测试这个工具,输入以下提示词:查询北京的天气。工作过程如下:

1. 智能体首先查询MCP服务列表中可用的工具,根据提示词判断需要调用amap-sse/maps_weather这个工具。

2. 智能体根据提示词中的北京,以及工具规定的输入格式,判断调用工具时传入的参数应为{"city": "北京"}。您很容易联想到传统的API接口调用方式,然而不同的是,这次是由智能体决策输入参数的内容和格式,而不是由程序员。

3. MCP工具返回结果,它是一个包含天气信息的字典,如下所示。注意此处的输出格式是完全由MCP工具定义的,这点与传统的API接口调用方式一致。

city:"北京"
forecasts:
  - date:"2025-05-30"
    ...
    daytemp:"33"
    nighttemp:"22"
    daywind:"西南"
    nightwind:"西南",
    ...
  - date:"2025-05-31"
    ...

尽管实际数据交互采用JSON格式,但并不利于人类阅读理解,所以这里我们采取YAML格式来展示。

4. 智能体将会参考MCP工具的输出结果,完成我们在提示词中指定的任务。具体到本例,它将天气信息解析成自然语言,生成最终回答。

对于开篇提到的生成北京旅游攻略这类复杂任务,智能体可能会循环执行上述流程,调用多个MCP工具,迭代生成内容,直到得出它满意的最终回答。

思考改进方法

您可能很快想到,如果MCP服务能直接提供一个工具amap-sse/maps_travel_tips,输入{"city": "北京"},直接输出旅行攻略所需的全部数据字段,然后用一个固定且样式美观的HTML模板将结果渲染出来,那该有多好呀!如果有这样一个理想的MCP工具,其输出结果应该类似于:

city:"北京"
plans:
  - date:"2025-05-30"
    weather-tip-of-the-day:"白天气温较高,注意防止中暑"
    plan-of-the-day:
      - place:"天安门"
        starttime:"07:30"
        endtime:"08:30"
        reason:"感受首都的独特魅力"
      - place:"故宫博物院"
        starttime:"10:00"
        endtime:"14:00"
        reason:"与前一景点相距不远,此时天气转热,适合室内游览"
      - place:"八达岭长城"
        starttime:"15:00"
        endtime:"18:00"
        reason:"不到长城非好汉"
   - date:"2025-05-31"
     weather-tip-of-the-day:"..."
     plan-of-the-day:
       ...

高德MCP服务暂未提供这个最匹配我们业务目标的工具,但我们可以动手开发一个专属的MCP服务。

步骤一:借助通义灵码开发MCP服务

通义灵码智能体模式具备自主决策、环境感知、工具使用等能力,可以根据开发者的编码诉求,使用工程检索、文件编辑、终端等工具,可以端到端完成编码任务。明确了目标和思路之后,可以使用通义灵码智能体来帮您完成MCP服务的开发工作。

1. 让智能体帮助我们制定开发计划。选择智能体模式,选择模型为qwen3,依次输入以下提示词,并获得相应结果:

智能体使用的大模型知识库中可能不包含MCP的相关知识。因此使用过程中,建议连接提供互联网搜索工具的MCP服务。

  • Python开发一个MCP(Model Context Protocol) 服务,有哪些框架?从输出结果了解到:FastMCP专为 MCP 设计的轻量级 Python 框架,提供完整协议实现。

  • 如何用FastMCP开发一个MCP服务?列举大致步骤。从输出结果了解到大致步骤如下:1. 安装Python与依赖;2. 初始化 MCP 服务;3.定义工具/资源/提示;4. 配置传输协议;5.部署与测试。每个步骤都被拆解成可执行的行动,甚至包含了可执行的代码。


2.根据上述开发计划,安装好Python及依赖后,让智能体帮助您编写初始MCP工程。提示词为:编写一个FastMCP框架实现MCP Server的脚手架工程

3. 接下来就让智能体帮我们实现 MCP Server 的工具:

  • 提示词为:为MCP Server定义一个工具maps_travel_tips,输入应为代表城市名称的字符串,输出应为包含旅行攻略信息的字典,字典格式参考data_format/travel_tips.json。工具的执行过程是:1.调用MCP服务amap-sse/maps_weather根据输入的城市获取天气信息;2. 调用amap-sse/maps_text_search根据输入的城市和关键字'旅游景点'获取候选景点信息;3. 将上述步骤中获取的信息输入到阿里云百炼提供的大模型文本生成接口,模型选择'qwen3-32b',提示词请参考prompt/travel_tips_prompt.py

  • 说明:data_format/travel_tips.json和prompt/travel_tips_prompt.py可以放在本地工程内,在通义灵码中通过。文件内容可以在文末参考链接[6][7]下载。

4. 如果对生成的代码有进一步的想法,或者初次生成的代码未达预期,您可以继续追加需求或提出优化建议,通义灵码会持续为您完善代码内容。另外,在开发过程中如遇到异常问题,通义灵码也可以协助您进行代码问题修复、调试或运行错误的排查等

步骤二:部署MCP服务

开发完成后,您需要实际地部署MCP服务,来验证是否实现了预期效果。

为了便于演示,我们为您提供示例MCP服务代码[8],它完整实现了一个生成旅游攻略的MCP服务,并且能够方便地扩展新功能。

您可以在本地运行它,并快速验证效果:

1. 安装UV工具:

a. 对于Linux或macOS用户,执行curl -LsSf https://astral.sh/uv/install.sh | sh

b. 对于Windows用户,建议通过WSL[9]运行Linux子系统,然后执行上述指令。

2. 下载示例代码:执行git clone https://atomgit.com/lanxi1/amap_tour_guide_mcp_server.git && cd amap_tour_guide_mcp_server/

a. 如果报错提示未检测到git命令,需要先安装git[10]

b. 如果您不希望安装git,可以直接在代码仓库页面下载压缩包,解压后在IDE中打开。

3. 配置环境变量:

a. 将项目路径下.env.sample文件更名为.env

b. 将其中your_own_amap_key替换为您在高德申请的key[2]

c. 将其中your_own_dashscope_api_key替换为您的API Key[11]

4. 运行MCP服务:执行uv run python mcp_server.py。保持server运行,不要关闭终端窗口。

步骤三:连接MCP服务

为通义灵码手动添加MCP服务,类型选择SSE,服务地址设置为http://127.0.0.1:8000/mcp。确认后,观察MCP客户端显示连接成功状态,且能够发现MCP服务提供的工具。

后续过程中,如果出现MCP服务器断连的现象,请返回本页面,在MCP服务列表中点击对应服务的刷新按钮,确保服务恢复为连接状态。

步骤四:调用MCP服务

返回会话窗口,选择智能体模式,选择模型为qwen3,在对话框中输入以下提示词并回车:生成北京旅游攻略的html页面

1. 观察大模型是否调用正确的工具并传入正确的参数,如果确认无误,则点击确认执行。

2. 如果没有自动生成页面,则需要展开已执行MCP工具,点击执行结果中的复制按钮。手动创建名为travel_tips.html的文件,将内容粘贴到文件中并保存。

3. 生成的页面可以在浏览器中打开,查看效果。

您部署的MCP服务依赖于远程调用高德平台提供的API、百炼平台提供的大模型文本生成服务,由于网络波动或大模型生成内容的随机性,可能导致MCP工具调用失败。通常等待一段时间后重新执行上述步骤,或稍微调整下提示词,即可执行成功。

自由探索

您可以在上述专属MCP服务基础上二次开发、深度定制,在此过程中也请积极尝试借助通义灵码的编程智能体来提升编码效率。以下提供一些探索方向,期待您的参与:

  • 优化本例代码的架构、算法,完善异常捕获、日志记录等功能,使其具有更好的可维护性、执行效率、健壮性。

  • 当前生成的HTML内容以字符串形式返回结果,需要手动粘贴到HTML文件中。建议尝试调用其他MCP服务来将内容自动保存为HTML文件,如果当前没有可用的MCP服务,可以尝试自己编写一个。

  • 当前生成的推荐景点是通过调用高德MCP的搜索工具来实现的,无法实现创造性内容的生成。建议尝试调用其他MCP服务来实时捕捉社交平台上的旅游热点和推荐内容,并将其整合到定制攻略时的决策链路中,如果当前没有可用的MCP服务,可以尝试自己编写一个。

相关资料:

通义灵码安装下载:https://lingma.aliyun.com/download

通义灵码相关MCP使用问题:https://help.aliyun.com/zh/lingma/support/faq-mcp

获取高德申请的key:https://lbs.amap.com/api/mcp-server/create-project-and-key

参考链接:

[1]https://lingma.aliyun.com/download

[2]https://lbs.amap.com/api/mcp-server/create-project-and-key

[3]https://help.aliyun.com/document_detail/2922563.html

[4]https://tongyi-code.oss-cn-hangzhou.aliyuncs.com/activity/travel_tips-2-20250530.html

[5]https://lbs.amap.com/fn/iframe?path=mcp-server/example/customization

[6]https://tongyi-code.oss-cn-hangzhou.aliyuncs.com/activity/travel_tips-20250530.json

[7]https://tongyi-code.oss-cn-hangzhou.aliyuncs.com/activity/travel_tips_prompt-20250530.py

[8]https://atomgit.com/lanxi1/amap_tour_guide_mcp_server

[9]https://learn.microsoft.com/en-us/windows/wsl/install

[10]https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

[11]https://bailian.console.aliyun.com/?tab=doc#/doc/?type=model&url=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F2840915.html&renderType=iframe

Lingma IDE操作指南


通义灵码 AI IDE正式发布,深度适配 Qwen3 ,上线编程智能体,提供 MCP、行间建议预测、行间会话、工程感知、记忆感知等提效功能。本文为 Lingma IDE 功能说明。


点击阅读原文查看详情。

可以先从学习一些基础的 HTML、CSS 和 JavaScript 知识入手,了解网页的基本结构和样式,然后尝试修改文章中提供的示例代码,例如调整页面布局、修改字体颜色等。此外,还可以参考一些在线教程和开源项目,学习如何使用 API 接口获取数据、如何使用 JavaScript 处理数据等。

推荐使用一些低代码甚至零代码的开发平台,例如 Power Apps、钉钉宜搭等。这些平台提供了可视化的界面和丰富的组件,用户可以通过拖拽和配置的方式快速搭建应用,无需编写大量的代码。此外,还可以利用一些 AI 辅助编程工具,例如 GitHub Copilot、Codeium 等,提高编码效率。

可以增加一个“预览”或“确认”环节,在智能体生成最终结果之前,将调用的 MCP 工具和传入的参数以可视化的方式展示给用户,让用户确认是否正确。如果发现错误,可以及时修改提示词或重新选择 MCP 工具。

谢邀,整点花活儿!比如,可以弄个“旅行人格测试”,根据用户选择的景点类型、交通方式、住宿偏好等,生成一个专属的“旅行人格”标签,再推荐符合这种“人格”的隐藏玩法,增加趣味性。还可以接入当地的文创产品和手工艺品电商,让用户在攻略中直接购买纪念品,支持当地经济发展,岂不美哉?

记录智能体的调用日志,包括调用的 MCP 工具、传入的参数、返回的结果等。通过分析日志,可以快速定位错误的调用,并找出问题的根源。此外,还可以设置一些监控指标,例如调用失败率、平均响应时间等,及时发现异常情况。

可以加入社交分享功能,用户可以在攻略中添加自己的旅行照片和心得,分享给朋友或者发布到社交平台,形成一个互动性更强的旅游社区。还可以考虑加入智能语音助手功能,用户可以通过语音指令查询景点信息、导航路线等,解放双手,让旅游更轻松便捷。

从开发角度来说,可以给每个MCP工具加个“自检”功能,收到参数后先校验参数的合法性和范围,不符合要求的直接报错返回,避免后续流程出错。同时,智能体在调用工具的时候,也可以先判断工具的适用场景,不符合要求的就换一个。说白了,就是double check,避免“智能”犯傻。

实在不行,众筹!找几个懂技术的小伙伴,你提供idea和旅游需求,他们负责实现,然后一起分享成果。或者,直接在论坛里发帖求助,说不定有热心大神愿意帮忙。记住,知识是共享的,创意是无限的,别怕麻烦,大胆尝试!实在不行,让通义灵码手把手教你,问到它崩溃为止!

我觉得可以加入AR实景导览功能,通过手机摄像头直接在现实场景中叠加景点信息和导航指引,让旅游更有科技感和趣味性。还可以接入当地特色美食推荐,根据用户的口味偏好和实时位置推荐附近的美食,并提供在线预订和评价功能。