如何使用LLM+MCP创建超文本内容

介绍

使用trae等IDE的 AI 辅助编程工作模式已经有一个多月的时间了，不得不说AI发展速度远超我们想象，甚至改变了我们传统的开发模式，AI优化了开发体验，80%的代码可以由AI生成，接下来就由人工进行代码审查和完善，如此解放了编程工具人的时间，我们可以把更多的经历放在了解具体的业务和挖掘需求上面。

高德地图的MCP升级到了2.0 ，此次升级在于打通了网页到高德地图APP端的调用，我们可以直接在出行计划中载入动态地图，并嵌入与高德地图 APP 联动按钮，实现一键导航、打车等功能，这就让旅游、出行、约会等攻略地图变得非常实用。

在AI时代的加持下，内容创作者的产出已经从传统的纯文本、富文本过渡到可交互的超文本了，生成的内容不仅可以自带多媒体文件（图片、视频），还可以带上可交互模块（地图、画布），另外还可以调动其他app，形成可用场景的闭环。下面来分享一下如何低门槛低成本地创建一个地图相关的超文本内容。

这是本文演示地址： gyrate.github.io/gz-parks/

具体步骤

安装开发环境

完事开头难，安装1个代码编辑器可能是这个实践示例里头最难的了吧，任何一款主流的带AI辅助开发功能的IDE都可以。

安装MCP。可以通过npx指令或者在IDE配置里添加MCP，高德的安装AMAP_MCP 看这里

方法1: 指令安装

bash 复制代码

# NPX 指令
npx -y @mcp_hub_org/cli@latest install @amap/amap-maps-mcp-server --client trae-global --env '{"AMAP_MAPS_API_KEY":"YOU_KEY"}'

方法2：配置MCP

jsx 复制代码

// IDE里添加 MCP 配置
{
  "mcpServers": {
    "@amap/amap-maps-mcp-server": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@mcp_hub_org/cli@latest",
        "run",
        "@amap/amap-maps-mcp-server"
      ],
      "env": {
        "AMAP_MAPS_API_KEY": "YOU_KEY"
      }
    }
  }
}

以Trae为例，配置好了高德MCP之后在对话里记得把带MCP的智能体@上。

梳理需求

现在假设一个场景，我计划每周去广州周边的公园景区游玩，想让AI帮我生成一个公园指南，需要包括广州各区所有的典型公园，最好提供一张地图将它们全部展示，点击公园POI可以弹窗看介绍，且支持一键跳转到地图导航。

那么我的提示词可以这样写:

markdown 复制代码

借助高德地图API，帮我生成一张关于广州市各大景区公园的网页。
业务要求如下：
1. 头部左侧有logo，右侧有导航菜单
2. banner图区域为公园POI地图，展示整个首屏页面，
3. 总体介绍
介绍广州公园的特色、分类、年代等等内容
4. 公园分布
获取广州市每个区的公园数量，使用图表的方式展示分布情况
5. 公园列表
头部有筛选区域：所属区域、是否收费
下面是符合筛选条件的公园卡片，卡片内容包括公园照片、位置、开放时间、收费情况、简介
6. 最底部是网页的页脚，包括title、logo、隐私政策、使用条款、联系我们等链接
代码要求如下：
整个网页风格清新自然，颜色以白色、蓝色、绿色为主， 使用html技术栈编写

生成网页

接下来的事情就交给AI了，以下是我们对话的过程。

前面15分钟就已经把网页生成好了，后面的几十分钟其实是我在纠结让它使用公园的真实图片，它又受限于各种版权政策不肯给我图片之类的"人造障碍"。

markdown 复制代码

# 项目提示词

## 广州公园景区指南网页开发历程

### 项目初始需求
**用户**: 借助高德地图API，帮我生成一张关于广州市各大景区公园的网页。(略)

**助手摘要**: 创建了完整的广州公园指南网页，包含HTML、CSS、JavaScript文件，实现了所有要求的功能模块。

