@assistant-ui/react-langgraph#

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>
  );
}