【LangGraph】Integrate LangGraph into a React app：将 LangGraph 集成到你的 React 应用示例

AI小编 · 发表于 9 小时前

作者：彬彬侠
如何将 LangGraph 集成到你的 React 应用（How to integrate LangGraph into your React application）

预备知识

LangGraph PlatformLangGraph Server

useStream() React 钩子提供了一种无缝的方式，将 LangGraph 集成到你的 React 应用中。它处理了流式传输、状态管理和分支逻辑的所有复杂性，让你可以专注于构建出色的聊天体验。
主要功能：

消息流式传输

自动状态管理

对话分支

与 UI 无关的设计

让我们探索如何在你的 React 应用中使用 useStream()。
useStream() 为创建定制的聊天体验提供了坚实的基础。对于预构建的聊天组件和界面，我们还推荐查看 CopilotKit 和 assistant-ui。
安装

npminstall @langchain/langgraph-sdk @langchain/core

复制代码

示例

"use client";
import { useStream } from "@langchain/langgraph-sdk/react";
import type { Message } from "@langchain/langgraph-sdk";
export default function App() {
const thread = useStream<{ messages: Message[] }>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
return (
<div>
<div>
{thread.messages.map((message) => (
<div key={message.id}>{message.content as string}</div>
))}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const message = new FormData(form).get("message") as string;
form.reset();
thread.submit({ messages: [{ type: "human", content: message }] });
}}
>
<input type="text" name="message" />
{thread.isLoading ? (
<button key="stop" type="button" onClick={() => thread.stop()}>
Stop
</button>
) : (
<button key="submit" type="submit">Send</button>
)}
</form>
</div>
);
}

复制代码

自定义你的 UI

useStream() 钩子在后台处理所有复杂的状态管理，为你提供简单的接口来构建 UI。以下是你开箱即用的功能：

以下是如何有效使用这些功能的示例：
加载状态

isLoading 属性告诉你何时有活跃的流，使你能够：

export default function App() {
const { isLoading, stop } = useStream<{ messages: Message[] }>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
return (
<form>
{isLoading && (
<button key="stop" type="button" onClick={() => stop()}>
Stop
</button>
)}
</form>
);
}

复制代码

线程管理

通过内置的线程管理跟踪对话。你可以访问当前线程 ID，并在创建新线程时收到通知：

const [threadId, setThreadId] = useState<string | null>(null);
const thread = useStream<{ messages: Message[] }>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
threadId: threadId,
onThreadId: setThreadId,
});

复制代码

我们建议将 threadId 存储在 URL 的查询参数中，以便用户在页面刷新后可以恢复对话。
消息处理

useStream() 钩子会跟踪从服务器接收的消息片段，并将它们拼接在一起形成完整消息。完成的消息片段可以通过 messages 属性检索。
默认情况下，messagesKey 设置为 messages，新消息片段将追加到 values["messages"] 中。如果你的消息存储在不同的键下，可以更改 messagesKey 的值。

import type { Message } from "@langchain/langgraph-sdk";
import { useStream } from "@langchain/langgraph-sdk/react";
export default function HomePage() {
const thread = useStream<{ messages: Message[] }>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
return (
<div>
{thread.messages.map((message) => (
<div key={message.id}>{message.content as string}</div>
))}
</div>
);
}

复制代码

在底层，useStream() 钩子使用 streamMode: "messages-tuple" 从图节点内的任何 LangChain 聊天模型调用接收消息流（即单个 LLM 令牌）。了解更多关于消息流式传输的信息，请参见流式传输指南。
中断

useStream() 钩子暴露了 interrupt 属性，其中包含线程的最后一次中断。你可以使用中断来：

了解更多关于中断的信息，请参见如何处理中断指南。

const thread = useStream<{ messages: Message[] }, { InterruptType: string }>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
if (thread.interrupt) {
return (
<div>
已中断！{thread.interrupt.value}
<button
type="button"
onClick={() => {
// `resume` 可以是代理接受的任何值
thread.submit(undefined, { command: { resume: true } });
}}
>
Resume
</button>
</div>
);
}

复制代码

分支

对于每条消息，你可以使用 getMessagesMetadata() 获取消息首次出现的第一个检查点。然后，你可以从首次出现检查点之前的检查点创建新的运行，以在线程中创建新的分支。
分支可以通过以下方式创建：

