当前位置： 首页 > news >正文

49-dify案例分享-私有化 MCP 广场搭建与网页小游戏智能体工作流实战

news 2025/5/6 18:25:59

1前言

上期给大家介绍过魔搭社区提供的MCP广场从而实现MCP扩展功能，还有我们通过图片生成html.本期文章将2个功能整合，另外考虑到有的小伙伴可能有私有化部署实现一个类似魔搭社区MCP广场，这样在公司内部或者客户内部就可以实现一个MCP服务功能了。从而方便其他各个子系统扩展MCP功能。下面给大家展示一下制作好的工作流截图。

image-20250503124212089

以上工作流主要有2块功能，功能1 主要实现图片识别并生成HTML 页面。（有之前网友给我留言说这块如何制作，这块给大家解答一下）。另外一个功能就是下面的直接调用AI agent智能体生成HTML 页面。

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

2.私有化MCP广场部署和搭建

有的小伙伴可能会好奇，这个私有化MCP广场是如何实现的呢。答案非常简单就是借助一个叫做1Panel的开源项目。该项目是一个现代化、开源的 Linux 服务器运维管理面板。该面板最近升级也支持MCP Server,我们主要借助它来实现的。

image-20250503124953397

1Panel安装

这个1Panel安装比较简单，打开可以参考官方文档https://1panel.cn/docs/installation/online_installation/ 平台支持在线和离线安装

image-20250503125111175

大家根据文档步骤操作即可完成1Panel安装，这里就不做详细展开了。

1Panel配置MCP Server

安装好1Panel 地址，账号和密码登录系统，后我们选择MCP,点击创建MCP server

image-20250503125651524

在右边面板弹出MCP server 配置，这里我们以EdgeOne Pages MCP为案例配置。

https://mcp.so/server/edgeone-pages-mcp/TencentEdgeOne?tab=content 我们在这网站找到 Server Config 配置

image-20250503125850512

回到1Panel MCP配置窗口中，点击“导入MCP Server配置”

image-20250503130028967

接下来我们需要填写端口 和外部访问路径（如果是局域网这里就不需要设置），我打开端口外部访问，填写端口号， 外部访问路径 3个值

image-20250503130213551

这里解释一下，他们是通过容器方式将 edgeone-pages-mcp 打包成容器 对外开启8004端口。这里会占用服务器一个端口号，如果是外部访问需要服务器开通对外映射的公网地址和端口。如果局域网 外部访问地址 换成局域网地址即可（如：192.168.1.XXX:8004）

以上配置好，后1Panel 会创建一个edgeone-pages-mcp 容器，我们可以在容器管理中查看到

image-20250503130545721

image-20250503130631700

以上操作我们就完成了一个之前需要再本地化安装的NPX安装转换成容器方式并将studio方式成功转成容器托管SSE方式了。

之前有小伙伴在windwos平台上安装npx识别的问题 也可以通过上面的方式变相解决。这里我们总结了一下它的优点和缺点：

一、优势
  1. 轻量化部署架构
    仅需在局域网服务器部署单实例MCP Server，即可支持客户端通过SSE（Server-Sent Events）协议实现无缝接入，显著降低分布式部署成本与配置复杂度。
  2. 集中化运维管理
    采用中心化服务管理模式，所有节点依赖统一入口服务，便于系统版本迭代、功能升级及故障排查，有效提升运维效率。
二、局限性
  1. 资源瓶颈风险
    单节点承载全量服务请求可能导致资源集中消耗，多实例部署需绑定独立端口，可能引发端口资源竞争问题。
  2. 公网安全策略待强化
    当前依赖IP白名单机制实现基础访问控制，但公网暴露场景下仍存在潜在安全风险。建议后续通过集成动态鉴权（如Token/Bearer认证）增强通信安全性。

其他的MCP-server大家参考edgeone-pages-mcp安装即可。

3.工作流的制作

我们回到dify工作台上面。

在制作工作流之前我们需要安装好 agent策略，这个插件可以在插件市场找到。

image-20250503132025523

选择上面截图中的MCP Agent策略安装。安装完成后我们可以在已安装的插件列表中查询到。

image-20250503132149641

开始

这个开始节点比较简单没有其他需要用户输入的地方。

image-20250503132321485

不过这个工作流用到了文件上传，所以我们需要在功能列表中设置一下文件传输。

image-20250503132416965

image-20250503132501227

问题分类器

开始节点之后我们设置一个问题分类器。

image-20250426143329010

问题分类器模型我们这里使用硅基流动提供的qwen2.5-VL-7B-Instruct 模型。因为我们这里用到2类MCP-Server 这些服务主要围绕 游戏制作和图片生成HTML 我们根据他们的特点划分成2类。

分类1

图片识别

分类2

小游戏

接下来流程会走2个分支，我们先说一下上面的流程分支

llm大语言模型

这个地方主要是利用多模型图片识别能力，生成类似的HTML代码。我们这里用了google gemini2.5-flash模型

系统提示词如下