### Chart.js替换为ECharts
**用户**: 请把chats.js引用改为引用本地 `e:\AMAP\gz-parks\echarts.min.js` ，当前用的是6.0版本

**助手摘要**: 将HTML中的Chart.js CDN引用替换为本地ECharts文件，并重写了图表初始化代码以适配ECharts API。

### 图表数据和样式优化
**用户**: chart的数据不对，请用高德地图MCP重新获取广州各区的公园数量分布；另外，调整一下图表的高度至少300px，宽度100%

**助手摘要**: 由于MCP服务不可用，使用了基于调研的真实公园分布数据，并调整了图表容器样式为300px高度和100%宽度。

### 数据获取和重构
**用户**: 使用MCP获取广州各行政区域公园的数量，并作为createFallbackChart方法的原始数据。直接获取数据可能拿不到，你可以尝试查询每个行政区域的公园数量，然后再把数据汇总

**助手摘要**: 尝试使用MCP获取数据失败后，创建了更真实的广州各区公园分布数据，并同时更新了ECharts和备用图表的数据源。

### 代码重构优化
**用户**: 这块数据可以提取到外面，供initChart 和 createFallbackChart共用。

**助手摘要**: 将公园数量分布数据提取为全局常量GUANGZHOU_DISTRICT_PARK_COUNT，实现了代码复用和维护性提升。

### 数据文件独立化
**用户**: 帮我把 `/e:/AMAP/gz-parks/script.js#L2-2` 独立成一个json文件吧，另外再增加一些公园的数据，目前每个区域只有1个公园，太少了。

**助手摘要**: 创建了parks-data.json文件，将公园数据从33个扩充，每个区域包含3个不同类型的公园，并实现了异步数据加载机制。

### 图表显示问题修复
**用户**: 画布distributionChart 的宽高似乎丢失了导致图表出不来，帮我处理以下

**助手摘要**: 将HTML中的canvas元素改为div元素，因为ECharts需要div容器才能正常渲染。

### 图表标签优化
**用户**: 给chart的bar顶部增加数量label

**助手摘要**: 在ECharts配置中添加了label属性，在柱状图顶部显示"数字+个"格式的数量标签。

### Banner交互功能
**用户**: 该区域调整为可点击，点击后页面滚动到公园列表

**助手摘要**: 为banner区域添加了点击事件和scrollToParks函数，实现平滑滚动到公园列表的交互功能。

### 图片资源优化
**用户**: 该文件中image地址均提示无法访问 ERR_CONNECTION_RESET， 帮我更换为可以访问的地址，并提供默认图片以应对图片不存在的情况

**助手摘要**: 将所有placeholder图片地址替换为picsum.photos服务，创建了default-park.svg作为备用图片，并完善了图片加载失败的处理机制。

### 地图导航功能
**用户**: 帮我给首屏banner的POI弹窗 和 公园列表的卡片 添加 "地图导航"功能，点击后自动打开高德地图app创建导航页面

**助手摘要**: 为POI弹窗和公园卡片添加了导航按钮，实现了openNavigation函数，支持移动端调用高德地图app和桌面端网页版导航。

### GitHub发布指导
**用户**: 帮我把index.html在github上发布

**助手摘要**: 提供了详细的GitHub Pages发布指南，包括创建仓库、上传文件、启用GitHub Pages等步骤。

### 图片资源咨询
**用户**: 请帮我搜索高德地图上对应的公园图片并替换， 目前前三个数据图片是正确的

**助手摘要**: 说明了无法直接获取高德地图图片的技术限制，并提供了多种替代方案建议。

### 移动端样式优化
**用户**: 移动端访问页面，顶部导航区域菜单项文字有点异常，帮我调整一下让它更美观。其他区域不变

**助手摘要**: 优化了移动端导航菜单的CSS样式，调整了间距、字体大小和布局，提升了移动端的显示效果。

### 项目总结
这个广州公园景区指南项目从最初的需求分析到最终的移动端优化，经历了完整的开发流程：
- 基础功能实现（地图、图表、列表、导航）
- 技术栈优化（Chart.js → ECharts）
- 数据管理改进（JSON文件独立、异步加载）
- 用户体验提升（导航功能、图片优化、响应式设计）
- 部署和维护指导