"use client";
import type { Message } from "@langchain/langgraph-sdk";
import { useStream } from "@langchain/langgraph-sdk/react";
import { useState } from "react";
function BranchSwitcher({
branch,
branchOptions,
onSelect,
}: {
branch: string | undefined;
branchOptions: string[] | undefined;
onSelect: (branch: string) => void;
}) {
if (!branchOptions || !branch) return null;
const index = branchOptions.indexOf(branch);
return (
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => {
const prevBranch = branchOptions[index - 1];
if (!prevBranch) return;
onSelect(prevBranch);
}}
>
Prev
</button>
<span>
{index + 1} / {branchOptions.length}
</span>
<button
type="button"
onClick={() => {
const nextBranch = branchOptions[index + 1];
if (!nextBranch) return;
onSelect(nextBranch);
}}
>
Next
</button>
</div>
);
}
function EditMessage({
message,
onEdit,
}: {
message: Message;
onEdit: (message: Message) => void;
}) {
const [editing, setEditing] = useState(false);
if (!editing) {
return (
<button type="button" onClick={() => setEditing(true)}>
Edit
</button>
);
}
return (
<form
onSubmit={(e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const content = new FormData(form).get("content") as string;
form.reset();
onEdit({ type: "human", content });
setEditing(false);
}}
>
<input name="content" defaultValue={message.content as string} />
<button type="submit">Save</button>
</form>
);
}
export default function App() {
const thread = useStream({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
return (
<div>
<div>
{thread.messages.map((message) => {
const meta = thread.getMessagesMetadata(message);
const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;
return (
<div key={message.id}>
<div>{message.content as string}</div>
{message.type === "human" && (
<EditMessage
message={message}
onEdit={(message) =>
thread.submit(
{ messages: [message] },
{ checkpoint: parentCheckpoint }
)
}
/>
)}
{message.type === "ai" && (
<button
type="button"
onClick={() =>
thread.submit(undefined, { checkpoint: parentCheckpoint })
}
>
<span>Regenerate</span>
</button>
)}
<BranchSwitcher
branch={meta?.branch}
branchOptions={meta?.branchOptions}
onSelect={(branch) => thread.setBranch(branch)}
/>
</div>
);
})}
</div>
<form
onSubmit={(e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const message = new FormData(form).get("message") as string;
form.reset();
thread.submit({ messages: [message] });
}}
>
<input type="text" name="message" />
{thread.isLoading ? (
<button key="stop" type="button" onClick={() => thread.stop()}>
Stop
</button>
) : (
<button key="submit" type="submit">
Send
</button>
)}
</form>
</div>
);
}

复制代码

对于高级用例，你可以使用 experimental_branchTree 属性获取线程的树形表示，用于为非基于消息的图渲染分支控件。
乐观更新

你可以在向代理执行网络请求之前乐观更新客户端状态，从而为用户提供即时反馈，例如在代理看到请求之前立即显示用户消息。

const stream = useStream({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});
const handleSubmit = (text: string) => {
const newMessage = { type: "human" as const, content: text };
stream.submit(
{ messages: [newMessage] },
{
optimisticValues(prev) {
const prevMessages = prev.messages ?? [];
const newMessages = [...prevMessages, newMessage];
return { ...prev, messages: newMessages };
},
}
);
};

复制代码

TypeScript

useStream() 钩子对 TypeScript 应用非常友好，你可以为状态指定类型，以获得更好的类型安全性和 IDE 支持。

// 定义你的类型
type State = {
messages: Message[];
context?: Record<string, unknown>;
};
// 在钩子中使用它们
const thread = useStream<State>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});

复制代码

你还可以选择为不同场景指定类型，例如：

const thread = useStream<
State,
{
UpdateType: {
messages: Message[] | Message;
context?: Record<string, unknown>;
};
InterruptType: string;
CustomEventType: {
type: "progress" | "debug";
payload: unknown;
};
ConfigurableType: {
model: string;
};
}
>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});

复制代码

如果你使用 LangGraph.js，你还可以重用图的注解类型。但请确保仅导入注解模式的类型，以避免导入整个 LangGraph.js 运行时（即通过 import type { ... } 指令）。

import {
Annotation,
MessagesAnnotation,
type StateType,
type UpdateType,
} from "@langchain/langgraph/web";
const AgentState = Annotation.Root({
...MessagesAnnotation.spec,
context: Annotation<string>(),
});
const thread = useStream<
StateType<typeof AgentState.spec>,
{ UpdateType: UpdateType<typeof AgentState.spec> }
>({
apiUrl: "http://localhost:2024",
assistantId: "agent",
messagesKey: "messages",
});

复制代码

事件处理

useStream() 钩子提供了多个回调选项，帮助你响应不同事件：

Learn More

JS/TS SDK Reference

总结

集成机制

核心功能：
- 基本用法：
- 高级功能：
使用建议：
注意事项：

参考资料：

原文地址：https://blog.csdn.net/u013172930/article/details/148141472

25位大厂高管转战生成式AI创业！吸金猛，不

【LangGraph】Integrate LangGraph into a React app：将 LangGraph 集成到你的 React 应用示例

【开源啦！】Langchain官方文档中文翻译项

关于我们

产品与服务

解决方案

产品与服务

25位大厂高管转战生成式AI创业！吸金猛，不

【LangGraph】Integrate LangGraph into a React app：将 LangGraph 集成到你的 React 应用 示例

【开源啦！】Langchain官方文档中文翻译项

关于我们

产品与服务

解决方案

产品与服务

【LangGraph】Integrate LangGraph into a React app：将 LangGraph 集成到你的 React 应用示例