使用MCP完美规划旅行线路!从零开始的图文教程
本帖使用了AI工具对帖子内容进行美化排版,已针对部分AI话术进行拟人化处理,让各位佬友们看起来不那么难受,自己手打的原帖排版实在是没法看。AI
引言
最近计划出去旅游,目的地是一个之前从未做过攻略的地方,一时兴起就决定去了。但行前毫无头绪:不知道要去哪里逛,不清楚旅行线路,不懂如何避坑,更不知道怎样才能省钱、追求高性价比。自己搜索攻略,不仅耗费时间,效率也低下,各路信息繁杂,整理起来令人眼花缭乱。
解决方案: 使用MCP工具整合多个平台信息!
直接上成果展示: 规划表示例
那么,这种内容
的整合是如何实现的呢?答案就是使用 MCP (Model Context Protocol),让 AI 将多个工具整合起来协同工作。
MCP (Model Context Protocol) 是什么?
MCP 是一种开源协议,旨在以标准化的方式向大型语言模型 (LLM) 提供上下文信息。
- 类比理解:
可以把 MCP 想象成 AI 领域的“U盘”。我们知道,U盘可以存储各种文件,插入电脑后就能直接使用。类似地,MCP Server 上可以“插”上各种提供上下文的“插件”,LLM 可以根据需要向 MCP Server 请求这些插件,从而获取更丰富的上下文信息,增强自身能力。
MCP 的核心优势
- 标准化: MCP 提供了统一的接口和数据格式,使得不同的 LLM 和上下文提供者可以无缝协作。
- 模块化: MCP 允许开发者将上下文信息分解为独立的模块(插件),方便管理和复用。
- 灵活性: LLM 可以根据自身需求动态选择所需的上下文插件,实现更智能、更个性化的交互。
- 可扩展性: MCP 的设计支持未来添加更多类型的上下文插件,为 LLM 的能力拓展提供了无限可能。
本次教程使用到的MCP工具
我主要是在 Windsurf 中用这些 MCP 工具,Cursor 和 CherryStudio 也同样支持。
用到的MCP工具有:
- 12306-mcp: 用于查询 12306 火车票及车站信息。
- xhs-mcp: 用于获取小红书笔记内容。
- amap-amap-sse: 用于通过高德地图规划行程。
- (variflight-mcp): 使用飞常准-Aviation查询航班信息(备选)。
从零开始:如何使用这些强大的工具?【详细教程】
第一步:获取必要的 MCP 服务授权与链接
1.1 获取高德地图 MCP 的使用授权(API免费)
获取高德地图 MCP 授权步骤
重要提示: 此处教程直接引用了来自 飞书作者 成峰 的教程。
-
打开高德开放平台官网: https://lbs.amap.com/
-
通过支付宝进行登录。
-
扫码登录。
-
勾选同意,然后点击授权。
-
注册成为高德地图的开发者。
- 输入手机号,进行验证码登录。
- 输入手机号,进行验证码登录。
-
身份验证。
-
选择个人支付宝扫码认证。
-
点击快速认证通道。
-
再次授权(第一次是登录授权,第二次是身份验证授权)。
-
-
填入邮箱进行验证。
- 输入可接收验证码的邮箱,获取并输入验证码。
- 输入可接收验证码的邮箱,获取并输入验证码。
-
注册成功,等待进入控制台。
-
创建应用。
-
点击“应用管理” → “我的应用” → “创建新应用”。
-
应用名称随便填,应用类型选择第一个“出行”,确认新建。
-
-
添加 Key。
-
点击“添加key”。
-
Key 名称随便填,服务平台选择“Web服务”,勾选同意,提交。
-
-
复制 Key。
- 提交后会看到生成的 Key,务必复制并妥善保存。
- 提交后会看到生成的 Key,务必复制并妥善保存。
1.2 获取 ModelScope 平台提供的 MCP 工具链接 (如12306, 非常准等)
获取 ModelScope 平台 MCP 工具专属链接步骤
我们直接访问 ModelScope MCP 平台。
在这个网站上,你会发现收集了许多 MCP 工具。我们教程中用到的工具有 12306火车票查询 (12306-mcp)、非常准机票查询 (variflight-mcp),还有高德地图提供的版本(但我们一般都是使用前一步骤中在高德开放平台申请的 Key和高德官方的url)。
-
在 ModelScope 官网注册账号并完成必要的验证(需要绑定手机号)。
-
登录后,找到所需的 MCP 工具: “12306-mcp” 和 “variflight-mcp”。
-
进入所需工具的页面后,右侧会展示该工具的 “SSE URL连接服务” 的配置信息。
重要提示: ModelScope 上 Hosted MCP 服务的 SSE URL是为您分配的专属连接地址,为敏感信息,请勿对外泄漏!
获取到这些专属的 “SSE URL连接服务” 的配置信息 后,你需要在 第二步 中介绍的 MCP 客户端配置文件(如 mcp_config.json
)中,将它们添加到对应的配置文件处。
第二步:通过 Cursor 使用 MCP
通过 Cursor 使用 MCP 步骤
重要提示: 此处教程直接引用了来自 飞书作者 成峰 的教程。
-
打开 Cursor,进入设置。
- 按图示顺序点击:1 (设置) → 2 (MCP) → 3 (Add new global MCP server)。
- 按图示顺序点击:1 (设置) → 2 (MCP) → 3 (Add new global MCP server)。
-
打开
mcp_config.json
文件。
-
粘贴以下代码到
mcp_config.json
文件中。- 原始教程中的示例 (仅高德):
{ "mcpServers": { "amap-amap-sse": { "url": "[https://mcp.amap.com/sse?key=这里这里](https://mcp.amap.com/sse?key=这里这里)!!!粘贴您在高德官网上申请的key" } } }
- 包含多个服务的推荐配置:
{ "mcpServers": { "amap-amap-sse": { "url": "[https://mcp.amap.com/sse?key=高德地图key输入在这里](https://mcp.amap.com/sse?key=高德地图key输入在这里)" }, "variflight-mcp": { "url": "[https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改](https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改)" }, "12306-mcp": { "url": "[https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改](https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改)" }, "xhs-mcp": { "command": "cmd", "args": [ "/c", "npx", "-y", "@smithery/cli@latest", "run", "根据自己的链接修改/xhs-mcp", "--key", "根据自己的链接修改", "--profile", "根据自己的链接修改" ] } } }
- 原始教程中的示例 (仅高德):
-
替换 Key。
- 将上一步中复制的高德地图 Key 粘贴到
"amap-amap-sse"
配置的serverUrl
中相应位置。
- 将上一步中复制的高德地图 Key 粘贴到
-
关闭并保存
mcp_config.json
文件。
-
检查 MCP 设置状态。
-
回到之前的 MCP 设置页面,查看对应服务是否显示为绿色(表示连接正常)。
-
如果未变绿:
- 点击右边的重启小按钮(在 “Enabled” 和铅笔图标中间)。
- 仔细检查 Key 和代码是否正确无误。
-
-
配置 Features。
- 在 MCP 设置中,点击 (2) Features。
- 找到 (3) “Enable auto-run mode”。
- 务必不要勾选 “MCP tools protection”。如果勾选,每次 AI 调用工具都需要手动同意。
第二步(可选):通过 Windsurf 使用 MCP
通过 Windsurf 使用 MCP 步骤
-
进入 Windsurf 后,点击右上角 人头像 按钮。
-
进入 Windsurf 的设置界面,新增 MCP 服务器。
-
新建自定义 MCP 服务器。
-
将以下 JSON 代码粘贴进图内的配置文件中,然后按下
Ctrl+S
保存。{ "mcpServers": { "amap-amap-sse": { "serverUrl": "[https://mcp.amap.com/sse?key=高德地图key输入在这里](https://mcp.amap.com/sse?key=高德地图key输入在这里)" }, "variflight-mcp": { "serverUrl": "[https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改](https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改)" }, "12306-mcp": { "serverUrl": "[https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改](https://mcp.api-inference.modelscope.cn/sse/根据自己的链接修改)" }, "xhs-mcp": { "command": "cmd", "args": [ "/c", "npx", "-y", "@smithery/cli@latest", "run", "根据自己的链接修改/xhs-mcp", "--key", "根据自己的链接修改", "--profile", "根据自己的链接修改" ] } } }
- 注意: 务必将
"高德地图key输入在这里"
替换为您真实的高德地图 Key,并根据实际情况修改其他服务的链接。
-
回到 Windsurf Settings 页面,点击 Refresh 按钮。正常情况下,除了
xhs-mcp
,另外三个工具应该都变为可用状态。
- 如果
xhs-mcp
工具报错,解决方法见后续步骤。
- 如果
第二步(可选):通过 CherryStudio 使用 MCP
通过 CherryStudio 使用 MCP 步骤
重要提示: 此处教程部分引用了来自 Cherry AI 官方文档 的教程。
准备工作:安装 uv、bun
Cherry Studio 目前只使用内置的 uv 和 bun,不会复用系统中已经安装的 uv 和 bun。
-
在
设置 - MCP 服务器
中,点击安装
按钮,即可自动下载并安装。
-
可执行程序安装目录:
- Windows:
C:\Users\用户名\.cherrystudio\bin
- macOS、Linux:
~/.cherrystudio/bin
- Windows:
-
无法正常安装的情况下:
- 可以将系统中的相对应命令使用软链接的方式链接到这里,如果没有对应目录,需要手动建立。
- 也可以手动下载可执行文件放到这个目录下面:
-
添加 MCP 工具:
-
在 CherryStudio 的 MCP 工具前置运行环境安装好后,点击“添加服务器”。
-
参考 Windsurf 的 MCP 配置文件,将内容添加进对应的地方。按照下图格式填写,其他未提到的 MCP 工具可以举一反三进行配置。
-
提示: 配置文件内容与 Windsurf 部分的 JSON 结构类似,请确保 Key 和相关链接填写正确。
-
第三步:配置 xhs-mcp 的运行环境
配置 xhs-mcp 运行环境步骤
此步骤部分引用了 GitHub 项目原作者的教程:jobsonlook/xhs-mcp
-
环境准备 (如果对以下环境安装不熟悉,可以直接问 GPT):
- Node.js
- Python 3.12
- uv (
pip install uv
)
-
安装依赖:
方法一:使用 Git (推荐)
如果你的电脑安装了 Git,请执行以下命令:git clone [email protected]:jobsonlook/xhs-mcp.git cd xhs-mcp uv sync
方法二:手动下载 ZIP 包 (如果没有安装 Git)
-
点击绿色的 “Code” 按钮,然后选择 “Download ZIP”。
-
下载完成后,将 ZIP 文件解压到你希望存放项目的文件夹。
-
通过命令行工具 (如 Windows 的 CMD 或 PowerShell,macOS/Linux 的 Terminal) 进入到解压后的
xhs-mcp-main
(或者类似名称) 文件夹内。例如,如果解压到了D:\projects\xhs-mcp-main
,则输入cd D:\projects\xhs-mcp-main
。 -
然后执行以下命令安装依赖:
uv sync
-
获取小红书的 Cookie:
- 打开 Web版小红书,登录后,通过浏览器开发者工具获取 Cookie。
- 打开 Web版小红书,登录后,通过浏览器开发者工具获取 Cookie。
-
配置 Cookie 信息:
-
自行完成注册登录,将获取到的小红书 Cookie 填入此处。
-
获取到你的专属配置文件后,按照这个格式修改您在 Cursor、Windsurf 或 CherryStudio 中的 MCP Server 配置文件
mcp_config.json
。 -
!!!注意括号的层级!!! 修改完成后记得保存 (
Ctrl+S
)。
-
最终的
xhs-mcp
配置大致如下 (请根据从 Smithery 获取的实际信息填写):// ... 其他 mcpServers 配置 ... "xhs-mcp": { "command": "cmd", // 或者 "bash", "zsh" 等,取决于你的系统和 smithery cli 的运行方式 "args": [ "/c", // Windows cmd.exe 参数,如果是 bash/zsh 等,可能不需要或不同 "npx", "-y", "@smithery/cli@latest", "run", "你的Smithery用户名/xhs-mcp", // 例如 "jobsonlook/xhs-mcp" 或你自己的 "--key", "从Smithery获取的Key", "--profile", "从Smithery获取的Profile或默认" ] } // ...
请务必将上述示例中的
"你的Smithery用户名/xhs-mcp"
,"从Smithery获取的Key"
,"从Smithery获取的Profile或默认"
替换为你在 Smithery 网站上生成的实际配置信息。
第四步:完成4个工具所需的运行环境
到了这一步,如果您使用的是 Windsurf 或 Cursor,请回到其“设置”处,点击 Refresh 或旋转箭头图标,重新加载最新的 MCP Server 配置文件。确认没有报错后,即可进行下一步。
第五步:开始使用 AI 调用工具搜集攻略
开始使用 AI 调用工具搜集攻略步骤
恭喜你,已经配置完成了所有工具的运行环境基础!接下来就可以开始让 AI 来搜集和整理我们所需的资料了。
示例 Prompt:
你好,我想请你帮我策划一份南京的旅游攻略。
我的具体需求如下:
预算范围: 人民币3000-4000元
行程时长: 5天左右
期望出行时间: 5月28日前后
出发城市: 上海市
同行人群: 我和我的父母(60岁左右,腿脚尚可,但不能长时间走路)
主要交通方式: 火车
必去景点/活动: 南京博物院
兴趣偏好: 历史文化(父母对明清史感兴趣)、江南园林、希望品尝地道的淮扬菜小吃
行程风格: 不要安排那么紧凑,希望能轻松游玩,每天景点不超过2-3个
住宿要求: 舒适,性价比高的住宿,最好是连锁酒店,交通便利,靠近地铁站,安静
餐饮偏好: 以当地特色菜和面点小吃为主,口味清淡,父母不吃辣
信息搜集与规划辅助:
请主要参考小红书上的资料,包括攻略内容和评论区。
如果引用了攻略内容,请尽量保留攻略内容的引用来源链接。
请(模拟或建议如何)使用高德地图规划景点之间的浏览路线顺序。
请帮忙查询或预估车票,机票和主要城市间交通的费用。
发送你的需求后,AI 就会开始工作了。
推荐模型: 这一步推荐使用 Sonnet-3.7或者 Sonnet-3.7-Thinking 模型,效果会更好。
常见问题
常见问题
-
Q:为什么我的 AI 回答一半就中断了?
- A: 具体原因未知,但如果发生中断,可以直接让 AI 重试上一步的操作。
- A: 具体原因未知,但如果发生中断,可以直接让 AI 重试上一步的操作。
-
Q:为什么有时候在获取 xhs 文章内容的时候,返回报错:“获取失败”?
- A: 工具在搜索文章关键词时,得到的文章链接通常是
https:www.xiaohongshu.com/explore/文章id?xsec_token=xxxxxxxxxx
这样的格式。有时候 AI 在调用get_note_content
时,可能会将链接末尾的token
参数移除,导致文章无法成功访问。 - 解决办法: 直接告诉 AI:“使用工具获取小红书 (xhs) 上的文章内容时, 请务必带上链接中的 token 信息。” 可以在每次提问时都提醒 AI,或者直接将此内容写入 AI 的行为规则 (Rule) 内。
- A: 工具在搜索文章关键词时,得到的文章链接通常是
-
Q:为什么有时候调用 xhs 工具时,一直在生成内容(一直不加载出内容)?
-
A: 本教程安装
xhs-mcp
工具使用到了 smithery.ai 的相关服务。当同一个项目调用的人过多时,我猜测可能会出现繁忙或超时的情况。 -
解决办法: 在 smithery.ai 上为自己创建一个新的 Server。
-
前往
xhs-mcp
作者的 GitHub 官网 https://github.com/jobsonlook/xhs-mcp, 将项目 Fork 到自己的 GitHub 仓库。 -
前往 smithery.ai,点击官网右上角的 Add Server。
-
按照官方引导,关联你的 GitHub 账户。然后选择你 Fork 的
xhs-mcp
项目,点击 Create。
-
保持默认填写即可。
-
然后到自己创建的 Server 处,生成新的专属配置文件信息,并更新到你的 MCP Client (Cursor, Windsurf, CherryStudio) 配置中。
- 【免责声明】 不确定这种操作是否会给原作者或 smithery.ai 带来负面影响,请自行判断风险。但通过这种方式,确实可能解决调用原作者项目时出现的超时现象。
-
-
美化你的旅行攻略!
这一步主要是将 AI 输出的文本结果,套用一个美观的 HTML 模板进行展示。
下面是一个用于生成旅行规划表HTML的提示词示例:
# 旅行规划表设计提示词
你是一位优秀的平面设计师和前端开发工程师,具有丰富的旅行信息可视化经验,曾为众多知名旅游平台设计过清晰实用的旅行规划表。现在需要为我创建一个A4纸张大小的旅行规划表,适合打印出来随身携带使用。请使用HTML、CSS和JavaScript代码实现以下要求:
## 基本要求
**尺寸与基础结构**
- 严格符合A4纸尺寸(210mm×297mm),比例为1:1.414
- 适合打印的设计,预留适当的打印边距(建议上下左右各10mm)
- 允许多页打印,内容现在可以自然流动到多页
- 信息分区清晰,使用网格布局确保整洁有序
- 打印友好的配色方案,避免过深的背景色和过小的字体
**技术实现**
- 使用打印友好的CSS设计
- 提供专用的打印按钮,优化打印样式,优化打印分页,防止它们在打印时被切割
- 使用高对比度的配色方案,确保打印后清晰可读
- 可选择性地添加虚线辅助剪裁线
- 使用Google Fonts或其他CDN加载适合的现代字体
- 引用Font Awesome提供图标支持
**专业设计技巧**
**图形元素与图表:**
1. **图标 (Font Awesome):**
* **来源:** 通过 CDN 引入 Font Awesome (v5/v6)。
* **风格:** 偏好简洁、现代的**线框风格 (outline-style)** 图标。
* **使用:** 放置于主标题附近,可选择性地(且需微妙地)用于迷你卡片内部(靠近标题处)、列表前缀等。**严格禁止使用 Emoji 作为功能性图标**。颜色应协调;关键图标可使用高亮色。
2. **数据可视化 (推荐 Chart.js):**
* **应用场景:** 用于展示趋势、增长率、构成(饼图/环形图)、比较(柱状图)等适合的数据 [引用:数据可视化最佳实践]。
* **技术:** 通过 CDN 嵌入 Chart.js。
* **位置:** 放置在讨论财务或业务分析的相关主卡片内部。
* **样式:** 确保图表清晰、易读且响应式。
**技术与动画:**
1. **技术栈:**
* HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2. **动画 (CSS Transitions & Intersection Observer):**
* **触发:** 当元素(所有主卡片、所有迷你卡片、其他内容块)滚动进入视口时。
* **效果:** 平滑、微妙的**淡入/向上滑动**效果(模仿 Apple 风格)。通过 JavaScript 的 `Intersection Observer API` 添加/移除 CSS 类来触发 `CSS Transitions` 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
3. **响应式设计:**
* **强制要求**。使用 Tailwind 的响应式修饰符(特别是针对网格布局),确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
- 使用图标和颜色编码区分不同类型的活动(景点、餐饮、交通等)
- 为景点和活动设计简洁的时间轴或表格布局
- 使用简明的图示代替冗长文字描述
- 为重要信息添加视觉强调(如框线、加粗、不同颜色等)
- 在设计中融入城市地标元素作为装饰,增强辨识度
## 设计风格
- **实用为主的旅行工具风格**:以清晰的信息呈现为首要目标
- **专业旅行指南风格**:参考Lonely Planet等专业旅游指南的排版和布局
- **信息图表风格**:将复杂行程转化为直观的图表和时间轴
- **简约现代设计**:干净的线条、充分的留白和清晰的层次结构
- **整洁的表格布局**:使用表格组织景点、活动和时间信息
- **地图元素整合**:在合适位置添加简化的路线或位置示意图
- **打印友好的灰度设计**:即使黑白打印也能保持良好的可读性和美观
## 内容区块
1. **行程标题区**:
- 目的地名称(主标题,醒目位置)
- 旅行日期和总天数
- 旅行者姓名/团队名称(可选)
- 天气信息摘要
2. **行程概览区**:
- 按日期分区的行程简表
- 每天主要活动/景点的概览
- 使用图标标识不同类型的活动
3. **详细时间表区**:
- 以表格或时间轴形式呈现详细行程
- 包含时间、地点、活动描述
- 每个景点的停留时间
- 标注门票价格和必要预订信息
4. **交通信息区**:
- 主要交通换乘点及方式
- 地铁/公交线路和站点信息
- 预计交通时间
- 使用箭头或连线表示行程路线
5. **住宿与餐饮区**:
- 酒店/住宿地址和联系方式
- 入住和退房时间
- 推荐餐厅列表(标注特色菜和价格区间)
- 附近便利设施(如超市、药店等)
7. **实用信息区**:
- 紧急联系电话
- 重要提示和注意事项
- 预算摘要
- 行李清单提醒
## 示例内容(基于上海一日游)
**目的地**:上海一日游
**日期**:2025年3月30日(星期日)
**天气**:阴,13°C/7°C,东风1-3级
**时间表**:
| 时间 | 活动 | 地点 | 详情 |
|-------------|----------------|--------------|-------------|
| 09:00-11:00 | 游览豫园 | 福佑路168号 | 门票:40元 |
| 11:00-12:30 | 城隍庙午餐 | 城隍庙商圈 | 推荐:南翔小笼包 |
| 13:30-15:00 | 参观东方明珠 | 世纪大道1号 | 门票:80元起 |
| 15:30-17:30 | 漫步陆家嘴 | 陆家嘴金融区 | 免费活动 |
| 18:30-21:00 | 迪士尼小镇或黄浦江夜游 | 详见备注 | 夜游票:120元 |
**交通路线**:
- 豫园→东方明珠:乘坐地铁14号线(豫园站→陆家嘴站),步行10分钟,约25分钟
- 东方明珠→迪士尼:地铁2号线→16号线→11号线,约50分钟
**实用提示**:
- 下载"上海地铁"APP查询路线
- 携带雨伞,天气多变
- 避开东方明珠12:00-14:00高峰期
- 提前充值交通卡或准备移动支付
- 城隍庙游客较多,注意保管随身物品
**重要电话**:
- 旅游咨询:021-12301
- 紧急求助:110(警察)/120(急救)
请创建一个既美观又实用的旅行规划表,适合打印在A4纸上随身携带,帮助用户清晰掌握行程安排。
还有另外一个xhs MCP工具:RedNote-MCP
题外话
Windsurf用了几天发现,里面的所有模型(包括Gemini2.5Pro)遇到长文本的时候,提问中断的情况太严重了吧。
经过实测,Cursor可能只中断一次的,Windsurf至少中断五六次。。。而且Cursor会在中断回答的地方自动重试然后继续回答,相反Windsurf则不会,得要你手动发送命令他再会重试,确实有点拉跨了 Windsurf