Getting started

@langchain/react ships a useStream hook together with a small family of companion selector hooks. The root hook gives you always-on access to thread state, messages, tool calls, and interrupts; the selector hooks open ref-counted subscriptions for the things that aren't needed on every view (per-subagent messages, media streams, submission queue, message metadata, raw channels).

Learn more: For end-to-end tutorials and UI patterns, see the LangChain frontend documentation.

Installation

npm install @langchain/react @langchain/core

Peer dependencies: react (^18 || ^19) and @langchain/core.

Your first chat

Mount useStream once per thread. Point it at a running agent server and render messages:

import { useStream } from "@langchain/react";

function Chat() {
  const { messages, submit, isLoading } = useStream({
    assistantId: "agent",
    apiUrl: "http://localhost:2024",
  });

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={msg.id ?? i}>{String(msg.content)}</div>
      ))}

      <button
        disabled={isLoading}
        onClick={() => void submit({ messages: [{ type: "human", content: "Hello!" }] })}
      >
        Send
      </button>
    </div>
  );
}

Use the graph name from your langgraph.json as assistantId.

Mental model

@langchain/react splits the surface into two layers:

1. Root hook (useStream). Owns the thread lifecycle, the transport, and a handful of always-on projections: values, messages, toolCalls, interrupts, error, isLoading, and the subagent / subgraph discovery maps. Mount it once per thread.
2. Companion selector hooks. Each opens a ref-counted subscription when the first component mounts it and releases it when the last consumer unmounts. Use them for anything scoped to a namespace, a subagent / subgraph, a specific message, an extension channel, or a media stream.

import { useStream, useMessages, useSubmissionQueue } from "@langchain/react";

function Chat() {
  const stream = useStream({ assistantId: "agent", apiUrl: "/api" });

  // Root: free read, no new subscription.
  const messages = useMessages(stream); // same as stream.messages

  // Scoped: opens a subscription on mount.
  const queue = useSubmissionQueue(stream);
}

The key idea: views that don't render a subagent's messages never pay for that subagent's wire traffic. Subscriptions follow the React tree.

Runnable examples

The streaming cookbook collects end-to-end, runnable apps built on these hooks. Clone it and run any example from the typescript/ workspace:

Where to go next