LangChain UI 演练场
探索适用于 LangChain 智能体应用的生产级 UI 模式 — 涵盖 React, Vue, Svelte 和 Angular。选择一个框架，浏览演示，并在编辑器中打开。
框架预览
每个模式都在四个前端框架中实现。选择一个标签页来浏览演示。
React
Tool Calling
将智能体工具调用渲染为富文本卡片 — 包括计算器、天气、搜索、邮件等。
Human in the Loop
智能体暂停并显示审批卡片，然后才执行敏感操作。
Generative UI
服务端驱动的动态 UI — 智能体发出结构化组件载荷，实时渲染。
Reasoning Tokens
可折叠的思维链区块，在最终答案之前流式输出思考 token。
Structured Output
智能体返回带类型的结构化数据，支持 LaTeX 数学渲染。
Time Travel
分支对话历史，使用 LangChain 状态从任意检查点回放。
Join / Rejoin
Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
Async Iterator Tools
使用异步迭代器流式输出增量工具进度，带实时进度卡片。
Deep agent — Subagent Cards
用于深度研究风格多智能体编排的层级活动卡片。
Deep agent — Todo List
智能体在执行长时间任务时构建并勾选实时待办清单。
Deep agent — Sandbox
类 IDE 的 UI，包含文件浏览器、代码查看器和差异面板，后端由沙盒环境支持。
Graph Execution Cards
时间线卡片，实时可视化 LangGraph 每个节点执行过程。
Markdown Messages
在聊天气泡中渲染富文本 Markdown，支持语法高亮代码块。
Branching Chat
完整的聊天界面，一流的分支导航和历史遍历功能。
Message Queues
可视化多步骤智能体流水线的消息队列状态和吞吐量。
Subagent Streaming
同时流式输出多个并行子智能体的输出，带隔离窗口。
Vue
Tool Calling
将智能体工具调用渲染为富文本卡片 — 包括计算器、天气、搜索、邮件等。
Human in the Loop
智能体暂停并显示审批卡片，然后才执行敏感操作。
Generative UI
服务端驱动的动态 UI — 智能体发出结构化组件载荷，实时渲染。
Reasoning Tokens
可折叠的思维链区块，在最终答案之前流式输出思考 token。
Structured Output
智能体返回带类型的结构化数据，支持 LaTeX 数学渲染。
Time Travel
分支对话历史，使用 LangChain 状态从任意检查点回放。
Join / Rejoin
Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
Async Iterator Tools
使用异步迭代器流式输出增量工具进度，带实时进度卡片。
Deep agent — Subagent Cards
用于深度研究风格多智能体编排的层级活动卡片。
Deep agent — Todo List
智能体在执行长时间任务时构建并勾选实时待办清单。
Deep agent — Sandbox
类 IDE 的 UI，包含文件浏览器、代码查看器和差异面板，后端由沙盒环境支持。
Graph Execution Cards
时间线卡片，实时可视化 LangGraph 每个节点执行过程。
Markdown Messages
在聊天气泡中渲染富文本 Markdown，支持语法高亮代码块。
Branching Chat
配备一流分支导航和历史遍历功能的完整聊天界面。
Message Queues
可视化多步骤智能体流水线的消息队列状态和吞吐量。
Subagent Streaming
同时流式输出多个并行子智能体的内容，使用独立窗口隔离。
Svelte
Tool Calling
将智能体工具调用渲染为丰富的卡片——计算器、天气、搜索、邮件等。
Human in the Loop
智能体在执行敏感操作前暂停并弹出审批卡片。
Generative UI
服务器驱动的动态UI——智能体发出结构化组件载荷并实时渲染。
Reasoning Tokens
可折叠的思维链块，在最终答案前流式输出思考标记。
Structured Output
智能体返回带类型的结构化数据，支持LaTeX数学渲染。
Time Travel
使用LangChain状态从任意检查点分支对话历史并回放。
Join / Rejoin
Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
Async Iterator Tools
使用异步迭代器流式输出增量工具进度，并配有实时进度卡片。
Deep agent — Subagent Cards
用于深度研究风格多子智能体编排的分层活动卡片。
Deep agent — Todo List
智能体在执行长时间任务时构建并勾选实时待办清单。
Deep agent — Sandbox
类IDE界面，配有文件浏览器、代码查看器和差异面板，后端为沙箱环境。
Graph Execution Cards
时间线卡片，实时可视化LangGraph各节点的执行过程。
Markdown Messages
在聊天气泡内渲染带语法高亮代码块的富文本Markdown。
Branching Chat
配备一流分支导航和历史遍历功能的完整聊天界面。
Message Queues
可视化多步骤智能体流水线的消息队列状态和吞吐量。
Subagent Streaming
同时流式输出多个并行子智能体的内容，使用独立窗口隔离。
Angular
Tool Calling
将智能体工具调用渲染为丰富的卡片——计算器、天气、搜索、邮件等。
Human in the Loop
智能体在执行敏感操作前暂停并弹出审批卡片。
Generative UI
服务器驱动的动态UI——智能体发出结构化组件载荷并实时渲染。
Reasoning Tokens
可折叠的思维链块，在最终答案前流式输出思考标记。
Structured Output
智能体返回带类型的结构化数据，支持LaTeX数学渲染。
Time Travel
使用LangChain状态从任意检查点分支对话历史并回放。
Join / Rejoin
Visualize fan-out/fan-in parallel subgraph execution with merge indicators.
Async Iterator Tools
使用异步迭代器流式输出增量工具进度，并配有实时进度卡片。
Deep agent — Subagent Cards
用于深度研究风格多子智能体编排的分层活动卡片。
Deep agent — Todo List
智能体在执行长时间任务时构建并勾选实时待办清单。
Deep agent — Sandbox
类IDE界面，配有文件浏览器、代码查看器和差异面板，后端为沙箱环境。
Graph Execution Cards
时间线卡片，实时可视化LangGraph各节点的执行过程。
Markdown Messages
在聊天气泡内渲染带语法高亮代码块的富文本Markdown。
Branching Chat
配备一流分支导航和历史遍历功能的完整聊天界面。
Message Queues
可视化多步骤智能体流水线的消息队列状态和吞吐量。
Subagent Streaming
同时流式输出多个并行子智能体的内容，使用独立窗口隔离。
UI框架集成
开箱即用的即插即用UI组件库 @langchain/react 。
ai-elements
用于构建AI聊天UI的无头可组合React组件。使用useStream under the hood with full shadcn/ui compatibility. - 滚动吸附式会话容器 - 带语法高亮的流式代码块 - Collapsible reasoning / thinking blocks - 工具调用显示（参数和结果） - Shimmer 加载状态和建议气泡
assistant-ui
使用构建的 Claude 风格助手 UI @assistant-ui/react 通过连接到 LangChain 的基础组件 useExternalStoreRuntime. - Claude 风格暖色调羊皮纸主题 - 链式思维可折叠推理 - 图片附件支持 - Copy / thumbs-up / thumbs-down action bar - 完整深色模式支持
OpenUI
生成式 UI 聊天，LangChain 代理在消息流中输出任意 React 组件——在浏览器中实时渲染 - 代理驱动的动态组件渲染 - 流式消息组合 - 自定义组件注册表 - 生成界面的实时预览
Open preview