《WebSPC技术详解：基于LangGraph+MCP的AI-SPC系统架构设计与实现》

摘要本文介绍一套开源的AI驱动SPC统计过程控制系统WebSPC详细阐述其微服务架构、LLM集成方案、MCP工具链设计以及生产环境部署经验。系统采用Vue3FlaskFastAPI技术栈通过LangGraph实现多步推理的根因分析并基于MCP协议扩展AI的行动能力。关键词SPC、LangGraph、MCP、FastAPI、工业AI、质量管理系统一、项目背景与技术选型1.1 传统SPC系统的局限性传统SPC软件存在三个技术痛点批处理模式T1甚至TN的数据分析无法满足实时生产需求孤立系统与MES、ERP等系统数据割裂根因分析依赖人工经验封闭架构商业软件扩展困难二次开发成本高昂1.2 WebSPC的技术选型逻辑表格模块选型理由前端框架Vue3Vite组合式API适合复杂状态管理Vite构建速度快图表库Plotly.js科学计算图表支持好支持WebGL加速常规后端FlaskSQLAlchemy轻量ORM成熟适合快速迭代任务队列CeleryRedis稳定支持定时任务和分布式部署AI后端FastAPILangChain异步高性能LLM生态完善工作流引擎LangGraph支持循环、条件分支的复杂Agent工作流二、系统架构详解2.1 整体架构图plain复制┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 前端 (Vue3) │────▶│ 常规后端(Flask) │────▶│ MySQL │ │ Plotly.js图表 │ │ 业务逻辑/数据 │ │ 业务数据 │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ ▼ │ ┌─────────────────┐ │ │ Celery Worker │ │ │ 定时数据采集 │ │ └─────────────────┘ ▼ ┌─────────────────┐ ┌─────────────────┐ │ AI后端(FastAPI)│────▶│ Redis Cluster │ │ LangGraph引擎 │ │ 会话/配置/缓存 │ └─────────────────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ │ MCP工具链 │ │ feishu-mcp-server│ └─────────────────┘2.2 微服务拆分策略为什么AI后端要独立资源隔离LLM推理需要GPU/高内存与业务后端资源需求不同迭代速度AI逻辑变化快独立部署不影响稳定业务模型热切换支持运行时切换不同厂商的LLMDeepSeek/kimi/通义等三、核心模块实现3.1 LangGraph状态机设计根因分析不是单次LLM调用而是多步决策过程Python复制from langgraph.graph import StateGraph, END from typing import TypedDict, Annotated import operator class SPCState(TypedDict): messages: Annotated[list, operator.add] anomaly_type: str root_cause: str actions: list finished: bool # 定义节点 def detect_anomaly(state: SPCState): # 调用SPC判异准则 return {anomaly_type: check_spc_rules(data)} def analyze_cause(state: SPCState): # LLM分析根因 response llm.invoke(state[messages]) return {root_cause: response.content} def recommend_action(state: SPCState): # 生成处理建议 return {actions: [...]} # 构建图 workflow StateGraph(SPCState) workflow.add_node(detect, detect_anomaly) workflow.add_node(analyze, analyze_cause) workflow.add_node(recommend, recommend_action) workflow.set_entry_point(detect) workflow.add_edge(detect, analyze) workflow.add_edge(analyze, recommend) workflow.add_edge(recommend, END) app workflow.compile()3.2 MCP工具链集成MCPModel Context Protocol是Anthropic提出的开放标准让LLM能安全地调用外部工具。我实现的feishu-mcp-server核心代码Python复制from mcp.server import Server from mcp.types import Tool, TextContent app.list_tools() async def list_tools() - list[Tool]: return [ Tool( namesend_feishu_message, description发送消息到飞书群组, inputSchema{ type: object, properties: { message: {type: string}, title: {type: string} }, required: [message] } ) ] app.call_tool() async def call_tool(name: str, arguments: dict): if name send_feishu_message: result await send_to_feishu( webhookos.getenv(FEISHU_WEBHOOK_URL), messagearguments[message], titlearguments.get(title, 系统通知) ) return [TextContent(typetext, textf发送成功: {result})]关键设计容错机制生产环境中MCP服务器可能部分失效我实现了robust_mcp_client.pyPython复制class RobustMCPClient: async def call_tool(self, tool_name: str, arguments: dict): # 尝试所有可用的服务器 for server in self.available_servers: try: return await server.call_tool(tool_name, arguments) except Exception as e: logger.warning(fServer {server.name} failed: {e}) continue raise AllServersFailed(所有MCP服务器均不可用)3.3 前端实时数据流使用streamHTTP实现AI流式输出TypeScript复制// 前端Vue组件 const eventSource new EventSource(/api/ai/stream?session_id${id}); eventSource.onmessage (event) { const data JSON.parse(event.data); if (data.type thinking) { thinkingContent.value data.content; } else if (data.type tool_call) { toolCalls.value.push(data.tool); } else if (data.type final) { finalAnswer.value data.content; } };四、生产环境部署4.1 Docker Compose配置支持并推荐使用K8S/K3S进行容器化部署4.2 性能优化经验数据库优化SPC数据按时间分区保留最近2年热数据控制图数据预聚合避免实时计算百万级原始点AI后端优化LLM响应流式输出首字节时间500ms常用查询结果缓存到Redis命中率85%前端优化Plotly.js启用gl2d渲染模式10万点流畅缩放虚拟滚动处理长周期数据五、开源与贡献Gitee仓库前端https://gitee.com/valleyfo/webspc-frontend后端https://gitee.com/valleyfo/webspc-backendAI引擎https://gitee.com/valleyfo/webspc-ai飞书MCPhttps://gitee.com/valleyfo/feishu-mcp-server技术交流邮箱wynmamtf163.com微信valleyfoMIT协议开源欢迎PR和Issue。六、总结WebSPC验证了LLM传统工业软件的可行性LangGraph让AI具备复杂推理能力不只是简单问答MCP协议让AI能安全地执行实际操作从参谋变成副驾微服务架构保证系统可维护性和可扩展性工业软件的AI化不是简单的ChatGPT套壳而是需要深入理解业务场景设计合理的Agent工作流和工具链。#人工智能 #Python #Vue #工业软件 #开源项目 #LangChain #SPC #质量管理