掘金 人工智能 前天 09:58
dify案例分享-颠覆传统!Dify 与 MCP 如何重塑火车票查询体验
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文介绍了如何使用Dify结合模型上下文协议(MCP)技术,构建一个能够查询火车票信息的工作流。通过开源项目mcphub聚合多个MCP服务器,实现与12306等外部资源的高效连接。文章详细阐述了mcphub的安装配置、12306-mcp的添加,以及在Dify中配置AI Agent的关键步骤。该方案不仅能快速查询火车票信息,还能利用AI技术完成更复杂的任务,例如生成高德地图标记代码,为用户提供更智能便捷的体验。与传统方式相比,此方案具备良好的扩展性,可根据需求添加更多功能。

🚀MCP Server是一种基于模型上下文协议(MCP)构建的轻量级服务程序,旨在实现大型语言模型(LLM)与外部资源之间的高效、安全连接,解决AI应用中数据分散、接口不统一等问题。

🛠️mcphub是一个统一的枢纽服务器,可以将多个MCP服务器聚合为不同场景的独立可流式HTTP(SSE)端点,方便MCP客户端使用。通过Docker部署mcphub,并配置mcp_settings.json文件,可以轻松管理和使用多个MCP服务。

🎫通过将12306-mcp添加到mcphub的配置中,并重启服务器,可以在Dify工作流中使用AI Agent调用12306-mcp查询余票信息。AI Agent的关键配置包括选择mcp functionCalling策略,使用合适的模型(如火山引擎的deepseek v3),以及配置MCP-SSE地址。

🗺️结合高德地图API,可以将查询到的火车途经站点信息嵌入到网页中,生成带有站点标记和连线的高德地图JSAPI代码,直观展示火车的行驶路线和站点信息。

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 服务器,该方案还具备良好的扩展性,可以根据需求添加更多的功能。感兴趣的小伙伴可以按照本文步骤去尝试。今天的分享就到这里结束了,我们下一篇文章见。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Dify MCP 火车票查询 mcphub AI Agent
相关文章