Function useStream

Example

// In your agent file (e.g., agent.ts)
import { createAgent, tool } from "langchain";
import { z } from "zod";

const getWeather = tool(
  async ({ location }) => `Weather in ${location}`,
  { name: "get_weather", schema: z.object({ location: z.string() }) }
);

export const agent = createAgent({
  model: "openai:gpt-4o",
  tools: [getWeather],
});

// In your React component
import { agent } from "./agent";

function Chat() {
  // Tool calls are automatically typed from the agent's tools!
  const stream = useStream<typeof agent>({
    assistantId: "agent",
    apiUrl: "http://localhost:2024",
  });

  // stream.toolCalls[0].call.name is typed as "get_weather"
  // stream.toolCalls[0].call.args is typed as { location: string }
}
Copy

Usage with StateGraph (for custom LangGraph applications)

When building custom graphs with StateGraph, embed your tool call types directly in your state's messages property using Message<MyToolCalls>:

Example

import { Message } from "@langchain/langgraph-sdk";

// Define your tool call types as a discriminated union
type MyToolCalls =
  | { name: "search"; args: { query: string }; id?: string }
  | { name: "calculate"; args: { expression: string }; id?: string };

// Embed tool call types in your state's messages
interface MyGraphState {
  messages: Message<MyToolCalls>[];
  context?: string;
}

function Chat() {
  const stream = useStream<MyGraphState>({
    assistantId: "my-graph",
    apiUrl: "http://localhost:2024",
  });

  // stream.values is typed as MyGraphState
  // stream.toolCalls[0].call.name is typed as "search" | "calculate"
}
Copy

Example

// With additional type configuration (interrupts, configurable)
interface MyGraphState {
  messages: Message<MyToolCalls>[];
}

function Chat() {
  const stream = useStream<MyGraphState, {
    InterruptType: { question: string };
    ConfigurableType: { userId: string };
  }>({
    assistantId: "my-graph",
    apiUrl: "http://localhost:2024",
  });

  // stream.interrupt is typed as { question: string } | undefined
}
Copy

Usage with Deep Agents (subagent streaming, experimental)

For agents that spawn subagents (nested graphs), use filterSubagentMessages to keep the main message stream clean while tracking subagent activity separately:

Example

import { useStream, SubagentStream } from "@langchain/langgraph-sdk/react";
import type { agent } from "./agent";

function DeepAgentChat() {
  const stream = useStream<typeof agent>({
    assistantId: "deepagent",
    apiUrl: "http://localhost:2024",
    // Filter subagent messages from main stream
    filterSubagentMessages: true,
  });

  const handleSubmit = (content: string) => {
    stream.submit(
      { messages: [{ content, type: "human" }] },
      { streamSubgraphs: true } // Enable subgraph streaming
    );
  };

  // Access subagent streams via stream.subagents (Map<string, SubagentStream>)
  const subagentList = [...stream.subagents.values()];

  return (
    <div>
      {stream.messages.map((msg) => <Message key={msg.id} message={msg} />)}

      {subagentList.map((subagent) => (
        <SubagentCard
          key={subagent.id}
          status={subagent.status} // "pending" | "running" | "complete" | "error"
          messages={subagent.messages}
          toolCalls={subagent.toolCalls}
        />
      ))}
    </div>
  );
}
Copy