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 核心概念解析
首先我们要搞清楚两个核心框架的定位、核心能力，以及两者结合的价值，我们先做一个核心属性对比：
| 对比维度 | LangGraph | Streamlit |
|---|---|---|
| 核心定位 | 多智能体编排框架，专门解决复杂的、带循环/分支/状态持久化的智能体流程编排 | Python低代码Web框架，快速搭建交互式数据应用，无需前端开发经验 |
| 核心能力 | 状态持久化、条件路由、节点中断、事件流输出、多智能体协作 | 组件化UI、Session状态管理、实时渲染、异步支持、一键部署 |
| 适用场景 | 复杂多智能体业务逻辑开发、Agent工作流编排 | 快速Demo搭建、内部调试工具、数据可视化面板、轻量级用户应用 |
| 学习成本 | 中等，需要理解状态流转、节点/边的定义逻辑 | 极低，几行代码就能出页面 |
| 扩展性 | 极高，支持自定义节点、自定义检查点存储、分布式部署 | 中等，适合中小规模应用，大规模高并发场景需要配合其他框架 |
两者的交互关系我们用Mermaid架构图表示：
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的状态转移函数，根据当前状态和动作输出新的状态
整个流程的算法流程图如下：