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

简介: 本文介绍了如何使用通义灵码编程智能体与高德 MCP 2.0 制作北京端午3天旅行攻略页面。首先需下载通义灵码 AI IDE 并获取高德申请的 key,接着通过添加 MCP 服务生成 travel_tips.html 文件,最终在手机端查看已发布上线的攻略。此外还详细说明了利用通义灵码打造专属 MCP 服务的过程,包括开发计划、代码编写、部署及连接服务等步骤,并提供了自由探索的方向及相关资料链接。

1.gif


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


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


1.1 前提条件


  • 下载通义灵码 AI IDE:链接
  • 获取高德申请的 key【1】


1.2 步骤一:添加 MCP 服务


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



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



使用获取高德申请的 key【1】替换<你在高德申请的key>,注意不要有空格。



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


1.3 步骤二:生成 travel_tips.html 文件


重要


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


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

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


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


*如需要制作别的城市攻略,可以直接将“北京”更改为相关地名



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



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


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

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



完整代码👇🏻

链接


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


链接



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


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


2.1 发现当前问题


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


  • 我希望可以自定义页面风格,打造更具视觉冲击力与特色的酷炫界面;
  • 我希望基础功能页面的生成能够固定化,每次生成页面,无需输入完整提示词;
  • 我希望 MCP 服务支持更多扩展工具,以满足多样化的使用场景。


2.2 了解工作原理


为了解决上述问题,不妨回头看看智能体和 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工具,迭代生成内容,直到得出它满意的最终回答。


2.3 思考改进方法


你可能很快想到,如果 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 服务。


2.4 步骤一:借助通义灵码开发 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 可以放在本地工程内,在通义灵码中通过#上下文添加引入。文件内容可以在此处下载:

链接

链接


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


2.5 步骤二:部署 MCP 服务


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


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


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


1. 安装 UV 工具:


  • 对于 Linux 或 macOS 用户,执行 curl -LsSf https://astral.sh/uv/install.sh | sh
  • 对于 Windows 用户,建议通过 WSL【4】 运行 Linux 子系统,然后执行上述指令。


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


  • 如果报错提示未检测到 git 命令,需要先安装 git【5】
  • 如果你不希望安装 git,可以直接在代码仓库页面下载压缩包,解压后在 IDE 中打开。


3. 配置环境变量:


  • 将项目路径下 .env.sample 文件更名为 .env
  • 将其中 your_own_amap_key 替换为你在高德申请的 key【6】
  • 将其中 your_own_dashscope_api_key 替换为你的 API Key【7】


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


2.6 步骤三:连接 MCP 服务


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


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


2.7 步骤四:调用 MCP 服务


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


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


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


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


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


2.8 自由探索


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


  • 优化本例代码的架构、算法,完善异常捕获、日志记录等功能,使其具有更好的可维护性、执行效率、健壮性。
  • 当前生成的 HTML 内容以字符串形式返回结果,需要手动粘贴到 HTML 文件中。建议尝试调用其他 MCP 服务来将内容自动保存为 HTML 文件,如果当前没有可用的 MCP 服务,可以尝试自己编写一个。

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


相关资料


【1】获取高德申请的 key


【2】MCP 常见问题说明


【3】示例 MCP 服务代码


【4】WSL


【5】安装 git


【6】你在高德申请的 key


【7】你的 API Key

作者介绍
目录