项目最终实现了一个功能完整、用户体验良好的广州公园指南网站。

最终生成的页面交互效果

快速部署

以github为例，主要是github支持代码免费管理和静态页面部署。

将刚刚生成的html页面更名为index.html，工程上传到github
然后开启github的GitHub Pages 服务 ，这部分工作跟着AI提示一步步来就行了。
- 进入仓库页面，点击顶部 Settings
- 在左侧菜单中找到并点击 Pages
- 在 Source 部分：
- Branch ：选择文件所在的分支（通常是 main 或 master）
- Folder ：选择文件存放的目录（默认选 /root 即可，若文件在 docs 文件夹则选 /docs）
- 点击 Save，页面会自动刷新
如下图所示，按照步骤二配置好之后会出现一个页面供访问。

拓展应用

从以上应用实践过程来看，其实也算是一个小小的项目开发过程，用户提供了需求、大模型提供了开发能力、MCP服务提供了内容、github等平台提供了部署资源、Trae提供了集成环境。以此类推，我们也可以使用其他MCP生成各种定制化的超文本内容。

制作专属资讯播报页

假设我是个AI技术的重度关注者，想按自己的喜好从各源头汇总最新的AI资讯信息，那么也可以 HotNews MCP 之类的新闻资讯MCP，私人定制自己的资讯网页。

制作一日三餐推荐页

餐饮方面也有相应的AI服务，借助大厨MCP，也可以轻松生成菜单推荐。

以下是工作提示词

bash 复制代码

借助大厨MCP，帮我搭配今天一日三餐的菜单，并生成html页面。
1. 包括 每一餐 的菜式，食材，大概热量
2. 按照时令选择当季食材，今天是${date}
3. 生成一个html页面，要求风格清新美观，能够自适应移动端

生成的页面效果如下，要是过段时间美团买菜也出了MCP，那么生成一键下单功能，点击按钮直接跳转到美团APP自动选好菜品，用户只要支付即可，这种功能也不是没可能。

企业周报

如果企业知识库足够完善的话，让AI自动提供一份较为丰富的公司每周报告也是有可能做到的，用户只要设定好框架和提示词，调用AI企业助手MCP直接生成html就行了。

以下是工作提示词

bash 复制代码

帮我生成一个公司本周的周报html页面，数据来自HONGLING MCP
1. 内容框架如下，里面的具体信息你可以随意编造。
（1）页面头部固定有个导航菜单，点击可以直接滑动到几个主要栏目
（2）首屏内容以配色打底，加上标题 中科智城新鲜事，周报第几期，当期日期等等
（3）本周新闻： 本周发生的各种事件，包括标题、图片、概要和详情链接；
（4）城不奇：微信公众号推送文章，包括标题、图片和概要
（5）越分享越happy： 公司内容分享的技术文章，包括标题、概要、链接
（6）午休点播： 这是一个表单，可以填写多项，每项包括歌曲名称和演唱者
2. 页面风格要求简洁明快，配色以蓝色和黄色为主
3. 页面可以自适应移动端

最终生成效果

从上面几个例子可以看到很多时候AI创建超文本内容是不需要人为干预的，那么我们还可以结合工作流的特点，实现内容的定时自动生成和推送。比如每天到点了调用MCP自动抓取专属内容，生成html，自动部署，部署完成后发送消息提醒用户查看。

总结

在本文中，我们探讨了如何利用AI与各类MCP（Model Content Provider）服务创建超文本内容，这种内容不仅包含文字，还可以包含地图、图表等交互元素，形成可用场景的闭环。聪明的你想到什么合适的应用场景了吗。

如何使用LLM+MCP创建超文本内容

介绍

具体步骤

安装开发环境

梳理需求

生成网页

快速部署

拓展应用

制作专属资讯播报页

制作一日三餐推荐页

企业周报

总结

相关链接