17、LangChain 前端：简介

介绍如何为createAgent构建的智能代理开发富交互前端，涵盖架构设计、核心模式、高级流处理及集成方案。

一、概述

LangChain Frontend 提供了一套完整的方案，帮助开发者为createAgent构建的智能代理快速搭建实时流交互的生成式 UI。无论是基础的消息渲染，还是复杂的人机协同审批、时间旅行调试等高级流程，都能通过标准化模式实现。

核心优势：

• 跨框架支持（React/Vue/Svelte/Angular）
• 实时流数据同步（消息、工具调用、中断状态等）
• 丰富的预设 UI 模式
• 兼容主流组件库和生成式 UI 框架

二、架构设计

所有前端模式均遵循统一架构，核心分为「后端代理流」和「前端状态管理」两部分：

2.1 架构流程图

后端：createAgent → 编译 LangGraph 图 → 暴露 Streaming API ↓ 前端：useStream 钩子 → 连接 API → 响应式状态 → 任意框架渲染

2.2 后端实现（Python）

通过createAgent构建代理并启用 checkpoint 持久化，确保流状态可恢复：

fromlangchainimportcreate_agentfromlanggraph.checkpoint.memoryimportMemorySaver# 初始化智能代理（支持 OpenAI/Anthropic 等模型）agent=create_agent(model="openai:gpt-5.4",# 模型指定（格式：提供商:模型名）tools=[get_weather,search_web],# 绑定工具集checkpointer=MemorySaver(),# 启用状态持久化)

2.3 前端钩子（多框架支持）

useStream钩子封装了流连接逻辑，提供统一的响应式状态，支持主流前端框架：

// Reactimport{useStream}from"@langchain/react";// Vueimport{useStream}from"@langchain/vue";// Svelteimport{useStream}from"@langchain/svelte";// Angularimport{useStream}from"@langchain/angular";

三、核心开发模式

3.1 渲染消息与输出

3.1.1 Markdown 消息

解析并渲染流式传输的 Markdown 内容，支持代码高亮、表格、列表等格式。

3.1.2 结构化输出

将代理的类型化响应（如 JSON 数据）渲染为自定义 UI 组件，而非纯文本。

3.1.3 推理过程可视化

将模型的思考过程（Reasoning Tokens）显示为可折叠区块，提升交互透明度。

3.1.4 生成式 UI

通过json-render从自然语言提示中直接生成用户界面组件。

3.2 显示代理操作

3.2.1 工具调用可视化

将工具调用结果封装为类型安全的 UI 卡片，支持加载状态、错误提示、结果展示等场景。

3.2.2 人机协同审批（Human-in-the-loop）

在代理执行关键操作前暂停，提供「批准/拒绝/编辑」工作流，支持人工干预。

3.3 管理对话

3.3.1 分支聊天

支持编辑历史消息、重新生成响应、切换对话分支，提升交互灵活性。

3.3.2 消息队列

支持批量提交多条消息，代理将按顺序处理，避免并发冲突。

3.4 高级流处理

3.4.1 流连接与重连

支持断开后重新连接运行中的代理流，不丢失已有进度。

3.4.2 时间旅行

查看对话历史中的任意检查点（Checkpoint），支持从指定节点恢复对话。

四、集成方案

useStream钩子是 UI 无关的，可与任意组件库或生成式 UI 框架集成：

4.1 AI Elements

LangChain 官方提供的shadcn/ui可组合组件库，包含：

• Conversation：对话容器
• Message：消息气泡
• Tool：工具调用卡片
• Reasoning：推理过程折叠面板

4.2 assistant-ui

无头 React 框架，内置：

• 对话线程管理
• 分支聊天支持
• 附件上传/下载功能

4.3 OpenUI

生成式 UI 库，通过openui-lang组件 DSL，快速构建数据密集型报表和仪表盘。