@assistant-ui/react-langgraph

兰格夫 合并 @assistant-ui/react. 将 LangGraph 流包在一个助理- ui 运行时间中, 有线条持续, 中断, 和消息连接事件 .

安装

npm install @assistant-ui/react @assistant-ui/react-langgraph @langchain/langgraph-sdk

使用量

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
import { createThread, sendMessage, getThreadState } from "@/lib/chatApi";

export function Provider({ children }: { children: React.ReactNode }) {
  const runtime = useLangGraphRuntime({
    stream: async function* (messages, { initialize, ...config }) {
      const { externalId } = await initialize();
      yield* sendMessage({ threadId: externalId!, messages, config });
    },
    create: async () => {
      const { thread_id } = await createThread();
      return { externalId: thread_id };
    },
    load: async (externalId) => {
      const state = await getThreadState(externalId);
      return { messages: state.values.messages ?? [], interrupts: [] };
    },
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

另见

• @assistant-ui/react-langchain 目标 @langchain/react是因为 useStream如果那是你已经使用的SDK,就选它.

完整 API 引用时间 助理-ui.com/docs/运行时间/朗格图。见 examples/with-langgraph 一个完整的应用程序.