1前言

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

 

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

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

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

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

 

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. 1. 轻量化部署架构
   仅需在局域网服务器部署单实例MCP Server，即可支持客户端通过SSE（Server-Sent Events）协议实现无缝接入，显著降低分布式部署成本与配置复杂度。

2. 2. 集中化运维管理
   采用中心化服务管理模式，所有节点依赖统一入口服务，便于系统版本迭代、功能升级及故障排查，有效提升运维效率。

二、局限性

1. 1. 资源瓶颈风险
   单节点承载全量服务请求可能导致资源集中消耗，多实例部署需绑定独立端口，可能引发端口资源竞争问题。

2. 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

 

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

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

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

5.总结

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

 大模型&AI产品经理如何学习

求大家的点赞和收藏，我花2万买的大模型学习资料免费共享给你们，来看看有哪些东西。

1.学习路线图

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己整理的大模型视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。

（都打包成一块的了，不能一一展开，总共300多集）

因篇幅有限，仅展示部分资料，需要点击下方图片前往获取

3.技术文档和电子书 

这里主要整理了大模型相关PDF书籍、行业报告、文档，有几百本，都是目前行业最新的。

4.LLM面试题和面经合集

这里主要整理了行业目前最新的大模型面试题和各种大厂offer面经合集。

👉学会后的收获：👈
• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。

1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集***

👉获取方式：
😝有需要的小伙伴，可以保存图片到wx扫描二v码免费领取【保证100%免费】🆓