dify案例分享-颠覆传统！Dify 与 MCP 如何重塑火车票查询体验

wwwzhouhui
704 阅读5分钟

1.前言

MCP Server（模型上下文协议服务器）是一种基于模型上下文协议（Model Context Protocol，简称MCP）构建的轻量级服务程序，旨在实现大型语言模型（LLM）与外部资源之间的高效、安全连接。MCP协议由Anthropic公司于2024年11月开源，其核心目标是解决AI应用中数据分散、接口不统一等问题，为开发者提供标准化的接口，使AI模型能够灵活访问本地资源和远程服务，从而提升AI助手的响应质量和工作效率。

image-20250520164231802

​ 我们平时工作和生活中大家一定离不开交通工具，目前中国最大的铁路客运12306是我们用的最多的交通工具APP软件。之前也有小伙伴提到能不能用dfiy来实现一个火车票查询功能呢？今天就带大家使用dify来实现火车票信息查询功能。我们看一下实现的效果

12306-mcp chatflow

image-20250520164540255

image-20250520164632881

我们还可以借助高德地图实现一个火车站硅基地图，效果如下：

image-20250520164744682

话不多说下面给大家介绍一下这个工作流如何搭建的。

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

我们可以在服务端执行一下密码生成新的新密码哈

img

部署

在服务器上执行下面的命令

docker run -p 8900:3000 -v $(pwd)/mcp_settings.json:/app/mcp_settings.json samanhappy/mcphub

img

2.访问控制

我们输入如下地址打开 http://localhost:8900，使用您的账号登录。

img

输入账号和密码，进入管理端界面

image-20250518154932961

上面的我们已经提前安装了amap、playwright、fetch、slack、textin-ocr 大家可以根据自己的需要安装更多MCP-server

mcphub功能介绍

我们可以通过 服务市场查找我们需要安装的MCP-server，目前这个插件市场有非常多的MCP

image-20250518155215185

在线安装

可以通过studio 、sse、 Streamable HTTP 三种方式安装，这里就不做详细展开

image-20250518155432696

image-20250518155603401

3.mcp-client使用

上面mcphub配置好后，我们就可以把上面几个MCP-server聚合在一起从而方便mcp-client 使用了

Cherry Studio

我们打开Cherry Studio，在MCP 服务器配置，添加mcphubsse配置，我们按照下图步骤添加

image-20250518160600630

其中bba57da5-5073-4fce-9b99-13f985d15f64 是我们在mcphub添加group ID

image-20250518160706678

上面配置好mcphub 我们就可以在Cherry Studio 使用这一组MCP- Server了

image-20250518161524209

我们使用fetch 抓取新闻信息，说明这个mcphub 工具是可以使用的。

dify

由于dify是使用容器部署的，所以我们这里需要使用dify mcp-sse插件来实现。

image-20250518163852959

image-20250518163833864

通过以上方式我们就完成了一个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添加

image-20250520145126277

image-20250520145108966

看到12306-mcp 在线，说明12306-mcp安装配置完成。

接下来我们需要把这个12306-mcp添加到分组管理中使其中生效

image-20250520153252063

上述我们使用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

image-20250520172420800

上面AI Agent是最要的， 其他的开始节点和直接回复节点这里没上面好说的。整体的工作流内容如下：

image-20250520172544152

4.工作流验证和测试

​ 我们点开工作流右上角“预览” 按钮

​ image-20250520172645414

接下来我们测试

第一个问题

我想购买2025-05-20这天从北京到合肥的票，请帮我调用12306-mcp查询一下余票信息

image-20250520172750184

image-20250520172807012

我们看到它回复了我们的查询的车次、余票等信息。

第二个问题：

请帮我查询车次K1071途经站信息

image-20250520173034569

image-20250520173052257

第三个问题

请将K1071途径站点信息嵌入到网页中，帮我生成一段高德地图JSAPI代码，实现地图上标记出来途径的站点信息，并且以箭头图标的形式标记，各站点需要连成线，并且鼠标放到图标上可以显示到达时间，输出为cx.html

这个我们需要用到高德地图的 生成的html我们需要它的key 才能显示。

image-20250520173323959

image-20250520173357753

image-20250520173428142

这里我们需要把生成的html 复制到电脑上保存html 并将页面代码中需要的高德地图apikey填入。

image-20250520173602633

生产的代码如下：

<!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>

我们打开它。

image-20250520173827248

image-20250520173855062

我们从上面图可以看出它使用高德地图绘制了北京-长沙的路线图。

体验地址

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

avatar
文章
阅读
粉丝