LangChain useStream

Use native graph state, messages and interrupts without another transcript store.

Bind the React hook

Install @langchain/react@1.2.9 and its native peers; see checked versions and view setup. Supply your deployed graph's apiUrl, assistantId and native thread ID. Keep credentials in your application proxy.

langchain-conversation.tsx

12345678910111213141516171819202122232425import { useState } from "react";
import { Button } from "@ghost-ui/core/components/button";
import { useStream } from "@langchain/react";
import { createLangChainAdapter } from "@ghost-ui/core/chat-adapter-langchain";
import { useChatAdapter } from "@ghost-ui/core/chat-runtime-react";
import { Message, MessageBody } from "@ghost-ui/core/components/message";
import { MessageParts } from "@ghost-ui/core/components/message-parts";
const adapter = createLangChainAdapter();
export function LangChainConversation({ apiUrl, assistantId, threadId, revision }: {
  apiUrl: string; assistantId: string; threadId: string; revision: number;
}) {
  const stream = useStream({ apiUrl, assistantId, threadId });
  const runtime = useChatAdapter(adapter, stream, { identity: { threadId, revision } });
  const [error, setError] = useState<unknown>();
  return <>
    {runtime.messages.map(message => <Message key={message.id} actor={message.actor}><MessageBody>
      <MessageParts parts={message.parts} />
    </MessageBody></Message>)}
    <Button disabled={runtime.capabilities.send.support !== "supported" || !runtime.capabilities.send.available}
      onClick={() => { setError(undefined); void Promise.resolve().then(() => runtime.controller.send({ text: "Review the brief", attachments: [] })).catch(setError); }}>Review brief</Button>
    {runtime.capabilities.stop.support === "supported" && runtime.capabilities.stop.available &&
      <Button onClick={() => { void Promise.resolve().then(() => runtime.controller.stop?.()).catch(setError); }}>Stop</Button>}
    {(error || runtime.controller.error) ? <p role="alert">The request could not complete.</p> : null}
  </>;
}

The adapter reads actual BaseMessage instances or serialized messages, including tool IDs and removal records. It binds text send to native submit({ messages: [...] }) and stop to native stop(). Compose Composer with runtime.controller for input; the native hook remains available in the same component.

Fork and resume deliberately

langchain-native-commands.ts

1234567import type { UseStreamReturn } from "@langchain/react";
export function forkAt(stream: UseStreamReturn, checkpointId: string, text: string) {
  return stream.submit({ messages: [{ type: "human", id: crypto.randomUUID(), content: text }] }, { forkFrom: checkpointId });
}
export function resumeInterrupt(stream: UseStreamReturn, interruptId: string, response: unknown) {
  return stream.respond(response, { interruptId });
}

stream.values holds custom graph state; validate it for your application panel. isThreadLoading hydrates history and disables send; isLoading describes active work. Native stop() requests server cancellation; disconnect() stops observing without the same cancellation meaning. Checkpoint editing, branch navigation and typed interrupts remain native capabilities, not aliases for Ghost retry/edit/approval.

Troubleshooting

Missing IDs need a stable application getId mapping, not positional keys. Keep one hook owner per thread/revision, and preserve native checkpoint IDs across persistence. If you own the client outside React, use the direct LangGraph recipe. See LangChain frontend documentation for native configuration and reconnection.