最近在尝试将 AI 图像生成能力集成到移动端或 Web 应用时你是否也遇到了这样的困境本地部署的 ComfyUI 虽然功能强大但被牢牢锁在开发机的命令行里无法随时随地调用想做一个 AI 图片生成的小程序或网页却苦于后端服务搭建复杂、API 接口设计繁琐、多端适配困难重重如果你正为此头疼那么Workbuddy ComfyMCP这套组合方案或许就是你一直在寻找的“破局之钥”。它巧妙地将 ComfyUI 的强大工作流引擎通过标准化的 MCPModel Context Protocol协议暴露出来再借助 Workbuddy 这个轻量级服务端实现从本地到云端、从电脑到手机的无缝衔接。本文将为你完整拆解这套方案的部署、配置与多端调用全流程无论你是想快速搭建一个个人 AI 创作工具还是为企业项目集成稳定的图像生成服务都能从中找到可复用的实战代码与避坑指南。1. 背景与核心概念为什么需要 Workbuddy 与 ComfyMCP在深入实操之前我们有必要厘清几个核心概念理解它们各自解决的问题以及组合起来产生的“化学反应”。1.1 ComfyUI节点式工作流的强大与局限ComfyUI是一个基于节点流程的 Stable Diffusion 图形化界面。与 WebUI 不同它将生图的每一步如加载模型、输入提示词、采样、后期处理都抽象为可连接、可配置的节点。这种设计带来了极高的灵活性和可复现性高级用户可以通过拖拽节点搭建复杂的工作流实现图生图、视频生成、LoRA 混合等高级功能。然而ComfyUI 的“原罪”在于其本地桌面应用的形态。它通常运行在本地机器的 Python 环境中通过浏览器访问127.0.0.1:8188。这意味着无法远程访问除非进行复杂的内网穿透或服务器部署否则你只能在安装它的电脑上使用。缺乏标准化 API虽然它有原生 API但更侧重于工作流执行对于构建一个面向多端用户的服务化接口需要大量的二次开发。资源独占生成任务会占用本地 GPU不适合作为共享服务。1.2 ComfyMCP为 ComfyUI 插上标准化的“翅膀”ComfyMCP是一个桥接项目它的核心价值在于实现了MCPModel Context Protocol 协议与 ComfyUI 的对接。你可以把 MCP 理解为一套定义“如何与 AI 模型交互”的通用语言。而 ComfyMCP 的作用就是让 ComfyUI 能“说”这门语言。一旦 ComfyUI 能通过 MCP 协议通信任何支持 MCP 协议的客户端CLI、Web 应用、移动端 SDK都可以以一种标准化、声明式的方式调用它而无需关心 ComfyUI 内部复杂的节点连接逻辑。简单来说ComfyMCP 将 ComfyUI 从一个封闭的桌面软件变成了一个可以通过网络调用的、功能明确的AI 模型服务。1.3 Workbuddy轻量、多端的服务化部署方案Workbuddy在这里扮演了MCP 服务端和轻量级 HTTP 网关的双重角色。作为 MCP 服务端它启动并管理 ComfyMCP后者再连接并控制本地的 ComfyUI 实例。Workbuddy 负责维护这个连接的生命周期。作为 HTTP 网关它对外提供简洁的 RESTful API如POST /generate。你的小程序、网页前端不需要直接理解复杂的 MCP 协议只需要向 Workbuddy 发送一个简单的 HTTP 请求包含提示词、参数等Workbuddy 就会将其转换为 MCP 指令通过 ComfyMCP 驱动 ComfyUI 完成生图并将结果图片 URL 或 Base64返回给前端。组合起来的效果是你在电脑上部署好 ComfyUI、ComfyMCP 和 Workbuddy。然后你就可以在公司的电脑上、家里的平板、甚至通勤路上的手机里打开浏览器或小程序输入提示词点击生成图片就从你家里的高性能显卡服务器上诞生并传回你的设备。整个过程对前端开发者透明他们只需要调用几个简单的 API。2. 环境准备与版本说明在开始搭建之前请确保你的基础环境符合要求。本文以 Windows 11 系统为例其他操作系统Linux, macOS在命令上略有差异但核心步骤一致。2.1 基础环境要求操作系统Windows 10/11, Ubuntu 20.04, macOS 12。本文演示环境为 Windows 11。Python版本 3.10.x。这是 ComfyUI 的推荐版本避免使用 3.11 可能带来的依赖冲突。可使用python --version检查。Git用于克隆代码仓库。确保已安装并可执行git --version。显卡NVIDIA GPU推荐 8GB 显存以上以获得最佳体验。AMD GPU 可通过 ROCm 支持但配置更复杂。CPU 模式也可运行但速度极慢。网络需要能访问 GitHub 和 Hugging Face 以下载模型。2.2 核心组件版本为了确保兼容性建议使用以下版本或更新版本。版本差异可能导致 API 变更或运行错误。ComfyUI我们将使用秋叶一键整合包它集成了 ComfyUI 本体、常用插件和 Python 环境省去了繁琐的依赖安装。这是当前社区最流行的入门方式。ComfyMCP版本v0.1.0或更高。我们将从 GitHub 克隆其最新代码。Workbuddy版本v0.2.0或更高。同样从 GitHub 获取。重要提示AI 开源项目迭代迅速下文的所有配置和代码均基于撰写时的最新稳定版本。如果未来接口发生变化请以项目官方文档为准但本文提供的架构思路和排查方法依然有效。3. 核心组件部署与配置我们的部署顺序是先部署 ComfyUI生图引擎再部署 ComfyMCP协议桥接最后部署 Workbuddy服务网关。3.1 第一步部署 ComfyUI秋叶整合包对于大多数用户尤其是新手从零配置 ComfyUI 环境是一项挑战。秋叶大佬的整合包完美解决了这个问题。下载整合包 访问秋叶整合包的发布页可通过网络搜索“ComfyUI 秋叶一键整合包”找到下载最新版本的压缩包如ComfyUI_windows_portable_vX.X.X.7z。解压与初次运行 将压缩包解压到一个英文路径下例如D:\AI\ComfyUI。进入该目录双击运行run_nvidia_gpu.batN卡用户或run_cpu.bat无GPU用户。首次运行会自动下载并配置 Python 环境及必要依赖请保持网络通畅。启动成功后命令行窗口会显示类似Running on local URL: http://127.0.0.1:8188的信息。验证与基础配置 打开浏览器访问http://127.0.0.1:8188。你应该能看到 ComfyUI 的空白节点编辑器界面。下载基础模型首次使用需要下载生图模型。将 Stable Diffusion 模型文件如sd_xl_base_1.0.safetensors放入ComfyUI\models\checkpoints目录。你可以从 Hugging Face 或 Civitai 获取模型。测试生图在 ComfyUI 界面可以加载一个简单的工作流例如从示例中加载“基础文生图”点击“Queue Prompt”测试生图功能是否正常。确保这一步能成功生成图片再进行后续操作。3.2 第二步部署与配置 ComfyMCPComfyMCP 是连接 Workbuddy 和 ComfyUI 的桥梁。克隆代码 打开一个新的命令行窗口不要关闭 ComfyUI 的那个切换到一个工作目录例如D:\AI\Workbuddy_Deploy。cd /d D:\AI\Workbuddy_Deploy git clone https://github.com/bananaml/comfy-mcp.git cd comfy-mcp安装依赖 ComfyMCP 是一个 Python 项目需要安装其依赖。关键点我们需要使用 ComfyUI 整合包内的 Python 环境以确保库版本兼容。# 假设你的 ComfyUI 整合包路径是 D:\AI\ComfyUI D:\AI\ComfyUI\python_embeded\python.exe -m pip install -r requirements.txt这条命令使用整合包内的 Python 解释器来安装依赖完美避开了环境冲突。配置 ComfyMCP ComfyMCP 需要知道你的 ComfyUI 服务地址。编辑config.yaml文件如果不存在则创建。# config.yaml comfyui: base_url: http://127.0.0.1:8188 # ComfyUI 的运行地址 client_id: your_client_id_here # 可自定义用于标识客户端 tools: # 这里定义通过 MCP 暴露的工具例如文生图、图生图 - name: generate_image description: Generate an image from a text prompt using Stable Diffusion XL workflow_file: workflows/generate_image.json # 指向一个 ComfyUI 工作流文件base_url必须与 ComfyUI 的运行地址一致。workflow_file是核心它定义了一个具体的生图任务流程。你需要为每个你想暴露的功能如文生图、高清修复、换脸创建一个对应的.json工作流文件。这个文件可以从 ComfyUI 界面导出。创建并导出工作流在 ComfyUI 网页界面 (http://127.0.0.1:8188) 中手动搭建或加载一个你想要的工作流。点击菜单栏的“Save (Save)”按钮将当前工作流保存为一个.json文件例如generate_image.json。将这个文件放入 ComfyMCP 项目下的workflows/目录需手动创建。关键修改用文本编辑器打开这个 JSON 文件。你需要找到代表“提示词”、“步数”、“尺寸”等参数的节点将其inputs中的固定值替换为 MCP 协议可以传入的变量。通常这些值会被替换为像{prompt}、{steps}这样的占位符。具体格式需参考 ComfyMCP 的文档但基本思路是将静态工作流动态化。启动 ComfyMCP 服务器 配置完成后启动 ComfyMCP 服务。D:\AI\ComfyUI\python_embeded\python.exe -m comfy_mcp.server如果成功你会看到服务器启动的日志并监听某个端口如 8000。现在ComfyUI 的功能已经通过 MCP 协议对外提供服务了。3.3 第三步部署与配置 WorkbuddyWorkbuddy 是我们的 HTTP 网关和总调度中心。克隆代码 在同一个工作目录下克隆 Workbuddy 仓库。cd /d D:\AI\Workbuddy_Deploy git clone https://github.com/your-workbuddy-repo/workbuddy.git # 请替换为真实仓库地址 cd workbuddy注Workbuddy 是一个示例项目名实际项目名称和仓库地址可能不同请根据最新的网络信息查找。安装依赖 Workbuddy 可能是一个 Node.js 或 Python 项目。假设它是 Python 项目# 同样使用 ComfyUI 的 Python 环境 D:\AI\ComfyUI\python_embeded\python.exe -m pip install -r requirements.txt配置 Workbuddy 编辑 Workbuddy 的配置文件如config.py或.env关键是指定 ComfyMCP 服务器的地址。# config.py 示例 MCP_SERVER_URL http://127.0.0.1:8000 # ComfyMCP 服务地址 COMFYUI_OUTPUT_DIR D:/AI/ComfyUI/ComfyUI/output # ComfyUI 输出图片的目录用于读取结果 ALLOWED_ORIGINS [http://localhost:3000, https://your-wechat-app.com] # 允许跨域的前端地址这里MCP_SERVER_URL就是上一步 ComfyMCP 服务的地址。编写 API 路由 Workbuddy 的核心是提供一个 HTTP 端点。例如在app.py中from flask import Flask, request, jsonify import requests import json import os app Flask(__name__) app.route(/api/generate, methods[POST]) def generate_image(): 接收前端请求转发给 ComfyMCP data request.json prompt data.get(prompt, a cute cat) steps data.get(steps, 20) width data.get(width, 1024) height data.get(height, 1024) # 1. 构建 MCP 协议请求体 mcp_payload { tool: generate_image, # 对应 config.yaml 中的 tool name arguments: { prompt: prompt, steps: steps, width: width, height: height } } # 2. 调用 ComfyMCP 服务 try: mcp_response requests.post( f{app.config[MCP_SERVER_URL]}/call_tool, jsonmcp_payload, timeout300 # 生图较慢设置长超时 ) mcp_response.raise_for_status() result mcp_response.json() # 3. 处理结果。假设 ComfyMCP 返回了图片在 ComfyUI 输出目录中的文件名 image_filename result.get(image_filename) image_path os.path.join(app.config[COMFYUI_OUTPUT_DIR], image_filename) # 4. 将图片转换为可访问的 URL 或 Base64 返回给前端 # 方案A直接返回图片的服务器静态文件URL image_url f/output/{image_filename} # 方案B读取图片并编码为Base64 # with open(image_path, rb) as f: # image_data base64.b64encode(f.read()).decode(utf-8) return jsonify({success: True, image_url: image_url}) except requests.exceptions.RequestException as e: return jsonify({success: False, error: str(e)}), 500 if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)这段代码创建了一个/api/generate的 POST 接口。前端只需发送 JSON 数据{prompt: “a landscape”, steps: 20}Workbuddy 就会将其适配成 MCP 请求发给 ComfyMCP最终驱动 ComfyUI 生图。启动 Workbuddy 服务D:\AI\ComfyUI\python_embeded\python.exe app.py服务启动后监听http://0.0.0.0:5000。4. 完整实战案例构建一个简易的 AI 生图网页前端现在服务端ComfyUI ComfyMCP Workbuddy已经就绪。我们来构建一个最简化的网页前端进行测试和演示。4.1 创建前端项目结构创建一个新的目录web_frontend包含以下文件web_frontend/ ├── index.html └── style.css4.2 编写 HTML 与 JavaScript (index.html)这是一个极简的生成界面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleWorkbuddy AI 生图演示/title link relstylesheet hrefstyle.css /head body div classcontainer h1 Workbuddy ComfyUI 多端生图演示/h1 p输入提示词生成你的AI画作。后端由本地ComfyUI强力驱动。/p div classinput-area textarea idpromptInput placeholder请输入详细的英文提示词例如A beautiful sunset over a mountain lake, digital art, trending on artstation./textarea div classparams label步数: input typenumber idsteps value20 min1 max50/label label宽度: input typenumber idwidth value1024 min512 max2048 step64/label label高度: input typenumber idheight value1024 min512 max2048 step64/label /div button idgenerateBtn onclickgenerateImage()开始生成/button div idstatus等待输入.../div /div div classresult-area h2生成结果/h2 div idimageContainer p图片将在这里显示/p /div /div /div script const WORKBUDDY_API http://localhost:5000/api/generate; // 你的Workbuddy服务地址 async function generateImage() { const prompt document.getElementById(promptInput).value.trim(); const steps parseInt(document.getElementById(steps).value); const width parseInt(document.getElementById(width).value); const height parseInt(document.getElementById(height).value); if (!prompt) { alert(请输入提示词); return; } const btn document.getElementById(generateBtn); const status document.getElementById(status); btn.disabled true; status.textContent 正在生成中这可能需要30-60秒请耐心等待...; try { const response await fetch(WORKBUDDY_API, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, steps, width, height }) }); const result await response.json(); if (result.success) { status.textContent 生成成功; const img document.createElement(img); // 假设Workbuddy返回的是相对URL需要拼接完整路径 img.src http://localhost:5000${result.image_url}; img.alt 生成的图片; img.style.maxWidth 100%; img.style.borderRadius 8px; img.style.boxShadow 0 4px 12px rgba(0,0,0,0.1); const container document.getElementById(imageContainer); container.innerHTML ; // 清空之前的内容 container.appendChild(img); } else { status.textContent 生成失败: ${result.error}; console.error(API Error:, result.error); } } catch (error) { status.textContent 请求出错: ${error.message}; console.error(Fetch Error:, error); } finally { btn.disabled false; } } /script /body /html4.3 添加简单样式 (style.css)body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: #333; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; } .container { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); } h1 { color: #2c3e50; } .input-area { margin: 30px 0; padding: 20px; background: #f1f8ff; border-radius: 8px; } textarea { width: 100%; height: 100px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; resize: vertical; box-sizing: border-box; } .params { margin: 15px 0; display: flex; gap: 20px; flex-wrap: wrap; } .params label { display: flex; align-items: center; gap: 5px; } .params input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 80px; } button { background-color: #4a6cf7; color: white; border: none; padding: 12px 30px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #3a5ce5; } button:disabled { background-color: #a0a0a0; cursor: not-allowed; } #status { margin-top: 15px; padding: 10px; border-radius: 4px; background-color: #e8f4fd; color: #0066cc; } .result-area { margin-top: 40px; } #imageContainer { min-height: 300px; border: 2px dashed #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 20px; margin-top: 15px; }4.4 运行与验证确保三个后端服务都在运行ComfyUI (在8188端口)ComfyMCP (在8000端口)Workbuddy (在5000端口)由于前端直接通过fetch调用localhost:5000会涉及跨域问题。我们之前已在 Workbuddy 配置中设置了ALLOWED_ORIGINS。为了简单测试可以直接用浏览器打开本地 HTML 文件或使用一个简单的 HTTP 服务器如python -m http.server 3000来提供前端页面。打开index.html输入提示词点击“开始生成”。观察浏览器开发者工具F12的“网络”(Network) 选项卡查看对http://localhost:5000/api/generate的请求和响应。如果一切顺利几十秒后生成的图片将显示在网页上。4.5 扩展至小程序与移动端网页成功调用意味着 API 层已经打通。扩展到微信小程序或其他移动端应用原理完全一致部署将 Workbuddy 服务部署到具有公网 IP 的服务器如云服务器并配置域名和 HTTPS小程序要求 HTTPS。调用在小程序的.js文件中使用wx.request发起对https://your-domain.com/api/generate的 POST 请求。安全在 Workbuddy 服务端增加 API 密钥验证、请求频率限制等安全措施。优化生图是耗时操作API 应设计为异步。即前端提交任务后立即返回一个task_id然后前端轮询另一个接口如GET /api/task/{task_id}来获取任务状态和结果。这可以避免 HTTP 请求超时。5. 常见问题与排查思路在部署和运行过程中你几乎一定会遇到一些问题。下表整理了高频问题及其解决方案问题现象可能原因排查步骤与解决方案ComfyUI 启动失败1. Python 环境冲突。2. 端口8188被占用。3. 模型文件损坏或缺失。1. 使用秋叶整合包避免系统 Python 干扰。2. 运行netstat -ano | findstr :8188查找并结束占用进程或修改 ComfyUI 启动脚本中的端口。3. 检查models/checkpoints目录是否有正确的.safetensors或.ckpt文件。ComfyMCP 连接 ComfyUI 失败1.config.yaml中的base_url错误。2. ComfyUI 未运行。3. 网络策略阻止。1. 确认 ComfyUI 的访问地址通常是http://127.0.0.1:8188。2. 确保 ComfyUI 进程正在运行并能通过浏览器访问。3. 在 ComfyMCP 的 Python 脚本中尝试用requests.get(“http://127.0.0.1:8188”)测试连通性。Workbuddy 调用 ComfyMCP 超时或无响应1. ComfyMCP 服务未启动或端口不对。2. MCP 请求格式错误。3. ComfyUI 生图任务卡死。1. 确认 ComfyMCP 服务日志检查其监听端口如8000。2. 使用 Postman 或 curl 直接向 ComfyMCP 的/call_tool端点发送请求验证其是否正常工作。比对请求体格式与config.yaml中 tool 的定义。3. 查看 ComfyUI 界面是否有任务在队列中卡住。重启 ComfyUI 服务。前端报跨域 (CORS) 错误Workbuddy 服务未正确配置 CORS。在 Workbuddy 的 Flask 应用中使用flask_cors库或确保ALLOWED_ORIGINS包含了前端页面的源如http://localhost:3000。生成的图片无法显示1. Workbuddy 返回的图片路径错误。2. 静态文件服务未配置。3. 文件权限问题。1. 检查 Workbuddy 代码中拼接的image_url是否正确指向了 ComfyUI 的output目录。2. 在 Workbuddy 中添加静态文件路由例如app.route(‘/output/path:filename’)来提供图片访问。3. 确保 Workbuddy 进程有权限读取 ComfyUI 输出目录的文件。小程序请求失败1. 服务器域名未在小程序后台配置。2. 未使用 HTTPS。3. 服务器防火墙未开放端口。1. 登录微信小程序后台在“开发”-“开发设置”-“服务器域名”中添加你的 Workbuddy 服务域名。2. 为你的服务器域名申请 SSL 证书并配置 HTTPS。3. 在云服务器安全组中放行 Workbuddy 服务端口如 5000。6. 最佳实践与工程建议将个人玩具升级为可用的生产级服务还需要考虑更多工程化因素。6.1 服务稳定性与高可用进程守护使用systemd(Linux) 或NSSM(Windows) 将 ComfyUI、ComfyMCP、Workbuddy 作为系统服务运行实现开机自启和崩溃重启。资源隔离为每个服务尤其是 ComfyUI设置资源限制CPU、内存防止单个生图任务耗尽系统资源。队列管理Workbuddy 应实现一个任务队列例如使用 Redis 或 RabbitMQ避免高并发请求直接压垮 ComfyUI。前端提交任务后进入队列Workbuddy 按顺序消费。6.2 API 设计与安全性异步接口如前所述将同步生图接口改为异步。设计POST /api/tasks提交任务GET /api/tasks/{task_id}查询结果。认证与授权为 API 添加简单的 API Key 认证。可以在请求头中携带X-API-Key。输入验证与清理对前端传入的prompt等参数进行长度限制和敏感词过滤防止恶意输入或 Prompt 注入攻击。限流使用令牌桶等算法对 IP 或用户进行限流防止滥用。6.3 性能与用户体验优化模型缓存ComfyUI 加载大模型较慢。确保常用模型已加载到显存中或使用--highvram参数避免频繁卸载。前端反馈在异步任务接口中除了pending、success、failed状态外还可以返回预估剩余时间、生成进度如当前步数/总步数。结果缓存对相同的生图参数prompt, seed, steps等生成的结果进行缓存下次请求直接返回大幅提升响应速度。多 GPU 支持如果服务器有多张显卡可以部署多个 ComfyUI 实例由 Workbuddy 进行负载均衡并行处理生图任务。6.4 监控与日志结构化日志为 Workbuddy 和 ComfyMCP 添加详细的日志记录包括请求参数、响应时间、错误信息。使用如structlog或loguru库。关键指标监控监控 GPU 使用率、显存占用、生图任务队列长度、API 响应时间等。这些数据对于扩容和排错至关重要。错误告警设置当服务连续失败或 GPU 内存不足时通过邮件、钉钉、企业微信等渠道发送告警。通过 Workbuddy ComfyMCP 的组合我们成功地将一个本地桌面级的 AI 生图工具 ComfyUI改造成了一个可通过网络调用的、支持多端访问的服务。这套方案的核心优势在于解耦与标准化前端应用与复杂的生图引擎解耦通过统一的 MCP 协议和 HTTP API 进行通信。你现在可以基于此开发出属于自己的 AI 绘画小程序、集成 AI 功能的网站或者搭建一个团队内部的创意工具平台。
最近在尝试将 AI 图像生成能力集成到移动端或 Web 应用时你是否也遇到了这样的困境本地部署的 ComfyUI 虽然功能强大但被牢牢锁在开发机的命令行里无法随时随地调用想做一个 AI 图片生成的小程序或网页却苦于后端服务搭建复杂、API 接口设计繁琐、多端适配困难重重如果你正为此头疼那么Workbuddy ComfyMCP这套组合方案或许就是你一直在寻找的“破局之钥”。它巧妙地将 ComfyUI 的强大工作流引擎通过标准化的 MCPModel Context Protocol协议暴露出来再借助 Workbuddy 这个轻量级服务端实现从本地到云端、从电脑到手机的无缝衔接。本文将为你完整拆解这套方案的部署、配置与多端调用全流程无论你是想快速搭建一个个人 AI 创作工具还是为企业项目集成稳定的图像生成服务都能从中找到可复用的实战代码与避坑指南。1. 背景与核心概念为什么需要 Workbuddy 与 ComfyMCP在深入实操之前我们有必要厘清几个核心概念理解它们各自解决的问题以及组合起来产生的“化学反应”。1.1 ComfyUI节点式工作流的强大与局限ComfyUI是一个基于节点流程的 Stable Diffusion 图形化界面。与 WebUI 不同它将生图的每一步如加载模型、输入提示词、采样、后期处理都抽象为可连接、可配置的节点。这种设计带来了极高的灵活性和可复现性高级用户可以通过拖拽节点搭建复杂的工作流实现图生图、视频生成、LoRA 混合等高级功能。然而ComfyUI 的“原罪”在于其本地桌面应用的形态。它通常运行在本地机器的 Python 环境中通过浏览器访问127.0.0.1:8188。这意味着无法远程访问除非进行复杂的内网穿透或服务器部署否则你只能在安装它的电脑上使用。缺乏标准化 API虽然它有原生 API但更侧重于工作流执行对于构建一个面向多端用户的服务化接口需要大量的二次开发。资源独占生成任务会占用本地 GPU不适合作为共享服务。1.2 ComfyMCP为 ComfyUI 插上标准化的“翅膀”ComfyMCP是一个桥接项目它的核心价值在于实现了MCPModel Context Protocol 协议与 ComfyUI 的对接。你可以把 MCP 理解为一套定义“如何与 AI 模型交互”的通用语言。而 ComfyMCP 的作用就是让 ComfyUI 能“说”这门语言。一旦 ComfyUI 能通过 MCP 协议通信任何支持 MCP 协议的客户端CLI、Web 应用、移动端 SDK都可以以一种标准化、声明式的方式调用它而无需关心 ComfyUI 内部复杂的节点连接逻辑。简单来说ComfyMCP 将 ComfyUI 从一个封闭的桌面软件变成了一个可以通过网络调用的、功能明确的AI 模型服务。1.3 Workbuddy轻量、多端的服务化部署方案Workbuddy在这里扮演了MCP 服务端和轻量级 HTTP 网关的双重角色。作为 MCP 服务端它启动并管理 ComfyMCP后者再连接并控制本地的 ComfyUI 实例。Workbuddy 负责维护这个连接的生命周期。作为 HTTP 网关它对外提供简洁的 RESTful API如POST /generate。你的小程序、网页前端不需要直接理解复杂的 MCP 协议只需要向 Workbuddy 发送一个简单的 HTTP 请求包含提示词、参数等Workbuddy 就会将其转换为 MCP 指令通过 ComfyMCP 驱动 ComfyUI 完成生图并将结果图片 URL 或 Base64返回给前端。组合起来的效果是你在电脑上部署好 ComfyUI、ComfyMCP 和 Workbuddy。然后你就可以在公司的电脑上、家里的平板、甚至通勤路上的手机里打开浏览器或小程序输入提示词点击生成图片就从你家里的高性能显卡服务器上诞生并传回你的设备。整个过程对前端开发者透明他们只需要调用几个简单的 API。2. 环境准备与版本说明在开始搭建之前请确保你的基础环境符合要求。本文以 Windows 11 系统为例其他操作系统Linux, macOS在命令上略有差异但核心步骤一致。2.1 基础环境要求操作系统Windows 10/11, Ubuntu 20.04, macOS 12。本文演示环境为 Windows 11。Python版本 3.10.x。这是 ComfyUI 的推荐版本避免使用 3.11 可能带来的依赖冲突。可使用python --version检查。Git用于克隆代码仓库。确保已安装并可执行git --version。显卡NVIDIA GPU推荐 8GB 显存以上以获得最佳体验。AMD GPU 可通过 ROCm 支持但配置更复杂。CPU 模式也可运行但速度极慢。网络需要能访问 GitHub 和 Hugging Face 以下载模型。2.2 核心组件版本为了确保兼容性建议使用以下版本或更新版本。版本差异可能导致 API 变更或运行错误。ComfyUI我们将使用秋叶一键整合包它集成了 ComfyUI 本体、常用插件和 Python 环境省去了繁琐的依赖安装。这是当前社区最流行的入门方式。ComfyMCP版本v0.1.0或更高。我们将从 GitHub 克隆其最新代码。Workbuddy版本v0.2.0或更高。同样从 GitHub 获取。重要提示AI 开源项目迭代迅速下文的所有配置和代码均基于撰写时的最新稳定版本。如果未来接口发生变化请以项目官方文档为准但本文提供的架构思路和排查方法依然有效。3. 核心组件部署与配置我们的部署顺序是先部署 ComfyUI生图引擎再部署 ComfyMCP协议桥接最后部署 Workbuddy服务网关。3.1 第一步部署 ComfyUI秋叶整合包对于大多数用户尤其是新手从零配置 ComfyUI 环境是一项挑战。秋叶大佬的整合包完美解决了这个问题。下载整合包 访问秋叶整合包的发布页可通过网络搜索“ComfyUI 秋叶一键整合包”找到下载最新版本的压缩包如ComfyUI_windows_portable_vX.X.X.7z。解压与初次运行 将压缩包解压到一个英文路径下例如D:\AI\ComfyUI。进入该目录双击运行run_nvidia_gpu.batN卡用户或run_cpu.bat无GPU用户。首次运行会自动下载并配置 Python 环境及必要依赖请保持网络通畅。启动成功后命令行窗口会显示类似Running on local URL: http://127.0.0.1:8188的信息。验证与基础配置 打开浏览器访问http://127.0.0.1:8188。你应该能看到 ComfyUI 的空白节点编辑器界面。下载基础模型首次使用需要下载生图模型。将 Stable Diffusion 模型文件如sd_xl_base_1.0.safetensors放入ComfyUI\models\checkpoints目录。你可以从 Hugging Face 或 Civitai 获取模型。测试生图在 ComfyUI 界面可以加载一个简单的工作流例如从示例中加载“基础文生图”点击“Queue Prompt”测试生图功能是否正常。确保这一步能成功生成图片再进行后续操作。3.2 第二步部署与配置 ComfyMCPComfyMCP 是连接 Workbuddy 和 ComfyUI 的桥梁。克隆代码 打开一个新的命令行窗口不要关闭 ComfyUI 的那个切换到一个工作目录例如D:\AI\Workbuddy_Deploy。cd /d D:\AI\Workbuddy_Deploy git clone https://github.com/bananaml/comfy-mcp.git cd comfy-mcp安装依赖 ComfyMCP 是一个 Python 项目需要安装其依赖。关键点我们需要使用 ComfyUI 整合包内的 Python 环境以确保库版本兼容。# 假设你的 ComfyUI 整合包路径是 D:\AI\ComfyUI D:\AI\ComfyUI\python_embeded\python.exe -m pip install -r requirements.txt这条命令使用整合包内的 Python 解释器来安装依赖完美避开了环境冲突。配置 ComfyMCP ComfyMCP 需要知道你的 ComfyUI 服务地址。编辑config.yaml文件如果不存在则创建。# config.yaml comfyui: base_url: http://127.0.0.1:8188 # ComfyUI 的运行地址 client_id: your_client_id_here # 可自定义用于标识客户端 tools: # 这里定义通过 MCP 暴露的工具例如文生图、图生图 - name: generate_image description: Generate an image from a text prompt using Stable Diffusion XL workflow_file: workflows/generate_image.json # 指向一个 ComfyUI 工作流文件base_url必须与 ComfyUI 的运行地址一致。workflow_file是核心它定义了一个具体的生图任务流程。你需要为每个你想暴露的功能如文生图、高清修复、换脸创建一个对应的.json工作流文件。这个文件可以从 ComfyUI 界面导出。创建并导出工作流在 ComfyUI 网页界面 (http://127.0.0.1:8188) 中手动搭建或加载一个你想要的工作流。点击菜单栏的“Save (Save)”按钮将当前工作流保存为一个.json文件例如generate_image.json。将这个文件放入 ComfyMCP 项目下的workflows/目录需手动创建。关键修改用文本编辑器打开这个 JSON 文件。你需要找到代表“提示词”、“步数”、“尺寸”等参数的节点将其inputs中的固定值替换为 MCP 协议可以传入的变量。通常这些值会被替换为像{prompt}、{steps}这样的占位符。具体格式需参考 ComfyMCP 的文档但基本思路是将静态工作流动态化。启动 ComfyMCP 服务器 配置完成后启动 ComfyMCP 服务。D:\AI\ComfyUI\python_embeded\python.exe -m comfy_mcp.server如果成功你会看到服务器启动的日志并监听某个端口如 8000。现在ComfyUI 的功能已经通过 MCP 协议对外提供服务了。3.3 第三步部署与配置 WorkbuddyWorkbuddy 是我们的 HTTP 网关和总调度中心。克隆代码 在同一个工作目录下克隆 Workbuddy 仓库。cd /d D:\AI\Workbuddy_Deploy git clone https://github.com/your-workbuddy-repo/workbuddy.git # 请替换为真实仓库地址 cd workbuddy注Workbuddy 是一个示例项目名实际项目名称和仓库地址可能不同请根据最新的网络信息查找。安装依赖 Workbuddy 可能是一个 Node.js 或 Python 项目。假设它是 Python 项目# 同样使用 ComfyUI 的 Python 环境 D:\AI\ComfyUI\python_embeded\python.exe -m pip install -r requirements.txt配置 Workbuddy 编辑 Workbuddy 的配置文件如config.py或.env关键是指定 ComfyMCP 服务器的地址。# config.py 示例 MCP_SERVER_URL http://127.0.0.1:8000 # ComfyMCP 服务地址 COMFYUI_OUTPUT_DIR D:/AI/ComfyUI/ComfyUI/output # ComfyUI 输出图片的目录用于读取结果 ALLOWED_ORIGINS [http://localhost:3000, https://your-wechat-app.com] # 允许跨域的前端地址这里MCP_SERVER_URL就是上一步 ComfyMCP 服务的地址。编写 API 路由 Workbuddy 的核心是提供一个 HTTP 端点。例如在app.py中from flask import Flask, request, jsonify import requests import json import os app Flask(__name__) app.route(/api/generate, methods[POST]) def generate_image(): 接收前端请求转发给 ComfyMCP data request.json prompt data.get(prompt, a cute cat) steps data.get(steps, 20) width data.get(width, 1024) height data.get(height, 1024) # 1. 构建 MCP 协议请求体 mcp_payload { tool: generate_image, # 对应 config.yaml 中的 tool name arguments: { prompt: prompt, steps: steps, width: width, height: height } } # 2. 调用 ComfyMCP 服务 try: mcp_response requests.post( f{app.config[MCP_SERVER_URL]}/call_tool, jsonmcp_payload, timeout300 # 生图较慢设置长超时 ) mcp_response.raise_for_status() result mcp_response.json() # 3. 处理结果。假设 ComfyMCP 返回了图片在 ComfyUI 输出目录中的文件名 image_filename result.get(image_filename) image_path os.path.join(app.config[COMFYUI_OUTPUT_DIR], image_filename) # 4. 将图片转换为可访问的 URL 或 Base64 返回给前端 # 方案A直接返回图片的服务器静态文件URL image_url f/output/{image_filename} # 方案B读取图片并编码为Base64 # with open(image_path, rb) as f: # image_data base64.b64encode(f.read()).decode(utf-8) return jsonify({success: True, image_url: image_url}) except requests.exceptions.RequestException as e: return jsonify({success: False, error: str(e)}), 500 if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)这段代码创建了一个/api/generate的 POST 接口。前端只需发送 JSON 数据{prompt: “a landscape”, steps: 20}Workbuddy 就会将其适配成 MCP 请求发给 ComfyMCP最终驱动 ComfyUI 生图。启动 Workbuddy 服务D:\AI\ComfyUI\python_embeded\python.exe app.py服务启动后监听http://0.0.0.0:5000。4. 完整实战案例构建一个简易的 AI 生图网页前端现在服务端ComfyUI ComfyMCP Workbuddy已经就绪。我们来构建一个最简化的网页前端进行测试和演示。4.1 创建前端项目结构创建一个新的目录web_frontend包含以下文件web_frontend/ ├── index.html └── style.css4.2 编写 HTML 与 JavaScript (index.html)这是一个极简的生成界面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleWorkbuddy AI 生图演示/title link relstylesheet hrefstyle.css /head body div classcontainer h1 Workbuddy ComfyUI 多端生图演示/h1 p输入提示词生成你的AI画作。后端由本地ComfyUI强力驱动。/p div classinput-area textarea idpromptInput placeholder请输入详细的英文提示词例如A beautiful sunset over a mountain lake, digital art, trending on artstation./textarea div classparams label步数: input typenumber idsteps value20 min1 max50/label label宽度: input typenumber idwidth value1024 min512 max2048 step64/label label高度: input typenumber idheight value1024 min512 max2048 step64/label /div button idgenerateBtn onclickgenerateImage()开始生成/button div idstatus等待输入.../div /div div classresult-area h2生成结果/h2 div idimageContainer p图片将在这里显示/p /div /div /div script const WORKBUDDY_API http://localhost:5000/api/generate; // 你的Workbuddy服务地址 async function generateImage() { const prompt document.getElementById(promptInput).value.trim(); const steps parseInt(document.getElementById(steps).value); const width parseInt(document.getElementById(width).value); const height parseInt(document.getElementById(height).value); if (!prompt) { alert(请输入提示词); return; } const btn document.getElementById(generateBtn); const status document.getElementById(status); btn.disabled true; status.textContent 正在生成中这可能需要30-60秒请耐心等待...; try { const response await fetch(WORKBUDDY_API, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt, steps, width, height }) }); const result await response.json(); if (result.success) { status.textContent 生成成功; const img document.createElement(img); // 假设Workbuddy返回的是相对URL需要拼接完整路径 img.src http://localhost:5000${result.image_url}; img.alt 生成的图片; img.style.maxWidth 100%; img.style.borderRadius 8px; img.style.boxShadow 0 4px 12px rgba(0,0,0,0.1); const container document.getElementById(imageContainer); container.innerHTML ; // 清空之前的内容 container.appendChild(img); } else { status.textContent 生成失败: ${result.error}; console.error(API Error:, result.error); } } catch (error) { status.textContent 请求出错: ${error.message}; console.error(Fetch Error:, error); } finally { btn.disabled false; } } /script /body /html4.3 添加简单样式 (style.css)body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, sans-serif; line-height: 1.6; color: #333; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; } .container { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); } h1 { color: #2c3e50; } .input-area { margin: 30px 0; padding: 20px; background: #f1f8ff; border-radius: 8px; } textarea { width: 100%; height: 100px; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; resize: vertical; box-sizing: border-box; } .params { margin: 15px 0; display: flex; gap: 20px; flex-wrap: wrap; } .params label { display: flex; align-items: center; gap: 5px; } .params input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 80px; } button { background-color: #4a6cf7; color: white; border: none; padding: 12px 30px; border-radius: 6px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #3a5ce5; } button:disabled { background-color: #a0a0a0; cursor: not-allowed; } #status { margin-top: 15px; padding: 10px; border-radius: 4px; background-color: #e8f4fd; color: #0066cc; } .result-area { margin-top: 40px; } #imageContainer { min-height: 300px; border: 2px dashed #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 20px; margin-top: 15px; }4.4 运行与验证确保三个后端服务都在运行ComfyUI (在8188端口)ComfyMCP (在8000端口)Workbuddy (在5000端口)由于前端直接通过fetch调用localhost:5000会涉及跨域问题。我们之前已在 Workbuddy 配置中设置了ALLOWED_ORIGINS。为了简单测试可以直接用浏览器打开本地 HTML 文件或使用一个简单的 HTTP 服务器如python -m http.server 3000来提供前端页面。打开index.html输入提示词点击“开始生成”。观察浏览器开发者工具F12的“网络”(Network) 选项卡查看对http://localhost:5000/api/generate的请求和响应。如果一切顺利几十秒后生成的图片将显示在网页上。4.5 扩展至小程序与移动端网页成功调用意味着 API 层已经打通。扩展到微信小程序或其他移动端应用原理完全一致部署将 Workbuddy 服务部署到具有公网 IP 的服务器如云服务器并配置域名和 HTTPS小程序要求 HTTPS。调用在小程序的.js文件中使用wx.request发起对https://your-domain.com/api/generate的 POST 请求。安全在 Workbuddy 服务端增加 API 密钥验证、请求频率限制等安全措施。优化生图是耗时操作API 应设计为异步。即前端提交任务后立即返回一个task_id然后前端轮询另一个接口如GET /api/task/{task_id}来获取任务状态和结果。这可以避免 HTTP 请求超时。5. 常见问题与排查思路在部署和运行过程中你几乎一定会遇到一些问题。下表整理了高频问题及其解决方案问题现象可能原因排查步骤与解决方案ComfyUI 启动失败1. Python 环境冲突。2. 端口8188被占用。3. 模型文件损坏或缺失。1. 使用秋叶整合包避免系统 Python 干扰。2. 运行netstat -ano | findstr :8188查找并结束占用进程或修改 ComfyUI 启动脚本中的端口。3. 检查models/checkpoints目录是否有正确的.safetensors或.ckpt文件。ComfyMCP 连接 ComfyUI 失败1.config.yaml中的base_url错误。2. ComfyUI 未运行。3. 网络策略阻止。1. 确认 ComfyUI 的访问地址通常是http://127.0.0.1:8188。2. 确保 ComfyUI 进程正在运行并能通过浏览器访问。3. 在 ComfyMCP 的 Python 脚本中尝试用requests.get(“http://127.0.0.1:8188”)测试连通性。Workbuddy 调用 ComfyMCP 超时或无响应1. ComfyMCP 服务未启动或端口不对。2. MCP 请求格式错误。3. ComfyUI 生图任务卡死。1. 确认 ComfyMCP 服务日志检查其监听端口如8000。2. 使用 Postman 或 curl 直接向 ComfyMCP 的/call_tool端点发送请求验证其是否正常工作。比对请求体格式与config.yaml中 tool 的定义。3. 查看 ComfyUI 界面是否有任务在队列中卡住。重启 ComfyUI 服务。前端报跨域 (CORS) 错误Workbuddy 服务未正确配置 CORS。在 Workbuddy 的 Flask 应用中使用flask_cors库或确保ALLOWED_ORIGINS包含了前端页面的源如http://localhost:3000。生成的图片无法显示1. Workbuddy 返回的图片路径错误。2. 静态文件服务未配置。3. 文件权限问题。1. 检查 Workbuddy 代码中拼接的image_url是否正确指向了 ComfyUI 的output目录。2. 在 Workbuddy 中添加静态文件路由例如app.route(‘/output/path:filename’)来提供图片访问。3. 确保 Workbuddy 进程有权限读取 ComfyUI 输出目录的文件。小程序请求失败1. 服务器域名未在小程序后台配置。2. 未使用 HTTPS。3. 服务器防火墙未开放端口。1. 登录微信小程序后台在“开发”-“开发设置”-“服务器域名”中添加你的 Workbuddy 服务域名。2. 为你的服务器域名申请 SSL 证书并配置 HTTPS。3. 在云服务器安全组中放行 Workbuddy 服务端口如 5000。6. 最佳实践与工程建议将个人玩具升级为可用的生产级服务还需要考虑更多工程化因素。6.1 服务稳定性与高可用进程守护使用systemd(Linux) 或NSSM(Windows) 将 ComfyUI、ComfyMCP、Workbuddy 作为系统服务运行实现开机自启和崩溃重启。资源隔离为每个服务尤其是 ComfyUI设置资源限制CPU、内存防止单个生图任务耗尽系统资源。队列管理Workbuddy 应实现一个任务队列例如使用 Redis 或 RabbitMQ避免高并发请求直接压垮 ComfyUI。前端提交任务后进入队列Workbuddy 按顺序消费。6.2 API 设计与安全性异步接口如前所述将同步生图接口改为异步。设计POST /api/tasks提交任务GET /api/tasks/{task_id}查询结果。认证与授权为 API 添加简单的 API Key 认证。可以在请求头中携带X-API-Key。输入验证与清理对前端传入的prompt等参数进行长度限制和敏感词过滤防止恶意输入或 Prompt 注入攻击。限流使用令牌桶等算法对 IP 或用户进行限流防止滥用。6.3 性能与用户体验优化模型缓存ComfyUI 加载大模型较慢。确保常用模型已加载到显存中或使用--highvram参数避免频繁卸载。前端反馈在异步任务接口中除了pending、success、failed状态外还可以返回预估剩余时间、生成进度如当前步数/总步数。结果缓存对相同的生图参数prompt, seed, steps等生成的结果进行缓存下次请求直接返回大幅提升响应速度。多 GPU 支持如果服务器有多张显卡可以部署多个 ComfyUI 实例由 Workbuddy 进行负载均衡并行处理生图任务。6.4 监控与日志结构化日志为 Workbuddy 和 ComfyMCP 添加详细的日志记录包括请求参数、响应时间、错误信息。使用如structlog或loguru库。关键指标监控监控 GPU 使用率、显存占用、生图任务队列长度、API 响应时间等。这些数据对于扩容和排错至关重要。错误告警设置当服务连续失败或 GPU 内存不足时通过邮件、钉钉、企业微信等渠道发送告警。通过 Workbuddy ComfyMCP 的组合我们成功地将一个本地桌面级的 AI 生图工具 ComfyUI改造成了一个可通过网络调用的、支持多端访问的服务。这套方案的核心优势在于解耦与标准化前端应用与复杂的生图引擎解耦通过统一的 MCP 协议和 HTTP API 进行通信。你现在可以基于此开发出属于自己的 AI 绘画小程序、集成 AI 功能的网站或者搭建一个团队内部的创意工具平台。
