1. 私域旅游小助手为什么卡在“地图语音”这两步做私域旅游小助手页面最耗时的往往不是页面本身而是两件事一是把景点数据从地图服务里捞出来二是给每个景点配上能直接播放的语音讲解。传统做法要写后端接口、处理鉴权、拼接音频地址一套流程下来前端还没开始写人已经累了。Cursor 的 MCPModel Context Protocol机制正好能解决这个问题。它让编辑器里的 Agent 可以直接调用外部服务你只需要在配置文件里声明服务地址和密钥剩下的查询、生成、写文件都由 Agent 完成。高德地图 MCP 负责按城市拉取景点信息MiniMax 语音 MCP 负责把景点介绍转成可播放的音频链接两者串起来就是一个带语音导览的旅游小助手页面。这篇内容面向的是不想写 Python、但想快速跑通一个私域旅游页面的朋友。全程只需要改配置、填 Prompt、点 Run tool不需要自己写接口代码。下面按“前置准备 → 配置 → 验证 → 生成页面 → 排障”的顺序走一遍每一步都给出可复制的配置和实际会看到的结果。2. 前置准备TaoToken 与两个 MCP 服务的账号在 Cursor 里接 MCP 之前先把要用到的账号和密钥准备好。这里涉及三类凭证TaoToken 的 API Key、高德开放平台的 Web 服务 Key、MiniMax 的 groupId 和 API Key。TaoToken 的作用是给 Cursor 里的模型调用提供统一的接入入口。你可以先到官网注册然后在控制台创建一个 API Key。这个 Key 后面会用在 Cursor 的模型配置里和 MCP 配置是两套东西不要混在一起。官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 地址https://taotoken.net/api控制台创建 Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keys高德这边进入高德开放平台后创建应用添加 Key 时服务平台选“Web 服务”。这个 Key 会直接拼在 MCP 的 SSE 地址里所以创建后先复制保存。MiniMax 这边需要两样东西groupId 和 API Key。登录 MiniMax 平台后在账号管理里能看到 groupId在接口密钥页面创建一个新的密钥。这两个值后面会写进 MCP 配置的 env 字段。注意高德的 Key 是 Web 服务类型不是 Web 端 JS API 类型。选错了在 MCP 调用时会返回鉴权失败。3. 在 Cursor 中配置高德地图与 MiniMax 语音 MCPCursor 的 MCP 配置入口在设置里。打开 Cursor Settings找到 MCP 相关区域新建一个 MCP Server。配置内容是一个 JSON 结构把高德和 MiniMax 两个服务都写进 mcpServers 里。高德地图 MCP 用的是 SSE 方式地址里直接带 Key{ mcpServers: { amap-amap-sse: { url: https://mcp.amap.com/sse?key你的高德Web服务Key } } }MiniMax 语音 MCP 在 ModelScope 上提供了在线部署的 SSE 地址。你需要在 ModelScope 的 MCP 配置页填写 MINIMAX_API_HOST、MINIMAX_API_KEY、MINIMAX_API_RESOURCE_MODE 和本地存储路径部署完成后会得到一个 SSE URL。把它和 groupId 一起写进 Cursor 配置{ mcpServers: { MiniMax-MCP: { type: sse, url: https://mcp.api-inference.modelscope.net/你的部署url, env: { MINIMAX_GROUP_ID: 你的groupId } } } }实际使用时把两个服务合并到同一个 mcpServers 对象里即可。保存后回到 MCP 列表按钮变绿表示连接可用如果是红色先切换一下开关再刷新。这里有几个参数容易填错列个表对照一下参数填什么常见错误高德 keyWeb 服务类型 Key填成 JS API KeyMiniMax urlModelScope 部署后的 SSE 地址漏掉 https 前缀MINIMAX_GROUP_ID账号管理里的 groupId和 API Key 搞混MINIMAX_API_RESOURCE_MODEurl填成 local 导致音频无法在线播放MINIMAX_MCP_BASE_PATH本地目录如 D:\www\mcp\mcp路径不存在导致生成失败配置完成后Cursor 的 Agent 就能在对话里调用这两个 MCP 服务了。接下来先做一次最小验证确认服务真的通了。4. 验证请求先让 Agent 跑通一次地图查询和一次语音生成不要一上来就让它生成整个页面先分两步验证。第一步在 Agent 对话框里输入使用高德地图查询广州市内的主要旅游景点信息。Agent 会提示调用工具点击 Run tool。如果返回了景点列表说明高德 MCP 已经生效。第二步输入使用语音服务把“广州塔是广州的地标建筑”转成语音。点击 Run tool 后如果返回一个可访问的音频链接说明 MiniMax 语音 MCP 也通了。这两步都通过后再让 Agent 做完整的数据整理。可以给它这样的指令根据高德地图获取广州市内的主要旅游景点信息。 对这些景点分类并为每个景点生成一段生动、有条理的介绍。 把结果写入 guangzhou_tourist_attractions.md 文件。Agent 会先调用高德 MCP 拉取景点再按类别整理最后写出 Markdown 文件。如果景点数量偏少可以继续让它补充。生成完成后打开这个 md 文件检查一下结构确认每个景点都有名称和介绍段落。接着生成语音。指令可以写成为 guangzhou_tourist_attractions.md 中每个景点生成语音介绍 把音频链接放在对应景点标题的下方。Agent 会逐个调用 MiniMax 语音 MCP把介绍文本转成音频并把链接写回 md 文件。这个过程需要多次点击 Run tool属于正常现象因为每个景点都是一次独立的工具调用。5. 生成 HTML 页面用 Prompt 驱动 Agent 输出可播放的导览页数据准备好之后新建一个 prompt.md把页面设计要求写进去。核心是让 Agent 知道你要一个手机端 H5 页面包含景点列表、可展开的介绍、以及音频播放按钮。Prompt 里可以这样写# 页面提示词 ## 网页风格指南 设计一个高品质景区介绍手机 H5 网页将景区信息以生动优雅的方式呈现。 可选风格文化复古风格或现代简约风格。 ## 必要页面组件 1. 景区名称列表 2. 音频开始按钮点击播放播放中可暂停暂停后可继续 3. 景区介绍默认收缩点击景区名称展开 ## 技术规范 - Tailwind CSS - Font Awesome - Alpine.js - 使用 HTML5 audio 元素实现音频播放 - 切换新音频时直接打断正在播放的音频 ## 输出要求 - 提供一个完整的 HTML 文件 - 所有文字内容使用中文 - 确保移动端良好展示然后把 prompt.md 和 guangzhou_tourist_attractions.md 一起拖给 Agent让它生成 HTML。Agent 会把景点数据填进页面结构音频链接绑定到播放按钮上。生成后直接在浏览器打开 HTML 文件检查三件事景点列表是否完整、点击名称能否展开介绍、点击播放按钮能否听到语音。如果样式不理想可以继续让 Agent 调整比如“把卡片间距加大”“音频按钮换成圆形图标”。一个可用的播放逻辑大致是这样的playAudio(spot) { const audio this.$refs.audio; if (this.currentAudio spot.audio this.isPlaying) { audio.pause(); this.isPlaying false; } else { if (this.currentAudio ! spot.audio) { audio.src spot.audio; audio.currentTime 0; } audio.play(); this.currentAudio spot.audio; this.isPlaying true; } }这段逻辑保证了同一时间只有一个音频在播放切换景点时自动打断上一个符合导览页的使用习惯。6. 本篇常见错排查MCP 红了、音频不响、页面空白配置和生成过程中最容易遇到的是下面几类问题。MCP 按钮是红色。先检查 JSON 格式是否合法逗号、引号有没有写错。高德 Key 如果是 JS API 类型换成 Web 服务类型。MiniMax 的 SSE 地址如果失效重新在 ModelScope 部署一次。Agent 不调用工具。确认对话里明确提到了“使用高德地图”或“使用语音服务”并且点击了 Run tool。如果 Agent 只是用文字回答而没有触发工具说明 MCP 没有被识别回到设置里确认服务是绿色状态。音频链接打不开。检查 MINIMAX_API_RESOURCE_MODE 是否设为 url。如果设成了 local音频会存到本地路径页面里拿到的链接无法在线播放。另外确认 MINIMAX_MCP_BASE_PATH 指向的目录真实存在。页面打开后空白。多半是 HTML 里的数据没有正确注入或者 Alpine.js 的 x-data 初始化失败。打开浏览器控制台看报错常见的是音频链接里带了特殊字符没有转义。让 Agent 重新生成一次或者在 Prompt 里强调“音频链接需要做 URL 编码”。景点信息太少。高德 MCP 返回的数量和查询范围有关可以让 Agent 按区分批查询比如“分别查询越秀区、天河区、海珠区的景点”再合并去重。如果后续要长期在 Cursor 里做这类编码和 Agent 任务可以了解一下 Coding Plan它更适合高频的模型调用场景Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-plan模型对话https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodels接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdoc7. 把这条链路复用到其他城市和场景这套流程跑通之后换城市只需要改 Prompt 里的地名。比如把“广州市内”换成“成都市内”Agent 会重新调用高德 MCP 拉取数据再走一遍语音生成和页面生成。页面模板可以保留只替换数据文件。如果想让页面支持多城市切换可以在 Prompt 里要求 Agent 生成一个城市选择器把多个城市的景点数据合并到一个 JSON 结构里。音频部分同理MiniMax 语音 MCP 对文本长度有一定限制景点介绍太长时可以拆成两段分别生成再在页面里顺序播放。私域旅游小助手的核心价值在于“地图数据 语音讲解 可分享页面”这三件事被串成了一条自动化链路。Cursor 的 MCP 机制把原本需要后端开发的工作压缩成了配置和 Prompt适合快速验证想法。先把一个城市跑通再复制到其他目的地成本会低很多。