三句话搞定周末出行攻略！我用 AI 生成一日游可视化页面，还能秒上线！

作者：陈明勇

个人网站：https://chenmingyong.cn

文章持续更新，如果本文能让您有所收获，欢迎关注本号。

微信阅读可搜《程序员陈明勇》。

该文章已被 Model Context Protocol(MCP) 中文教程讲解收录，欢迎 star 收藏。

前言

随着 MCP 的快速普及和广泛应用，越来越多的工具和服务开始推出自身的 MCP Server。借助这些服务，用户在与 AI 对话时可以调用相应功能，从而赋予模型更强的执行能力和更丰富的交互体验。

本文将介绍如何结合 AI 与高德地图、EdgeOne Pages Deploy 提供的 MCP Server，通过三句话即可生成一份可视化的一日游行程页面，并部署到 EdgeOne 上以便在线访问。

准备好了吗？准备一杯你最喜欢的咖啡或茶，随着本文一探究竟吧。

在这里插入图片描述

效果展示

在线访问地址：https://mcp.edgeone.site/share/32wIUaOLr2fnUx3vnB2BU。

在这里插入图片描述

AI 生成一日游可视化页面

📐 设计构思

构建一个对话式 AI 一日游攻略网页生成的 “助手”，用户通过自然语言与 AI 聊天，即可获取所在城市或指定地点的轻量一日游推荐行程。“助手” 由 AI 聊天大模型、高德 MCP 和 EdgeOne Pages Deploy MCP 共同驱动，在无需用户编写代码或操作复杂工具的情况下，完成从旅游信息查询、行程规划、网页构建到公开部署的全流程体验。

通过与 AI 对话，用户可以逐步明确需求，例如 “我现在在深圳，安排一个轻松的一日游路线，推荐几个小吃店和景点—”。AI 根据语义理解调用高德 MCP 提供的位置、景点和美食信息，再综合设计成网页展示所需的 HTML 页面结构，最终调用 EdgeOne Pages Deploy MCP 进行部署，生成一个公开访问的网页链接，用户可直接使用或转发分享。

⚙️ 实现原理

在这里插入图片描述

Cursor AI 自然语言解析与上下文管理

用户通过 Cursor AI 使用自然语言输入需求，AI将自动解析用户位置、偏好（如"一日游"、“情侣”、"想吃当地小吃"等），并在对话中逐步明确用户意图。
高德地图 MCP 信息聚合
- AI 调用高德地图 MCP 获取用户当前位置附近的：
  - 人气景点（根据距离、热度筛选）
  - 餐饮店铺（如本地特色小吃）
  - 开放时间等信息
- AI 根据时间预算、路线合理性，编排一条 一日游动线
HTML 页面生成与部署
- AI 根据行程规划结果，生成标准化 HTML 页面，包含：
  - 行程时间表（上午/中午/下午/傍晚）
  - 景点与餐饮介绍（含高德数据字段）
  - 简洁风格的网页结构与样式
- 最后调用 EdgeOne Pages Deploy MCP，将 HTML 源码部署至 EdgeOne Pages，并返回公开 URL，供用户访问、存档或分享。

前置准备

Cursor 下载

Cursor 是一种全新的智能 IDE，通过与 AI 的无缝集成而提供支持。除了 Cursor，你也可以选择其他支持 MCP 功能的 IDE。

在这里插入图片描述

申请高德地图 API Key

本次实践中将使用高德地图的 MCP Server，配置包含 API Key，因此需要提前完成 API Key 的申请。具体步骤可参考：高德地图 API Key 申请。

在这里插入图片描述

在 Cursor 中配置 MCP Server

接下来，我将介绍如何在 Cursor 中配置高德地图MCP Server 和 EdgeOne Pages Deploy MCP Server。

配置高德地图 MCP Server

Amap Maps 是一个支持任何 MCP 协议客户端的服务器，用户可以轻松地通过 Amap Maps MCP 服务器来使用各种基于位置的服务。它是高德地图官方 MCP Server 。

首先，在 Cursor Settiongs-MCP 里，点击 Add new global MCP server 按钮跳转到 MCP Server 的 json 配置文件。

在这里插入图片描述

接下来，将下面的配置复制到 JSON 文件里。

{
  "mcpServers": {
    "amap-maps": {
    "command": "npx",
    "args": [
      "-y",
      "@amap/amap-maps-mcp-server"
    ],
    "env": {
      "AMAP_MAPS_API_KEY": "您在高德官网上申请的key"
    }
    }
  }
}

AMAP_MAPS_API_KEY 的值替换成我们刚才申请的 API Key。

在这里插入图片描述

通过以上步骤我们就完成了高德地图的 MCP Server 配置。

配置 EdgeOne Pages Deploy MCP Server

EdgeOne Pages 是基于 Tencent EdgeOne 基础设施打造的前端开发和部署平台，专为现代 Web 开发设计，帮助开发者快速构建、部署静态站点和无服务器应用。通过集成边缘函数能力，实现高效的内容交付和动态功能扩展，支持全球用户的快速访问。

EdgeOne Pages Deploy MCP 是一项专用服务，能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。这使您能够立即预览和分享 AI 生成的网页内容。

配置 EdgeOne Pages Deploy MCP Server 和刚才的步骤是一样的**，**以下是对应的 MCP Server 配置：

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"]
    }
  }
}

技术原理

Pages MCP Server 利用无服务器边缘计算能力和 KV 存储，通过 API 接收 HTML 内容，即可自动生成即时生效的公共访问链接，实现秒级静态页面部署并内置错误处理机制。

在这里插入图片描述

MCP Server 配置总览

最终的 mcp.json 内容为：

在这里插入图片描述

在 Cursor Settiongs-MCP 里可以看到我们所配置的 MCP Server 列表信息。

在这里插入图片描述

一日游可视化页面生成

首先，在 Chat 对话模块，选择 Agent 模块，将下面的 prompt 发给 AI：

我现在在深圳，请安排一个轻松的一日游路线，推荐几个小吃店和景点，你可以调用相关的 amap-maps 工具获取相关信息。

在这里插入图片描述

从上面的图片信息可以发现，Cursor AI 通过 maps_text_search 工具查询到相关的景点信息，然后规划路线，在规划的时候还会调用其他工具去计算区域之间的距离以及车程时长。下面是 AI 规划的完整路线：

深圳一日游完整路线
上午（9:00-12:00）
深圳湾公园（开放时间：06:00-23:00）
地址：滨海大道（近望海路）
活动：沿海边步行道漫步，欣赏海景，拍照留念
中午（12:00-14:00）
前