请根据用户上传的图片内容信息，保持内容的颜色布局和风格，注意CSS表和表格内容，生成 html页面代码

视觉模型这里注意勾选上

image-20250503133638734

图片生成htmlAgent

image-20250503133907504

Agent策略这里我们需要提前安装一个叫做“MCP Agent 策略” 选择 function calling

image-20250503133947850

模型这块我们还是建议大家使用火山引擎的deepseekv3 模型。工具列表中，我们找一个时间的工具

image-20250503134102672

MCP 服务器地址，这里我们就填写刚才在1Panel 配置 mcp-server SSE url

http://14.103.204.132:8004/edgeone-pages-mcp-server

指令

请根据{{#1746245138243.text#}} 先生成html页面代码，然后在调用edgeone-pages-mcp-server 生成页面返回

查询

{{#sys.query#}}

完整的Agent如下

image-20250503134237806

直接回复

直接回复里面我们为了调试方便，让大模型输出2个值 一个是多模态模型生成的JHTML 页面代码，一个是调用Agent返回的edgeone

image-20250503134436084

image-20250503134501615

最后输出的如下

image-20250503134536050

Agent生成游戏HTML

这个是问题分类器第二个问题分类接入，主要的功能是用户输入的提示词通过调用AI Agent来生成网页版本HTML页面小游戏。这里的配置和上面的Agent非常类似，这里就不做详细介绍了。

image-20250503134805755

7.直接回复

这个直接回复主要是正对Agent生成游戏HTML 生成的结果返回，也是比较简单。

image-20250503135113100

以上我就完成了整个工作流的制作和搭建了。

4.验证及测试

我们点击右上角 预览按钮，在下面输入我们的问题。比如

给我生成一个贪吃蛇小游戏

3336

第二个问题

请根据这个图片的内容生成html页面代码

image-20250503140840596

3337

生成的结果地址 https://mcp.edgeone.site/share/lwrn3jsviyd8yfxIRX-cQ

我们这里也提供给大家一个地址给大家来体验。

体验地址https://difyhs.duckcloud.fun/chat/4CIhdc8rzZwUjeRa 备用地址（http://14.103.204.132/chat/4CIhdc8rzZwUjeRa）

相关资料和文档可以看我开源的项目 https://github.com/wwwzhouhui/dify-for-dsl

5.总结

今天主要带大家了解并实现了将图片生成 HTML 和网页小游戏打造超级智能体的工作流方案，同时还介绍了私有化 MCP 广场的部署和搭建方法。我们借助 1Panel 开源项目完成了私有化 MCP 广场的部署和搭建。一步一步带大家完成工作流智能体的搭建。对工作流进行了验证及测试，输入 “给我生成一个贪吃蛇小游戏” 和 “请根据这个图片的内容生成 html 页面代码” 等问题，得到了相应的结果，并提供了体验地址和相关资料文档。总体来说，这个方案相对较为全面地整合了图片生成 HTML 和网页小游戏生成的功能，并且提供了私有化部署的选项。感兴趣的小伙伴可以按照本文步骤去尝试。今天的分享就到这里结束了，我们下一篇文章见。

http://www.xdnf.cn/news/263971.html

相关文章：

  • 学习Cesium自定义材质
  • 硬件工程师面试常见问题（12）
  • 【LeetCode Hot100】贪心篇
  • 在pycharm profession 2020.3将.py程序使用pyinstaller打包成exe
  • Windows 中使用dockers创建指定java web 为镜像和运行容器
  • C++ STL vector高级特性与实战技巧
  • AVFormatContext 再分析零
  • 在Windows系统中使用Docker发布镜像到镜像仓库
  • 用PyTorch搭建卷积神经网络实现MNIST手写数字识别
  • 生成式 AI 的工作原理
  • Elasticsearch 中的索引模板：如何使用可组合模板
  • 【在Spring Boot中集成Redis】
  • 【赵渝强老师】TiDB生态圈组件
  • 3D人物关系图开发实战：Three.js实现自动旋转可视化图谱（附完整代码）
  • 人工智能助力工业制造：迈向智能制造的未来
  • 别样健康养生之道
  • AI 与生物技术的融合：开启精准医疗的新纪元
  • ros2 humble 控制真实机械臂（以lerobot为例）
  • 一种基于重建前检测的实孔径雷达实时角超分辨方法——论文阅读
  • **Java面试大冒险：谢飞机的幽默与技术碰撞记**
  • 做响应式布局网页多简单
  • AI生成视频检测方法及其相关研究
  • WebRTC 服务器之Janus概述和环境搭建
  • Spring MVC入门
  • 第12章：精神力的禁忌边界
  • 强化学习--3.值函数的方法（贝尔曼方程）
  • 直播推流拉流Token验证流程（直播服务器：SRS，验证服务器：EGGS（nodejs））
  • 智能决策支持系统的系统结构：四库架构与融合范式
  • k8s笔记——kubebuilder工作流程
  • 嵌入式硬件篇---STM32F103C8T6STM32F103RCT6