LangChain 与 LangGraph 前端流式支持
LangChain 与 LangGraph 提供了强大的前端流式支持,主要通过 React Hook useStream 实现。该 Hook 与 LangGraph 的流式功能无缝集成,处理流式传输、状态管理以及分支逻辑的复杂性,帮助开发者专注于构建优秀的生成式 UI 体验。
useStream 的核心特性包括:
- 消息流式传输:处理消息片段流,形成完整消息。
- 自动状态管理:管理消息、中断、加载状态和错误。
- 对话分支:从聊天历史中的任意点创建备用对话路径。
- UI 无关设计:支持自定义组件和样式。
安装
在 React 应用中使用 useStream Hook 前,需要安装 LangGraph SDK:
pip install langgraph-sdk # Python 环境
npm install @langchain/langgraph-sdk # 前端环境
useStream 可连接本地运行的 LangGraph 图,或通过 LangSmith 部署的生产环境。
基本用法
import { useStream } from "@langchain/langgraph-sdk/react";
function Chat() {
const stream = useStream({
assistantId: "agent",
// 本地开发
apiUrl: "http://localhost:2024",
// 生产部署(LangSmith 托管)
// apiUrl: "https://your-deployment.us.langgraph.app"
});
const handleSubmit = (message: string) => {
stream.submit({
messages: [
{ content: message, type: "human" }
]
});
};
return (
<div>
{stream.messages.map((message, idx) => (
{message.type}:{message.content}
))}
{stream.isLoading && Loading...}
{stream.error && Error:{stream.error.message}}
);
}

