阿里开发者

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

Image

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

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

前提条件

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

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

步骤一:添加 MCP 服务

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

Image

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

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

  • 类型:选择 SSE。

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

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

Image

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。
*如需要制作别的城市攻略,可以直接将“北京”更改为相关地名。

Image

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

Image

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

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

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

Image

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

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

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

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

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


发现当前问题

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

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

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

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

了解工作原理

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

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

Image

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

Image

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 -LsSfhttps://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 功能说明。

点击阅读原文查看详情。