1.前言
MCP Server(模型上下文协议服务器)是一种基于模型上下文协议(Model Context Protocol,简称MCP)构建的轻量级服务程序,旨在实现大型语言模型(LLM)与外部资源之间的高效、安全连接。MCP协议由Anthropic公司于2024年11月开源,其核心目标是解决AI应用中数据分散、接口不统一等问题,为开发者提供标准化的接口,使AI模型能够灵活访问本地资源和远程服务,从而提升AI助手的响应质量和工作效率。
我们平时工作和生活中大家一定离不开交通工具,目前中国最大的铁路客运12306是我们用的最多的交通工具APP软件。之前也有小伙伴提到能不能用dfiy来实现一个火车票查询功能呢?今天就带大家使用dify来实现火车票信息查询功能。我们看一下实现的效果
12306-mcp chatflow
我们还可以借助高德地图实现一个火车站硅基地图,效果如下:
话不多说下面给大家介绍一下这个工作流如何搭建的。
2.工具使用和安装
考虑dfiy使用容器部署所以使用到MCP 需要使用SSE的方式。那么本次我们使用一个开源项目项目mcphub的项目
项目的地址
https://github.com/samanhappy/mcphub
这个项目是一个统一的枢纽服务器,将多个MCP服务器聚合为不同场景的独立可流式HTTP(SSE)端点。说明白了就是可以把很多MCP-server做成一个市场。 之前也给大家介绍过 魔搭社区的MCP广场和1Panel的开源项目。
感兴趣的小伙伴可以看我之前的文章:
dify案例分享-魔搭+Dify王炸组合!10分钟搭建你的专属 生活小助理
dify案例分享-私有化 MCP 广场搭建与网页小游戏智能体工作流实战
本次我们使用mcphub 这个开源项目。
mcphub安装和使用
1.Docker 部署
配置mcp配置文件
创建自定义mcp_settings.json
{ "mcpServers": { "amap": { "command": "npx", "args": ["-y", "@amap/amap-maps-mcp-server"], "env": { "AMAP_MAPS_API_KEY": "your-api-key" } }, "playwright": { "command": "npx", "args": ["@playwright/mcp@latest", "--headless"] }, "fetch": { "command": "uvx", "args": ["mcp-server-fetch"] }, "slack": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-slack"], "env": { "SLACK_BOT_TOKEN": "your-bot-token", "SLACK_TEAM_ID": "your-team-id" } }, "12306-mcp": { "command": "npx", "args": [ "-y", "12306-mcp" ] } }, "users": [ { "username": "admin", "password": "$2b$10$Vt7krIvjNgyN67LXqly0uOcTpN0LI55cYRbcKC71pUDAP0nJ7RPa.", "isAdmin": true } ]}
提示:默认用户名/密码为 admin
/ admin123
。密码已通过 bcrypt 安全哈希。生成新密码哈希:
npx bcryptjs your-password
我们可以在服务端执行一下密码生成新的新密码哈
部署
在服务器上执行下面的命令
docker run -p 8900:3000 -v $(pwd)/mcp_settings.json:/app/mcp_settings.json samanhappy/mcphub
2.访问控制
我们输入如下地址打开 http://localhost:8900
,使用您的账号登录。
输入账号和密码,进入管理端界面
上面的我们已经提前安装了amap、playwright、fetch、slack、textin-ocr 大家可以根据自己的需要安装更多MCP-server
mcphub功能介绍
我们可以通过 服务市场查找我们需要安装的MCP-server,目前这个插件市场有非常多的MCP
在线安装
可以通过studio 、sse、 Streamable HTTP 三种方式安装,这里就不做详细展开
3.mcp-client使用
上面mcphub配置好后,我们就可以把上面几个MCP-server聚合在一起从而方便mcp-client 使用了
Cherry Studio
我们打开Cherry Studio,在MCP 服务器配置,添加mcphubsse配置,我们按照下图步骤添加
其中bba57da5-5073-4fce-9b99-13f985d15f64 是我们在mcphub添加group ID
上面配置好mcphub 我们就可以在Cherry Studio 使用这一组MCP- Server了
我们使用fetch 抓取新闻信息,说明这个mcphub 工具是可以使用的。
dify
由于dify是使用容器部署的,所以我们这里需要使用dify mcp-sse插件来实现。
通过以上方式我们就完成了一个mcphub 部署和使用了。
4.添加12306-mcp
我们把12306-mcp配置文件
{ "mcpServers": { "12306-mcp": { "command": "npx", "args": [ "-y", "12306-mcp" ] } }}
添加到mcp_settings.json配置文件中
{ "mcpServers": { "amap": { "command": "npx", "args": ["-y", "@amap/amap-maps-mcp-server"], "env": { "AMAP_MAPS_API_KEY": "your-api-key" } }, "playwright": { "command": "npx", "args": ["@playwright/mcp@latest", "--headless"] }, "fetch": { "command": "uvx", "args": ["mcp-server-fetch"] }, "slack": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-slack"], "env": { "SLACK_BOT_TOKEN": "your-bot-token", "SLACK_TEAM_ID": "your-team-id" } }, "12306-mcp": { "command": "npx", "args": [ "-y", "12306-mcp" ] } }, "users": [ { "username": "admin", "password": "$2b$10$Vt7krIvjNgyN67LXqly0uOcTpN0LI55cYRbcKC71pUDAP0nJ7RPa.", "isAdmin": true } ]}
部署到服务器重启完成12306-mcp添加
看到12306-mcp 在线,说明12306-mcp安装配置完成。
接下来我们需要把这个12306-mcp添加到分组管理中使其中生效
上述我们使用mcphub 方式安装和部署了12306-mcp,接下来我们在dify工作流中配置。
3.工作流的制作
这个工作流相对比较简单它主要的功能点就在使用ai agent的功能。 我们这里重点介绍一下ai agent的配置这块。
这里用到了MCP-SSE 和AIAgent
关于MCP-SSE安装可以看我之前的文章《dify独家揭秘:mcp_sse+Zapier_MCP如何打造轻量级MCPserver达成万物互联》
关于agent策略工具 可以看我之前文章《dify案例分享-0 代码搭建 Text2SQL 智能查询!用 Dify + 知识库 + Agent 实现自然语言秒变 SQL》
下面重点说一下AIAgent的配置
Agent 策略 我们使用的一个 mcp functionCalling
模型 我们还是使用火山引擎的deepseek v3模型
工具列表,我们使用MCP-SSE 提供的2个工具(获取MCP工具列表、调用MCP 工具)
MCP-SSE: 这里我们填写上面部署的MCPHUB地址
http://14.103.204.132:8900/sse/bba57da5-5073-4fce-9b99-XXXXX
上面AI Agent是最要的, 其他的开始节点和直接回复节点这里没上面好说的。整体的工作流内容如下:
4.工作流验证和测试
我们点开工作流右上角“预览” 按钮
接下来我们测试
第一个问题
我想购买2025-05-20这天从北京到合肥的票,请帮我调用12306-mcp查询一下余票信息
我们看到它回复了我们的查询的车次、余票等信息。
第二个问题:
请帮我查询车次K1071途经站信息
第三个问题
请将K1071途径站点信息嵌入到网页中,帮我生成一段高德地图JSAPI代码,实现地图上标记出来途径的站点信息,并且以箭头图标的形式标记,各站点需要连成线,并且鼠标放到图标上可以显示到达时间,输出为cx.html
这个我们需要用到高德地图的 生成的html我们需要它的key 才能显示。
这里我们需要把生成的html 复制到电脑上保存html 并将页面代码中需要的高德地图apikey填入。
生产的代码如下:
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>K1071途径站点地图</title> <style> #map-container { width: 100%; height: 600px; } </style></head><body> <div id="map-container"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图API密钥"></script> <script> // 途径站点信息 const stations = [ { name: "北京西", lnglat: [116.316833, 39.904214], arrivalTime: "12:00" }, { name: "石家庄", lnglat: [114.4995, 38.0405], arrivalTime: "14:30" }, { name: "郑州", lnglat: [113.6494, 34.7569], arrivalTime: "17:00" }, { name: "武汉", lnglat: [114.3054, 30.5931], arrivalTime: "20:00" }, { name: "长沙", lnglat: [112.9388, 28.2278], arrivalTime: "22:30" } ]; // 初始化地图 const map = new AMap.Map('map-container', { zoom: 6, center: [114.3054, 30.5931] // 初始中心点设为武汉 }); // 添加标记和连线 const lineArr = []; stations.forEach((station, index) => { const marker = new AMap.Marker({ position: station.lnglat, icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', title: station.name, content: `<div>${station.name}<br>到达时间: ${station.arrivalTime}</div>` }); map.add(marker); lineArr.push(station.lnglat); }); // 添加连线 const polyline = new AMap.Polyline({ path: lineArr, strokeColor: "#3366FF", strokeWeight: 4, strokeStyle: "solid" }); map.add(polyline); </script></body></html>
我们打开它。
我们从上面图可以看出它使用高德地图绘制了北京-长沙的路线图。
体验地址
chatflow版本dify.duckcloud.fun/chat/3h0tZn… 备用地址(http://14.103.204.132/chat/3h0tZnJ1yqfWNm6h)
Agent版本dify.duckcloud.fun/chat/qEk0ig… 备用地址(http://14.103.204.132/chat/qEk0igzeUGVqGPyn)
相关资料和文档可以看我开源的项目 github.com/wwwzhouhui/…
5.总结
今天主要带大家了解并实现了使用 Dify 结合 MCP 技术来完成火车票信息查询功能的工作流方案。该工作流的搭建涉及多个关键步骤,包括工具的使用与安装、工作流的制作、验证和测试等环节。在工具使用和安装方面,我们选用了开源项目 mcphub,它作为统一的枢纽服务器,可将多个 MCP 服务器聚合为不同场景的独立可流式 HTTP(SSE)端点。与传统的火车票查询方式相比,该方案不仅能够快速获取所需信息,还能借助 AI 技术完成更复杂的任务,如生成地图标记代码等,为用户提供了更加智能、便捷的体验。此外,通过聚合多个 MCP 服务器,该方案还具备良好的扩展性,可以根据需求添加更多的功能。感兴趣的小伙伴可以按照本文步骤去尝试。今天的分享就到这里结束了,我们下一篇文章见。