LangGraph 与 Streamlit 集成：实时展示多智能体执行状态

1. 标题选项核心关键词：LangGraph、Streamlit、多智能体、实时可观测性、执行状态可视化《从0到1：LangGraph + Streamlit 打造可观测的多智能体实时运行面板》《多智能体开发不再黑盒！手把手教你用Streamlit可视化LangGraph执行全流程》《LangGraph实战：集成Streamlit实现多智能体状态的秒级同步展示》《告别盲调！用Streamlit实时监控LangGraph多智能体的每一步执行》2. 引言痛点引入你有没有过这样的经历：花了两三天时间搭好了一个基于LangGraph的多智能体系统，包含了调研、写作、审核、工具调用等十几个节点，运行之后却只能看到最终输出，完全不知道中间发生了什么：智能体是不是卡在了工具调用？大模型返回的结果是不是不符合预期？路由逻辑是不是跳错了节点？排错的时候只能疯狂加print日志，翻控制台翻到眼瞎，要是想给客户做个Demo，总不能让客户看黑框里的日志吧？这几乎是所有多智能体开发者都会遇到的痛点：多智能体的执行过程是完全的黑盒，缺乏直观的实时可观测能力。文章内容概述本文将带你从零开始，把目前最流行的多智能体编排框架LangGraph和Python快速Web开发框架Streamlit结合起来，搭建一个完整的、可交互的多智能体实时状态展示面板。我们会从基础概念讲起，一步步实现：双智能体业务逻辑开发、Streamlit可视化布局搭建、LangGraph执行事件实时捕获、状态同步渲染、自定义交互功能（暂停/干预/终止）等核心能力，最终得到一个可以直接用于内部调试、客户Demo的可观测多智能体应用。读者收益读完本文你将能够：彻底理解LangGraph的事件流机制和状态流转逻辑独立完成LangGraph与Streamlit的集成，实现多智能体执行过程的秒级可视化掌握多智能体可观测性的核心实现思路，能根据业务需求自定义可视化维度用不到200行代码做出一个可以直接演示的多智能体Demo面板3. 准备工作技术栈/知识要求具备Python 3.10+的基础开发能力，熟悉异步编程基本概念了解LangChain的核心概念（智能体、工具、链、消息体系）对LangGraph有基础认知（没有接触过也没关系，本文会做核心概念扫盲）拥有可用的大模型API Key（支持OpenAI、通义千问、Claude、DeepSeek等所有LangChain兼容的大模型）环境/工具要求本地已安装Python 3.10及以上版本，pip包管理器代码编辑器（推荐VS Code）科学上网环境（如果使用OpenAI模型的话）4. 核心内容：手把手实战步骤一：核心概念扫盲与环境安装4.1.1 核心概念解析首先我们要搞清楚两个核心框架的定位、核心能力，以及两者结合的价值，我们先做一个核心属性对比：对比维度LangGraphStreamlit核心定位多智能体编排框架，专门解决复杂的、带循环/分支/状态持久化的智能体流程编排Python低代码Web框架，快速搭建交互式数据应用，无需前端开发经验核心能力状态持久化、条件路由、节点中断、事件流输出、多智能体协作组件化UI、Session状态管理、实时渲染、异步支持、一键部署适用场景复杂多智能体业务逻辑开发、Agent工作流编排快速Demo搭建、内部调试工具、数据可视化面板、轻量级用户应用学习成本中等，需要理解状态流转、节点/边的定义逻辑极低，几行代码就能出页面扩展性极高，支持自定义节点、自定义检查点存储、分布式部署中等，适合中小规模应用，大规模高并发场景需要配合其他框架两者的交互关系我们用Mermaid架构图表示：渲染错误:Mermaid 渲染失败: Parse error on line 2: ...iagram USER ||--o STREAMLIT : 输入配置/触 ----------------------^ Expecting 'ZERO_OR_ONE', 'ZERO_OR_MORE', 'ONE_OR_MORE', 'ONLY_ONE', 'MD_PARENT', got 'UNICODE_TEXT'4.1.2 为什么要做两者集成？多智能体系统的核心价值是可解释、可干预、可观测，而LangGraph本身只负责逻辑编排，没有可视化能力；Streamlit刚好弥补了这个短板，不需要写一行HTML/CSS/JS，就能快速实现实时的状态展示和交互能力，两者结合刚好覆盖了「多智能体逻辑开发 + 可视化交付」的全流程，是目前最快实现可观测多智能体应用的技术栈。4.1.3 环境安装首先我们创建一个新的项目目录，然后安装所有需要的依赖包：# 创建项目目录mkdirlanggraph-streamlit-democdlanggraph-streamlit-demo# 安装核心依赖pipinstalllanggraph==0.2.14langchain==0.2.14 langchain-openai==0.1.22streamlit==1.37.1 python-dotenv==1.0.0# 验证安装python-c"import langgraph, streamlit; print('依赖安装成功，LangGraph版本：', langgraph.__version__, 'Streamlit版本：', streamlit.__version__)"依赖包说明：langgraph：多智能体编排核心框架langchain：LangGraph的基础依赖，提供智能体、工具、大模型封装langchain-openai：OpenAI模型的LangChain封装，也可以替换为其他大模型的包streamlit：Web可视化框架python-dotenv：读取.env配置文件，存储API Key等敏感信息步骤二：开发LangGraph多智能体业务逻辑我们先实现一个简单的双智能体场景：科研助手多智能体，包含两个智能体：研究员智能体：负责根据用户的问题检索相关资料，判断资料是否足够回答问题写作员智能体：负责根据研究员收集的资料撰写完整的报告整个流程的状态转移逻辑我们用公式表示：S t + 1 = f ( S t , A t , O t ) S_{t+1} = f(S_t, A_t, O_t)St+1​=f(St​,At​,Ot​)其中：S t S_tSt​表示t时刻的全局状态，包含历史消息、收集的资料、当前草稿、执行步骤等信息A t A_tAt​表示t时刻执行的智能体动作（研究员检索/写作员撰写）O t O_tOt​表示t时刻大模型/工具返回的观测结果f ff是LangGraph的状态转移函数，根据当前状态和动作输出新的状态整个流程的算法流程图如下：