langgraphjs Documentation

Technical Documentation: langchain-ai/langgraphjs

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`.changeset/README.md`) Copy Section

Changesets

Hello and welcome! This folder has been automatically generated by @changesets/cli, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it in our repository

We have a quick list of common questions to get you started engaging with this project in
our documentation

Overview (`examples/ai-elements/README.md`) Copy Section

AI Elements — Tool-Calling Agent Example

A self-contained chat interface built with AI Elements components and @langchain/react. It demonstrates how to build a production-quality agentic UI using AI Elements' composable component library.

What it shows Copy Chapter

• Tool call rendering — each tool invocation is displayed with Tool + ToolHeader + ToolContent + ToolInput + ToolOutput, updating live as the agent streams tool input and then the result.
• Reasoning display — when the model emits reasoning tokens, a collapsible Reasoning block auto-opens during streaming and collapses when done.
• Streaming messages — Message + MessageContent + MessageResponse renders streaming markdown via Streamdown with full GFM support.
• Loading skeleton — a Shimmer placeholder appears between the user's message and the first assistant token.
• Conversation scroll — Conversation + ConversationContent + ConversationScrollButton auto-scrolls and shows a jump-to-bottom button when you scroll up.
• Message actions — MessageActions + MessageAction with a copy button appears below the last assistant message once streaming completes.
• Prompt input — PromptInput + PromptInputBody + PromptInputTextarea + PromptInputFooter + PromptInputSubmit provides a full-featured input bar.
• Suggestions — Suggestions + Suggestion shows preset prompts before the first message.

Agent Copy Chapter

The backing LangGraph agent (packages/agents/src/agents/ai-elements.ts) is a createReactAgent with two simulated tools:

No external API keys are required for the tools.

Setup Copy Chapter

Create a .env file in this folder (optional — defaults are provided):

VITE_LANGGRAPH_API_URL=http://localhost:2024   # default when running locally
VITE_LANGGRAPH_ASSISTANT_ID=ai_elements         # matches langgraph.json

Run Copy Chapter

Start the LangGraph agent server first:

bun run dev --filter=@langchain/playground-agents

Then start this preview app:

bun run dev --filter=@langchain/playground-preview-ai-elements

Open http://localhost:4600.

AI Elements components used Copy Chapter

Components live in src/components/ai-elements/ and are owned by this package (shadcn/AI Elements registry style — copy-paste, not a node_modules import).

Vite path alias Copy Chapter

AI Elements components use bare src/ imports (e.g. import { cn } from "src/lib/utils"). The vite.config.ts maps src → ./src to resolve these correctly in both dev and production builds.

Overview (`examples/assistant-ui-claude/README.md`) Copy Section

Assistant-UI Claude Example

This example combines:

• @assistant-ui/react for the Claude-style chat surface
• @langchain/react for streaming LangGraph state on the frontend
• a basic langchain agent on the backend

What it shows Copy Chapter

• A Claude-inspired assistant-ui thread and composer
• A local single-agent graph powered by langchain
• How to bridge @langchain/react state into assistant-ui with useExternalStoreRuntime

Setup Copy Chapter

Create a local .env file in this folder with:

OPENAI_API_KEY=your_openai_api_key
OPENAI_MODEL=gpt-4.1-mini

Optional overrides:

LANGGRAPH_API_URL=http://localhost:2024
VITE_LANGGRAPH_API_URL=http://localhost:2024
VITE_LANGGRAPH_ASSISTANT_ID=assistant-ui-claude

Run Copy Chapter

pnpm --filter @examples/assistant-ui-claude dev

Then open the Vite URL shown in the terminal, usually
http://localhost:5173.

The frontend talks directly to the LangGraph dev server at
http://localhost:2024, which serves the local assistant-ui-claude graph from
langgraph.json.

Overview (`examples/streaming/README.md`) Copy Section

In-Process Streaming Examples

Runnable examples demonstrating graph.streamEvents(..., { version: "v3" }) — the ergonomic in-process
streaming API for LangGraph.

Setup Copy Chapter

# From the monorepo root
pnpm install

# Set your API key
export ANTHROPIC_API_KEY=sk-...

Examples Copy Chapter

Each example is a self-contained script that can be run with npx tsx.

`basic.ts` — Protocol event iteration Copy Section

The simplest starting point. Iterates all ProtocolEvent objects from a tool-calling
graph and awaits the final output.

npx tsx src/basic.ts

Shows: for await (const event of run), await run.output

`messages.ts` — Streaming text tokens Copy Section

Demonstrates the .messages projection. Each yielded ChatModelStream exposes
.text as both an AsyncIterable<string> (for token-by-token streaming) and a
PromiseLike<string> (for the full text). Also shows .usage for token counts.

npx tsx src/messages.ts

Shows: run.messages, message.text, message.usage

`subgraphs.ts` — Recursive subgraph observation Copy Section

A research pipeline with two sequential subgraphs (researcher → analyst). Shows
three ways to observe the subgraph tree:

1. Flat event stream — all events, dispatched by event.method
2. Subgraph discovery — run.subgraphs yields SubgraphRunStream per child
3. Concurrent consumption — messages and subgraphs consumed in parallel

npx tsx src/subgraphs.ts

Shows: run.subgraphs, sub.messages, sub.name, sub.index, recursive walking

`custom-reducer.ts` — Domain-specific projections Copy Section

Extends streamEvents(..., { version: "v3" }) with a custom StreamTransformer that counts tool calls and
tracks token usage. The transformer is passed via the transformers option; its
projections appear on run.extensions.

npx tsx src/custom-reducer.ts

Shows: StreamTransformer, graph.streamEvents(input, { version: "v3", transformers: [...] }), run.extensions

`parallel.ts` — Concurrent projection consumption Copy Section

All projections on GraphRunStream share local stream channels, so
multiple for await loops can run concurrently without interference. This
example streams messages, counts state snapshots, and counts raw protocol
events in parallel via Promise.all.

npx tsx src/parallel.ts

Shows: Promise.all([run.messages, run.values, run]), independent cursors

`human-in-the-loop.ts` — Interrupt, inspect, resume Copy Section

Demonstrates the streamEvents(..., { version: "v3" }) interrupt/resume lifecycle using a planner →
approval → executor graph. Turn 1 runs until interrupt() is called; the
example inspects run.interrupted and run.interrupts, then resumes with
Command({ resume }) in turn 2.

npx tsx src/human-in-the-loop.ts

Shows: interrupt(), run.interrupted, run.interrupts, Command({ resume }), multi-turn streamEvents(..., { version: "v3" })

`a2a.ts` — A2A protocol over a deployed server Copy Section

End-to-end deployment example for custom stream transformers. The research
pipeline is compiled with an A2A transformer (createA2ATransformer) that emits
A2A-formatted status updates and artifacts. The graph is deployed via the
LangGraph dev server, and the SDK client subscribes to the custom channel
to receive only A2A events.

npx tsx src/a2a.ts

Shows: .compile({ transformers: [createA2ATransformer] }), streamStateV2(), SDK client.runs.stream(), streamMode: ["custom"]

Agents Copy Chapter

The example agents live in src/agents/ and src/a2a/:

API Surface Copy Chapter

All examples use the GraphRunStream returned by
graph.streamEvents(..., { version: "v3" }):

const run = await graph.streamEvents(input, { ...options, version: "v3" });

// Iterate all protocol events
for await (const event of run) { ... }

// Stream AI messages with text/reasoning/usage projections
for await (const msg of run.messages) {
  for await (const token of msg.text) { process.stdout.write(token); }
  const fullText = await msg.text;
  const usage = await msg.usage;
}

// Observe subgraphs recursively
for await (const sub of run.subgraphs) {
  console.log(sub.name, sub.path);
  for await (const msg of sub.messages) { ... }
}

// Final output
const state = await run.output;

// State snapshots per step
for await (const snapshot of run.values) { ... }

// Messages from a specific node
for await (const msg of run.messagesFrom("agent")) { ... }

// Custom transformers
const run = await graph.streamEvents(input, {
  version: "v3",
  transformers: [myTransformer],
});
const custom = await run.extensions.myProjection;

// Human-in-the-loop
const run1 = await graph.streamEvents(input, { ...config, version: "v3" });
for await (const msg of run1.messages) { ... }
await run1.output;
if (run1.interrupted) {
  console.log(run1.interrupts);
  const run2 = await graph.streamEvents(
    new Command({ resume: userDecision }),
    { ...config, version: "v3" }
  );
}

Coming Soon Copy Chapter

Additional examples will be added for:

• createAgent — AgentRunStream with typed run.toolCalls
• createDeepAgent — DeepAgentRunStream with run.subagents
• Cancellation — run.abort(), AbortSignal passthrough

Overview (`examples/ui-multimodal/README.md`) Copy Section

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler Copy Chapter

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration Copy Chapter

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

Overview (`examples/ui-react/README.md`) Copy Section

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler Copy Chapter

The React Compiler is enabled on this template. See this documentation for more information.

Note: This will impact Vite dev & build performances.

Expanding the ESLint configuration Copy Chapter

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

Overview (`internal/bench/README.md`) Copy Section

LangGraph Benchmarks

This package contains benchmarks for the LangGraph.js.

Running the tests Copy Chapter

yarn test

Overview (`libs/checkpoint-mongodb/README.md`) Copy Section

@langchain/langgraph-checkpoint-mongodb

Implementation of a LangGraph.js CheckpointSaver that uses a MongoDB instance.

Usage Copy Chapter

import { MongoClient } from "mongodb";
import { MongoDBSaver } from "@langchain/langgraph-checkpoint-mongodb";

const writeConfig = {
  configurable: {
    thread_id: "1",
    checkpoint_ns: ""
  }
};
const readConfig = {
  configurable: {
    thread_id: "1"
  }
};


const client = new MongoClient(process.env.MONGODB_URL);

const checkpointer = new MongoDBSaver({ client });

// NOTE: you need to call .setup() the first time you're using your checkpointer
await checkpointer.setup();

const checkpoint = {
  v: 1,
  ts: "2024-07-31T20:14:19.804150+00:00",
  id: "1ef4f797-8335-6428-8001-8a1503f9b875",
  channel_values: {
    my_key: "meow",
    node: "node"
  },
  channel_versions: {
    __start__: 2,
    my_key: 3,
    "start:node": 3,
    node: 3
  },
  versions_seen: {
    __input__: {},
    __start__: {
      __start__: 1
    },
    node: {
      "start:node": 2
    }
  },
  pending_sends: [],
}

// store checkpoint
await checkpointer.put(writeConfig, checkpoint, {}, {});

// load checkpoint
await checkpointer.get(readConfig);

// list checkpoints
for await (const checkpoint of checkpointer.list(readConfig)) {
  console.log(checkpoint);
}

await client.close();

TTL (Time-To-Live) Support Copy Chapter

Automatically expire old checkpoints using MongoDB's TTL indexes:

import { MongoClient } from "mongodb";
import { MongoDBSaver } from "@langchain/langgraph-checkpoint-mongodb";

const client = new MongoClient(process.env.MONGODB_URL);

// Create checkpointer with 1-hour TTL (in seconds)
const checkpointer = new MongoDBSaver({
  client,
  ttl: 3600,
});

// Create TTL indexes (call during deployment/startup)
await checkpointer.setup();

When TTL is enabled:

• An upserted_at timestamp is added to each document on every write
• MongoDB automatically deletes documents after the TTL expires
• Each update resets the expiration timer

The setup() method creates the required TTL indexes. Call it during application startup or deployment. It is idempotent and handles concurrent calls safely.

Overview (`libs/checkpoint-postgres/README.md`) Copy Section

@langchain/langgraph-checkpoint-postgres

Implementation of a LangGraph.js CheckpointSaver that uses a Postgres DB.

Usage Copy Chapter

import { PostgresSaver } from "@langchain/langgraph-checkpoint-postgres";

const writeConfig = {
  configurable: {
    thread_id: "1",
    checkpoint_ns: ""
  }
};
const readConfig = {
  configurable: {
    thread_id: "1"
  }
};

// you can optionally pass a configuration object as the second parameter
const checkpointer = PostgresSaver.fromConnString("postgresql://...", {
  schema: "schema_name" // defaults to "public"
});

// You must call .setup() the first time you use the checkpointer:
await checkpointer.setup();

const checkpoint = {
  v: 1,
  ts: "2024-07-31T20:14:19.804150+00:00",
  id: "1ef4f797-8335-6428-8001-8a1503f9b875",
  channel_values: {
    my_key: "meow",
    node: "node"
  },
  channel_versions: {
    __start__: 2,
    my_key: 3,
    "start:node": 3,
    node: 3
  },
  versions_seen: {
    __input__: {},
    __start__: {
      __start__: 1
    },
    node: {
      "start:node": 2
    }
  },
  pending_sends: [],
}

// store checkpoint
await checkpointer.put(writeConfig, checkpoint, {}, {});

// load checkpoint
await checkpointer.get(readConfig);

// list checkpoints
for await (const checkpoint of checkpointer.list(readConfig)) {
  console.log(checkpoint);
}

Usage with existing connection pool Copy Chapter

import { PostgresSaver } from "@langchain/langgraph-checkpoint-postgres";
import pg from "pg";

// You can use any existing postgres connection pool
// we create a new pool here for the sake of the example
const pool = new pg.Pool({
  connectionString: "postgresql://..."
});

const checkpointer = new PostgresSaver(pool, undefined, {
  schema: "schema_name"
});

await checkpointer.setup();

// ...

Edge & serverless runtimes (Cloudflare Workers, etc.) Copy Chapter

PostgresSaver uses node-postgres (pg) under the hood, which opens a raw TCP/TLS connection via Node's net/tls modules. Some serverless/edge runtimes, most notably Cloudflare Workers, do not support raw outbound TCP connections from arbitrary code, so a direct connection (including the initial await checkpointer.setup()) will hang. This is the root cause for issues where the runtime reports that the Worker "had hung and would never generate a response".

This is a database-driver/runtime limitation, not a persistence-flush problem. LangGraph awaits all pending checkpoint writes before invoke()/stream() resolves (see the base checkpoint package README), so as long as you await the run you do not need ctx.waitUntil() to keep the runtime alive for persistence.

To use Postgres checkpointing from Cloudflare Workers, route the connection through Cloudflare Hyperdrive, which exposes a pg-compatible connection string:

// wrangler.toml / wrangler.jsonc must enable `nodejs_compat` and bind a Hyperdrive instance:
//   compatibility_flags = ["nodejs_compat"]
//   [[hyperdrive]]
//   binding = "HYPERDRIVE"
//   id = "<your-hyperdrive-id>"

import { PostgresSaver } from "@langchain/langgraph-checkpoint-postgres";

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const checkpointer = PostgresSaver.fromConnString(
      env.HYPERDRIVE.connectionString
    );
    // ... compile and `await graph.invoke(...)` here ...
    // Persistence is complete once `invoke`/`stream` resolves.
    return new Response("ok");
  },
};

Alternatively, implement a thin BaseCheckpointSaver on top of an HTTP/WebSocket Postgres driver such as @neondatabase/serverless that is designed for edge runtimes.

Note: standard Node.js, Deno, and Bun deployments are unaffected — PostgresSaver works there out of the box.

Testing Copy Chapter

Spin up testing PostgreSQL

docker-compose up -d && docker-compose logs -f

Then use the following connection string to initialize your checkpointer:

const testCheckpointer = PostgresSaver.fromConnString(
  "postgresql://user:password@localhost:5434/testdb"
);

Overview (`libs/checkpoint-redis/README.md`) Copy Section

@langchain/langgraph-checkpoint-redis

Redis checkpoint and store implementation for LangGraph.

Overview Copy Chapter

This package provides Redis-based implementations for:

1. Checkpoint Savers: Store and manage LangGraph checkpoints using Redis
   • RedisSaver: Standard checkpoint saver that maintains full checkpoint history
   • ShallowRedisSaver: Memory-optimized saver that only keeps the latest checkpoint per thread
2. RedisStore: Redis-backed key-value store with optional vector search capabilities

Installation Copy Chapter

npm install @langchain/langgraph-checkpoint-redis

Dependencies Copy Chapter

Redis Requirements Copy Section

This library requires Redis with the following modules:

• RedisJSON - For storing and manipulating JSON data
• RediSearch - For search and indexing capabilities

Redis 8.0+

If you're using Redis 8.0 or higher, both RedisJSON and RediSearch modules are included by default.

Redis < 8.0

For Redis versions lower than 8.0, you'll need to:

• Use Redis Stack, which bundles Redis with these modules
• Or install the modules separately in your Redis instance

Usage Copy Chapter

Standard Checkpoint Saver Copy Section

import { RedisSaver } from "@langchain/langgraph-checkpoint-redis";

const checkpointer = await RedisSaver.fromUrl(
    "redis://localhost:6379",
    {
        defaultTTL: 60, // TTL in minutes
        refreshOnRead: true
    }
);

// Indices are automatically created by fromUrl()

// Use with your graph
const config = {configurable: {thread_id: "1"}};

// Metadata must include required fields
const metadata = {
    source: "update",  // "update" | "input" | "loop" | "fork"
    step: 0,
    parents: {}
};

await checkpointer.put(config, checkpoint, metadata, {});
const loaded = await checkpointer.get(config);

Shallow Checkpoint Saver Copy Section

The ShallowRedisSaver is a memory-optimized variant that only keeps the latest checkpoint per thread:

import { ShallowRedisSaver } from "@langchain/langgraph-checkpoint-redis/shallow";

// Create a shallow saver that only keeps the latest checkpoint
const shallowSaver = await ShallowRedisSaver.fromUrl("redis://localhost:6379");

// Use it the same way as RedisSaver
const config = {
    configurable: {
        thread_id: "my-thread",
        checkpoint_ns: "my-namespace"
    }
};

const metadata = {
    source: "update",
    step: 0,
    parents: {}
};

await shallowSaver.put(config, checkpoint, metadata, versions);

// Only the latest checkpoint is kept - older ones are automatically cleaned up
const latest = await shallowSaver.getTuple(config);

Key differences from RedisSaver:

• Storage: Only keeps the latest checkpoint per thread (no history)
• Performance: Reduced storage usage and faster operations
• Inline storage: Channel values are stored inline (no separate blob storage)
• Automatic cleanup: Old checkpoints and writes are automatically removed

RedisStore Copy Section

The RedisStore provides a key-value store with optional vector search capabilities:

import { RedisStore } from "@langchain/langgraph-checkpoint-redis/store";

// Basic key-value store
const store = await RedisStore.fromConnString("redis://localhost:6379");

// Store with vector search
const vectorStore = await RedisStore.fromConnString("redis://localhost:6379", {
    index: {
        dims: 1536,  // Embedding dimensions
        embed: embeddings,  // Your embeddings instance
        distanceType: "cosine",  // or "l2", "ip"
        fields: ["text"],  // Fields to embed
    },
    ttl: {
        defaultTTL: 60,  // TTL in minutes
        refreshOnRead: true,
    }
});

// Put and get items
await store.put(["namespace", "nested"], "key1", {text: "Hello world"});
const item = await store.get(["namespace", "nested"], "key1");

// Search with namespace filtering
const results = await store.search(["namespace"], {
    filter: {category: "docs"},
    limit: 10,
});

// Vector search
const semanticResults = await vectorStore.search(["namespace"], {
    query: "semantic search query",
    filter: {type: "article"},
    limit: 5,
});

// Batch operations
const ops = [
    {type: "get", namespace: ["ns"], key: "key1"},
    {type: "put", namespace: ["ns"], key: "key2", value: {data: "value"}},
    {type: "search", namespacePrefix: ["ns"], limit: 10},
    {type: "list_namespaces", matchConditions: [{matchType: "prefix", path: ["ns"]}], limit: 10},
];
const results = await store.batch(ops);

TTL Support Copy Chapter

Both checkpoint savers and stores support Time-To-Live (TTL) functionality:

const ttlConfig = {
    defaultTTL: 60,  // Default TTL in minutes
    refreshOnRead: true,  // Refresh TTL when items are read
};

const checkpointer = await RedisSaver.fromUrl("redis://localhost:6379", ttlConfig);

Edge & serverless runtimes (Cloudflare Workers, etc.) Copy Chapter

The Redis savers and store use node-redis (createClient/createCluster), which opens a raw TCP/TLS socket via Node's net/tls modules. Some serverless/edge runtimes, most notably Cloudflare Workers, do not support raw outbound TCP connections, so connecting (and the initial index setup) will hang. This is the root cause for issues where the runtime reports that the Worker "had hung and would never generate a response".

This is a client/runtime limitation, not a persistence-flush problem. LangGraph awaits all pending checkpoint writes before invoke()/stream() resolves (see the base checkpoint package README), so as long as you await the run you do not need ctx.waitUntil() to keep the runtime alive for persistence.

Cloudflare Hyperdrive only supports Postgres/MySQL, so it cannot front Redis. To use Redis-backed persistence from Cloudflare Workers, use an HTTP-based Redis service such as Upstash Redis (@upstash/redis, which speaks REST and works in Workers) behind a small custom BaseCheckpointSaver implementation, rather than RedisSaver/ShallowRedisSaver.

Note: standard Node.js, Deno, and Bun deployments are unaffected — the Redis savers work there out of the box.

Development Copy Chapter

Running Tests Copy Section

# Run tests (uses TestContainers)
yarn test

# Run tests in watch mode
yarn test:watch

# Run integration tests
yarn test:int

License Copy Chapter

MIT

Overview (`libs/checkpoint-sqlite/README.md`) Copy Section

@langchain/langgraph-checkpoint-sqlite

Implementation of a LangGraph.js CheckpointSaver that uses a SQLite DB.

Usage Copy Chapter

import { SqliteSaver } from "@langchain/langgraph-checkpoint-sqlite";

const writeConfig = {
  configurable: {
    thread_id: "1",
    checkpoint_ns: ""
  }
};
const readConfig = {
  configurable: {
    thread_id: "1"
  }
};

const checkpointer = SqliteSaver.fromConnString(":memory:");
const checkpoint = {
  v: 1,
  ts: "2024-07-31T20:14:19.804150+00:00",
  id: "1ef4f797-8335-6428-8001-8a1503f9b875",
  channel_values: {
    my_key: "meow",
    node: "node"
  },
  channel_versions: {
    __start__: 2,
    my_key: 3,
    "start:node": 3,
    node: 3
  },
  versions_seen: {
    __input__: {},
    __start__: {
      __start__: 1
    },
    node: {
      "start:node": 2
    }
  },
  pending_sends: [],
}

// store checkpoint
await checkpointer.put(writeConfig, checkpoint, {}, {})

// load checkpoint
await checkpointer.get(readConfig)

// list checkpoints
for await (const checkpoint of checkpointer.list(readConfig)) {
  console.log(checkpoint);
}

Overview (`libs/checkpoint-validation/README.md`) Copy Section

@langchain/langgraph-checkpoint-validation

The checkpointer validation tool is used to validate that custom checkpointer implementations conform to LangGraph's requirements. LangGraph uses checkpointers for persisting workflow state, providing the ability to "rewind" your workflow to some earlier point in time, and continue execution from there.

The tool requires Node.js 20, 22, or 24 and later.

The overall process for using this tool is as follows:

1. Write your custom checkpointer implementation.
2. Add a file to your project that defines a CheckpointerTestInitializer as its default export.
3. Run the checkpointer validation tool to test your checkpointer and determine whether it meets LangGraph's requirements.
4. Iterate on your custom checkpointer as required, until tests pass.

The tool can be executed from the terminal as a CLI, or you can use it as a library to integrate it into your test suite.

Writing a CheckpointerTestInitializer Copy Chapter

The CheckpointerTestInitializer interface (example) is used by the test harness to create instances of your custom checkpointer, and any infrastructure that it requires for testing purposes.

If you intend to execute the tool via the CLI, your CheckpointerTestInitializer must be the default export of the module in which it is defined.

Synchronous vs Asynchronous initializer functions: You may return promises from any functions defined in your CheckpointerTestInitializer according to your needs and the test harness will behave accordingly.

IMPORTANT: You must take care to write your CheckpointerTestInitializer such that instances of your custom checkpointer are isolated from one another with respect to persisted state, or else some tests (particularly the ones that exercise the list method) will fail. That is, state written by one instance of your checkpointer MUST NOT be readable by another instance of your checkpointer. That said, there will only ever be one instance of your checkpointer live at any given time, so you may use shared storage, provided it is cleared when your checkpointer is created or destroyed. The structure of the CheckpointerTestInitializer interface should make this relatively easy to achieve, per the sections below.

(Required) `checkpointerName`: Define a name for your checkpointer Copy Section

CheckpointerTestInitializer requires you to define a checkpointerName field (of type string) for use in the test output.

`beforeAll`: Set up required infrastructure Copy Section

If your checkpointer requires some external infrastructure to be provisioned, you may wish to provision this via the optional beforeAll function. This function executes exactly once, at the very start of the testing lifecycle. If defined, it is the first function that will be called from your CheckpointerTestInitializer.

Timeout duration: If your beforeAll function may take longer than 10 seconds to execute, you can assign a custom timeout duration (as milliseconds) to the optional beforeAllTimeout field of your CheckpointerTestInitializer.

State isolation note: Depending on the cost/performance/requirements of your checkpointer infrastructure, it may make more sense for you to provision it during the createCheckpointer step, so you can provide each checkpointer instance with its own isolated storage backend. However as mentioned above, you may also provision a single shared storage backend, provided you clear any stored data during the createCheckpointer or destroyCheckpointer step.

`afterAll`: Tear down required infrastructure Copy Section

If you set up infrastructure during the beforeAll step, you may need to tear it down once the tests complete their execution. You can define this teardown logic in the optional afterAll function. Much like beforeAll this function will execute exactly one time, after all tests have finished executing.

IMPORTANT: If you kill the test runner early this function may not be called. To avoid manual clean-up, give preference to test infrastructure management tools like TestContainers, as these tools are designed to detect when this happens and clean up after themselves once the controlling process dies.

(Required) `createCheckpointer`: Construct your checkpointer Copy Section

CheckpointerTestInitializer requires you to define a createCheckpointer() function that returns an instance of your custom checkpointer.

State isolation note: If you're provisioning storage during this step, make sure that it is "fresh" storage for each instance of your checkpointer. Otherwise if you are using a shared storage setup, be sure to clear it either in this function, or in the destroyCheckpointer function (described in the section below).

`destroyCheckpointer`: Destroy your checkpointer Copy Section

If your custom checkpointer requires an explicit teardown step (for example, to clean up database connections), you can define this in the optional destroyCheckpointer(checkpointer: CheckpointerT) function.

State isolation note: If you are using a shared storage setup, be sure to clear it either in this function, or in the createCheckpointer function (described in the section above).

CLI usage Copy Chapter

You may use this tool's CLI either via npx, yarn dlx, or by installing globally and executing it via the validate-checkpointer command.

The only required argument to the tool is the import path for your CheckpointerTestInitializer. Relative paths must begin with a leading ./ (or .\, for Windows), otherwise the path will be interpreted as a module name rather than a relative path.

You may optionally pass one or more test filters as positional arguments after the import path argument (separated by spaces). Valid values are getTuple, list, put, and putWrites. If present, only the test suites specified in the filter list will be executed. This is useful for working through smaller sets of test failures as you're validating your checkpointer.

TypeScript imports are supported, so you may pass a path directly to your TypeScript source file.

NPX & Yarn execution Copy Section

NPX:

npx @langchain/langgraph-checkpoint-validation ./src/my_initializer.ts

Yarn:

yarn dlx @langchain/langgraph-checkpoint-validation ./src/my_initializer.ts

Global install Copy Section

NPM:

npm install @langchain/langgraph-checkpoint-validation
validate-checkpointer ./src/my_initializer.ts

Usage in existing Jest-like test suite Copy Chapter

This package exports a test definition function that may be used in any Jest-compatible test framework (including Vitest). If you wish to integrate this tooling into your existing test suite, you can simply import and invoke it from within a test file, as shown below.

import { validate } from "@langchain/langgraph-validation";

validate(MyCheckpointerInitializer);

Overview (`libs/checkpoint/README.md`) Copy Section

@langchain/langgraph-checkpoint

This library defines the base interface for LangGraph.js checkpointers. Checkpointers provide persistence layer for LangGraph. They allow you to interact with and manage the graph's state. When you use a graph with a checkpointer, the checkpointer saves a checkpoint of the graph state at every superstep, enabling several powerful capabilities like human-in-the-loop, "memory" between interactions and more.

Key concepts Copy Chapter

Checkpoint Copy Section

Checkpoint is a snapshot of the graph state at a given point in time. Checkpoint tuple refers to an object containing checkpoint and the associated config, metadata and pending writes.

Thread Copy Section

Threads enable the checkpointing of multiple different runs, making them essential for multi-tenant chat applications and other scenarios where maintaining separate states is necessary. A thread is a unique ID assigned to a series of checkpoints saved by a checkpointer. When using a checkpointer, you must specify a thread_id and optionally checkpoint_id when running the graph.

• thread_id is simply the ID of a thread. This is always required
• checkpoint_id can optionally be passed. This identifier refers to a specific checkpoint within a thread. This can be used to kick of a run of a graph from some point halfway through a thread.

You must pass these when invoking the graph as part of the configurable part of the config, e.g.

{ configurable: { thread_id: "1" } }  // valid config
{ configurable: { thread_id: "1", checkpoint_id: "0c62ca34-ac19-445d-bbb0-5b4984975b2a" } }  // also valid config

Serde Copy Section

@langchain/langgraph-checkpoint also defines protocol for serialization/deserialization (serde) and provides an default implementation that handles a range of types.

Pending writes Copy Section

When a graph node fails mid-execution at a given superstep, LangGraph stores pending checkpoint writes from any other nodes that completed successfully at that superstep, so that whenever we resume graph execution from that superstep we don't re-run the successful nodes.

When are checkpoints persisted Copy Section

By default (durability: "async") checkpoint writes are dispatched in the background while the graph keeps executing, which keeps runs fast. Regardless of the durability mode, LangGraph awaits all outstanding checkpointer writes before invoke() / stream() resolves, invoke() fully drains the underlying stream, and the stream awaits every pending checkpointer promise before it completes.

In practice this means:

• If you await graph.invoke(...) (or fully consume for await (... of graph.stream(...))), persistence is guaranteed to be complete by the time the call returns. You do not need to keep the process/runtime alive for any trailing background writes.
• On serverless/edge runtimes (e.g. Cloudflare Workers) you therefore do not need ctx.waitUntil() to flush checkpoints, just make sure you await the run before returning a response. The only way to orphan writes is to start a stream and never consume it (e.g. piping graph.stream() into a detached, un-awaited task).

Note: this guarantees the write was issued and awaited, not that your database driver works in a given runtime. See the runtime-compatibility notes in the Postgres and Redis checkpointer READMEs.

Interface Copy Chapter

Each checkpointer should conform to BaseCheckpointSaver interface and must implement the following methods:

• .put - Store a checkpoint with its configuration and metadata.
• .putWrites - Store intermediate writes linked to a checkpoint (i.e. pending writes).
• .getTuple - Fetch a checkpoint tuple using for a given configuration (thread_id and thread_ts).
• .list - List checkpoints that match a given configuration and filter criteria.

Usage Copy Chapter

import { MemorySaver } from "@langchain/langgraph-checkpoint";

const writeConfig = {
  configurable: {
    thread_id: "1",
    checkpoint_ns: ""
  }
};
const readConfig = {
  configurable: {
    thread_id: "1"
  }
};

const checkpointer = new MemorySaver();
const checkpoint = {
  v: 1,
  ts: "2024-07-31T20:14:19.804150+00:00",
  id: "1ef4f797-8335-6428-8001-8a1503f9b875",
  channel_values: {
    my_key: "meow",
    node: "node"
  },
  channel_versions: {
    __start__: 2,
    my_key: 3,
    "start:node": 3,
    node: 3
  },
  versions_seen: {
    __input__: {},
    __start__: {
      __start__: 1
    },
    node: {
      "start:node": 2
    }
  },
  pending_sends: [],
}

// store checkpoint
await checkpointer.put(writeConfig, checkpoint, {}, {})

// load checkpoint
await checkpointer.get(readConfig)

// list checkpoints
for await (const checkpoint of checkpointer.list(readConfig)) {
  console.log(checkpoint);
}

Overview (`libs/create-langgraph/README.md`) Copy Section

create-langgraph

The official scaffolding tool for LangGraph.js projects. Quickly bootstrap new LangGraph applications from curated templates or generate configuration files for existing projects.

Quick Start Copy Chapter

Create a new LangGraph project with a single command:

# Using npm
npm init langgraph@latest

# Using yarn
yarn create langgraph

# Using pnpm
pnpm create langgraph

# Using pnpm
pnpm create langgraph

# Using bun
bunx create-langgraph

Follow the interactive prompts to select a template and configure your project.

Templates Copy Chapter

Choose from a variety of production-ready templates:

Using a Specific Template Copy Section

Skip the interactive prompt by specifying a template directly:

npx create-langgraph@latest my-project --template react-agent-js

Available template IDs:

• new-langgraph-project-js
• react-agent-js
• memory-agent-js
• retrieval-agent-js
• data-enrichment-js

Commands Copy Chapter

`create-langgraph [path]` Copy Section

Creates a new LangGraph project at the specified path.

npx create-langgraph@latest my-awesome-agent

Options:

• -t, --template <template> — Use a specific template (skips interactive selection)

What it does:

1. Downloads the selected template from GitHub
2. Extracts it to your target directory
3. Optionally initializes a Git repository
4. Provides next steps for getting started

`create-langgraph config [path]` Copy Section

Scans your project for LangGraph agents and generates a langgraph.json configuration file.

# In your project directory
npx create-langgraph@latest config

# Or specify a path
npx create-langgraph@latest config ./my-project

This command is useful when:

• You have an existing project and want to add LangGraph Platform support
• You've added new agents and need to update your configuration
• You want to automatically detect all agents in your codebase

Agent Detection Copy Chapter

The config command automatically detects LangGraph agents defined using these patterns:

ESM (ES Modules) Copy Section

// Using createAgent
export const agent = createAgent({ model, tools });

// Using StateGraph
export const graph = new StateGraph(annotation).compile();

// Using workflow builder pattern
export const app = workflow.compile();

CommonJS Copy Section

// Using module.exports
module.exports.agent = createAgent({ model, tools });
module.exports.graph = workflow.compile();

// Using exports shorthand
exports.myAgent = createAgent({ model, tools });

What Gets Detected Copy Section

The scanner looks for:

• createAgent() function calls
• new StateGraph(...).compile() patterns
• workflow.compile() or builder.compile() patterns

Important: Only exported agents are included in the generated configuration. Unexported agents will be listed as warnings so you can add the export keyword if needed.

Generated Configuration Copy Chapter

The config command generates a langgraph.json file like this:

{
  "node_version": "20",
  "graphs": {
    "agent": "./src/agent.ts:agent",
    "searchAgent": "./src/search.ts:searchAgent"
  },
  "env": ".env"
}

The configuration includes:

• node_version — Detected from your current Node.js version
• graphs — Map of agent names to their file paths and export names
• env — Path to .env file (if one exists)

Project Structure Copy Chapter

After scaffolding, your project will have this structure:

my-project/
├── src/
│   └── agent.ts       # Your LangGraph agent
├── langgraph.json     # LangGraph configuration
├── package.json
├── tsconfig.json
└── .env.example       # Environment variables template

Next Steps After Creating a Project Copy Chapter

# Navigate to your project
cd my-project

# Install dependencies
npm install  # or yarn, pnpm, bun

# Start the LangGraph development server
npx @langchain/langgraph-cli@latest dev

The development server provides:

• A local API server for your agents
• Hot reloading during development
• Built-in debugging tools

Analytics Copy Chapter

This CLI collects anonymous usage analytics to help improve the tool. The following information is collected:

• Operating system and version
• Node.js version
• CLI version
• Command executed

No personal information, project details, or code is ever collected.

To opt out of analytics, set the environment variable:

export LANGGRAPH_CLI_NO_ANALYTICS=1

Requirements Copy Chapter

• Node.js 18 or later
• npm, yarn, pnpm, or bun

Related Packages Copy Chapter

• @langchain/langgraph — The core LangGraph library
• @langchain/langgraph-cli — CLI tools for running LangGraph projects

License Copy Chapter

MIT © LangChain

Overview (`libs/langgraph-api/README.md`) Copy Section

LangGraph.js API

In-memory implementation of the LangGraph.js API.

Tests Copy Chapter

1. Build the latest code changes to test: pnpm build
2. Start a local server: pnpm dev
3. Run the tests: pnpm test

Overview (`libs/langgraph-cli/README.md`) Copy Section

LangGraph.js CLI

The official command-line interface for LangGraph.js, providing tools to create, develop, and deploy LangGraph.js applications.

Installation Copy Chapter

The @langchain/langgraph-cli is a CLI binary that can be run via npx or installed via your package manager of choice:

npx @langchain/langgraph-cli

Commands Copy Chapter

`langgraphjs dev` Copy Section

Run LangGraph.js API server in development mode with hot reloading.

npx @langchain/langgraph-cli dev

`langgraphjs build` Copy Section

Build a Docker image for your LangGraph.js application.

npx @langchain/langgraph-cli build

`langgraphjs up` Copy Section

Run LangGraph.js API server in Docker.

npx @langchain/langgraph-cli up

`langgraphjs dockerfile` Copy Section

Generate a Dockerfile for custom deployments

npx @langchain/langgraph-cli dockerfile <save path>

Configuration Copy Chapter

The CLI uses a langgraph.json configuration file with these key settings:

{
  // Required: Graph definitions
  graphs: {
    graph: "./src/graph.ts:graph",
  },

  // Optional: Node version (supported: "20", "22", "24")
  node_version: "24",

  // Optional: Environment variables
  env: ".env",

  // Optional: Additional Dockerfile commands
  dockerfile_lines: [],
}

See the full documentation for detailed configuration options.

Overview (`libs/langgraph-core/README.md`) Copy Section

LangGraph — used by Replit, Uber, LinkedIn, GitLab and more — is a low-level orchestration framework for building controllable agents. While langchain provides integrations and composable components to streamline LLM application development, the LangGraph library enables agent orchestration — offering customizable architectures, long-term memory, and human-in-the-loop to reliably handle complex tasks.

npm install @langchain/langgraph @langchain/core

[!TIP]
If you're looking to quickly build agents, check out Deep Agents — a higher-level package built on LangGraph for agents that can plan, use subagents, and leverage file systems for complex tasks.

For an equivalent Python library, check out LangGraph and the Python docs.

Why use LangGraph? Copy Chapter

LangGraph provides low-level supporting infrastructure for any long-running, stateful workflow or agent:

• Durable execution — Build agents that persist through failures and can run for extended periods, automatically resuming from exactly where they left off.
• Human-in-the-loop — Seamlessly incorporate human oversight by inspecting and modifying agent state at any point during execution.
• Comprehensive memory — Create truly stateful agents with both short-term working memory for ongoing reasoning and long-term persistent memory across sessions.
• Debugging with LangSmith — Gain deep visibility into complex agent behavior with visualization tools that trace execution paths, capture state transitions, and provide detailed runtime metrics.
• Production-ready deployment — Deploy sophisticated agent systems confidently with scalable infrastructure designed to handle the unique challenges of stateful, long-running workflows.

[!TIP]
For developing, debugging, and deploying AI agents and LLM applications, see LangSmith.

LangGraph’s ecosystem Copy Chapter

While LangGraph can be used standalone, it also integrates seamlessly with any LangChain product, giving developers a full suite of tools for building agents. To improve your LLM application development, pair LangGraph with:

• Deep Agents (JS) — Build agents that can plan, use subagents, and leverage file systems for complex tasks. A higher-level package built on top of LangGraph.
• LangChain – Provides integrations and composable components to streamline LLM application development.
• LangSmith — Helpful for agent evals and observability. Debug poor-performing LLM app runs, evaluate agent trajectories, gain visibility in production, and improve performance over time.

Additional resources Copy Chapter

• LangChain Forum: Connect with the community and share all of your technical questions, ideas, and feedback.
• LangChain Academy: Learn the basics of LangGraph in our free, structured course.
• Streaming Cookbook: Documentation and examples around LangGraphs's streaming capabilities.
• API Reference: Detailed reference on core classes, methods, how to use the graph and checkpointing APIs, and higher-level prebuilt components.
• Built with LangGraph: Hear how industry leaders use LangGraph to ship powerful, production-ready AI applications.

Acknowledgements Copy Chapter

LangGraph is inspired by Pregel and Apache Beam. The public interface draws inspiration from NetworkX. LangGraph is built by LangChain Inc, the creators of LangChain, but can be used without LangChain.

Overview (`libs/langgraph-cua/README.md`) Copy Section

🤖 LangGraph.js Computer Use Agent (CUA)

[!TIP]
Looking for the Python version? Check out the repo here.

A TypeScript library for creating computer use agent (CUA) systems using LangGraph.js. A CUA is a type of agent which has the ability to interact with a computer to perform tasks.

Short demo video:

[!TIP]
This demo used the following prompt:

text Copy

I want to contribute to the LangGraph.js project. Please find the GitHub repository, and inspect the read me,
along with some of the issues and open pull requests. Then, report back with a plan of action to contribute.

This library is built on top of LangGraph.js, a powerful framework for building agent applications, and comes with out-of-box support for streaming, short-term and long-term memory and human-in-the-loop.

Installation Copy Chapter

You will need to explicitly install LangGraph, Core, and OpenAI since these are peer dependencies of this package.

yarn add @langchain/langgraph-cua @langchain/langgraph @langchain/core @langchain/openai

Quickstart Copy Chapter

This project by default uses Scrapybara for accessing a virtual machine to run the agent. To use LangGraph CUA, you'll need both OpenAI and Scrapybara API keys.

export OPENAI_API_KEY=<your_api_key>
export SCRAPYBARA_API_KEY=<your_api_key>

Then, create the graph by importing the createCua function from the @langchain/langgraph-cua module.

import "dotenv/config";
import { createCua } from "@langchain/langgraph-cua";

const cuaGraph = createCua();

// Define the input messages
const messages = [
  {
    role: "system",
    content:
      "You're an advanced AI computer use assistant. The browser you are using " +
      "is already initialized, and visiting google.com.",
  },
  {
    role: "user",
    content:
      "I want to contribute to the LangGraph.js project. Please find the GitHub repository, and inspect the read me, " +
      "along with some of the issues and open pull requests. Then, report back with a plan of action to contribute.",
  },
];

async function main() {
  // Stream the graph execution
  const stream = await cuaGraph.stream(
    { messages },
    {
      streamMode: "updates",
      subgraphs: true,
    }
  );

  // Process the stream updates
  for await (const update of stream) {
    console.log(update);
  }

  console.log("Done");
}

main().catch(console.error);

The above example will invoke the graph, passing in a request for it to do some research into LangGraph.js from the standpoint of a new contributor. The code will log the stream URL, which you can open in your browser to view the CUA stream.

You can find more examples inside the examples directory.

How to customize Copy Chapter

The createCua function accepts a few configuration parameters. These are the same configuration parameters that the graph accepts, along with recursionLimit.

You can either pass these parameters when calling createCua, or at runtime when invoking the graph by passing them to the config object.

Configuration Parameters Copy Section

• scrapybaraApiKey: The API key to use for Scrapybara. If not provided, it defaults to reading the SCRAPYBARA_API_KEY environment variable.
• timeoutHours: The number of hours to keep the virtual machine running before it times out.
• zdrEnabled: Whether or not Zero Data Retention is enabled in the user's OpenAI account. If true, the agent will not pass the previous_response_id to the model, and will always pass it the full message history for each request. If false, the agent will pass the previous_response_id to the model, and only the latest message in the history will be passed. Default false.
• recursionLimit: The maximum number of recursive calls the agent can make. Default is 100. This is greater than the standard default of 25 in LangGraph, because computer use agents are expected to take more iterations.
• authStateId: The ID of the authentication state. If defined, it will be used to authenticate with Scrapybara. Only applies if 'environment' is set to 'web'.
• environment: The environment to use. Default is web. Options are web, ubuntu, and windows.
• prompt: The prompt to pass to the model. This will be passed as the system message.
• nodeBeforeAction: A custom node to run before the computer action. This function will receive the current state and config as parameters.
• nodeAfterAction: A custom node to run after the computer action. This function will receive the current state and config as parameters.
• stateModifier: Optional state modifier for customizing the agent's state.

System Prompts Copy Section

Including a system prompt with your CUA graph is recommended, and can save the agent time in its initial steps by providing context into its environment and objective. Below is the recommended system prompt from Scrapybara:

System Prompt

You have access to an Ubuntu VM with internet connectivity. You can install Ubuntu applications using the bash tool (prefer curl over wget).  

### Handling HTML and Large Text Output  
- To read an HTML file, open it in Chromium using the address bar.  

### Interacting with Web Pages and Forms  
- Zoom out or scroll to ensure all content is visible.  
- When interacting with input fields:  
- Clear the field first using `Ctrl+A` and `Delete`.  
- Take an extra screenshot after pressing "Enter" to confirm the input was submitted correctly.  
- Move the mouse to the next field after submission.  

### Efficiency and Authentication  
- Computer function calls take time; optimize by stringing together related actions when possible.  
- You are allowed to take actions on authenticated sites on behalf of the user.  
- Assume the user has already authenticated if they request access to a site.  
- For logging into additional sites, ask the user to use Auth Contexts or the Interactive Desktop.  

### Handling Black Screens  
- If the first screenshot shows a black screen:  
- Click the center of the screen.  
- Take another screenshot.  

### Best Practices  
- If given a complex task, break it down into smaller steps and ask for details only when necessary.  
- Read web pages thoroughly by scrolling down until sufficient information is gathered.  
- Explain each action you take and why.  
- Avoid asking for confirmation on routine actions (e.g., pressing "Enter" after typing a URL). Seek clarification only for ambiguous or critical actions (e.g., deleting files or submitting sensitive information).  
- If a user's request implies the need for external information, assume they want you to search for it and provide the answer directly.  

### Date Context  
Today's date is {todays_date}

If you choose to use this prompt, ensure you're populating the {todays_date} placeholder with the current date.

Node Before/After Action Copy Section

LangGraph CUA allows you to customize the agent's behavior by providing custom nodes that run before and after computer actions. These nodes give you fine-grained control over the agent's workflow.

import { createCua, CUAState, CUAUpdate } from "@langchain/langgraph-cua";
import { LangGraphRunnableConfig } from "@langchain/langgraph";

// Custom node that runs before a computer action
async function customNodeBefore(
  state: CUAState,
  config: LangGraphRunnableConfig
): Promise<CUAUpdate> {
  console.log("Running before computer action");
  // You can modify the state here
  return {};
}

// Custom node that runs after a computer action
async function customNodeAfter(
  state: CUAState,
  config: LangGraphRunnableConfig
): Promise<CUAUpdate> {
  console.log("Running after computer action");
  // You can process the results of the computer action here
  return {};
}

const cuaGraph = createCua({
  nodeBeforeAction: customNodeBefore,
  nodeAfterAction: customNodeAfter,
});

These custom nodes allow you to:

• Perform validation or preprocessing before a computer action
• Modify or analyze the results after a computer action
• Implement custom logic that integrates with your application (e.g. for Generative UI)

State Modifier Copy Section

The stateModifier parameter allows you to customize the agent's state by extending the default state annotation. This gives you the ability to add custom fields to the state object.

import { createCua, CUAAnnotation } from "@langchain/langgraph-cua";
import { Annotation } from "@langchain/langgraph";

// Create a custom state annotation that extends the default CUA state
const CustomStateAnnotation = Annotation.Root({
  ...CUAAnnotation.spec,
  // Add your custom fields here
  customField: Annotation.Field({
    default: "default value",
  }),
});

const cuaGraph = createCua({
  stateModifier: CustomStateAnnotation,
});

By using state modifiers, you can:

• Store additional context or metadata in the agent's state
• Customize the default behavior of the agent
• Implement domain-specific functionality

Screenshot Upload Copy Section

The uploadScreenshot parameter allows you to upload screenshots to a storage service (e.g., an image hosting service) and return the URL. This is useful, because storing screenshots in the state object can quickly consume your LangGraph server's disk space.

import { createCua } from "@langgraph/cua";

const cuaGraph = createCua({
  uploadScreenshot: async (base64Screenshot) => {
    // Upload screenshot to storage service
    const publicImageUrl = await uploadToS3(base64Screenshot);
    return publicImageUrl;
  },
});

Auth States Copy Chapter

LangGraph CUA integrates with Scrapybara's auth states API to persist browser authentication sessions. This allows you to authenticate once (e.g., logging into Amazon) and reuse that session in future runs.

Using Auth States Copy Section

Pass an authStateId when creating your CUA graph:

import { createCua } from "@langgraph/cua";

const cuaGraph = createCua({ authStateId: "<your_auth_state_id>" });

The graph stores this ID in the authenticatedId state field. If you change the authStateId in future runs, the graph will automatically reauthenticate.

Managing Auth States with Scrapybara SDK Copy Section

Save an Auth State

import { ScrapybaraClient } from "scrapybara";

const client = new ScrapybaraClient({ apiKey: "<api_key>" });
const instance = await client.get("<instance_id>");
const authStateId = (await instance.saveAuth({ name: "example_site" })).authStateId;

Modify an Auth State

import { ScrapybaraClient } from "scrapybara";

const client = new ScrapybaraClient({ apiKey: "<api_key>" });
const instance = await client.get("<instance_id>");
await instance.modifyAuth({ authStateId: "your_existing_auth_state_id", name: "renamed_auth_state" });

[!NOTE]
To apply changes to an auth state in an existing run, set the authenticatedId state field to undefined to trigger re-authentication.

Zero Data Retention (ZDR) Copy Chapter

LangGraph CUA supports Zero Data Retention (ZDR) via the zdrEnabled configuration parameter. When set to true, the graph will not assume it can use the previous_message_id, and all AI & tool messages will be passed to the OpenAI on each request.

Development Copy Chapter

To get started with development, first clone the repository:

git clone https://github.com/langchain-ai/langgraphjs.git

Install dependencies:

yarn install

Navigate into the libs/langgraph-cua directory:

cd libs/langgraph-cua

Set the required environment variables:

cp .env.example .env

Finally, you can then run the integration tests:

yarn test:single src/tests/cua.int.test.ts

Overview (`libs/langgraph-supervisor/README.md`) Copy Section

🤖 LangGraph Multi-Agent Supervisor

A JavaScript library for creating hierarchical multi-agent systems using LangGraph. Hierarchical systems are a type of multi-agent architecture where specialized agents are coordinated by a central supervisor agent. The supervisor controls all communication flow and task delegation, making decisions about which agent to invoke based on the current context and task requirements.

Features Copy Chapter

• 🤖 Create a supervisor agent to orchestrate multiple specialized agents
• 🛠️ Tool-based agent handoff mechanism for communication between agents
• 📝 Flexible message history management for conversation control

This library is built on top of LangGraph, a powerful framework for building agent applications, and comes with out-of-box support for streaming, short-term and long-term memory and human-in-the-loop

Installation Copy Chapter

npm install @langchain/langgraph-supervisor @langchain/langgraph @langchain/core

Quickstart Copy Chapter

Here's a simple example of a supervisor managing two specialized agents:

npm install @langchain/langgraph-supervisor @langchain/langgraph @langchain/core @langchain/openai

export OPENAI_API_KEY=<your_api_key>

/* Detailed source-code truncated for AI context efficiency. */

Message History Management Copy Chapter

You can control how agent messages are added to the overall conversation history of the multi-agent system:

Include full message history from an agent:

const workflow = createSupervisor({
  agents: [agent1, agent2],
  outputMode: "full_history"
})

Include only the final agent response:

const workflow = createSupervisor({
  agents: [agent1, agent2],
  outputMode: "last_message"
})

Multi-level Hierarchies Copy Chapter

You can create multi-level hierarchical systems by creating a supervisor that manages multiple supervisors.

const researchTeam = createSupervisor({
  agents: [researchAgent, mathAgent],
  llm: model,
}).compile({ name: "research_team" })

const writingTeam = createSupervisor({
  agents: [writingAgent, publishingAgent],
  llm: model,
}).compile({ name: "writing_team" })

const topLevelSupervisor = createSupervisor({
  agents: [researchTeam, writingTeam],
  llm: model,
}).compile({ name: "top_level_supervisor" })

Adding Memory Copy Chapter

You can add short-term and long-term memory to your supervisor multi-agent system. Since createSupervisor() returns an instance of StateGraph that needs to be compiled before use, you can directly pass a checkpointer or a store instance to the .compile() method:

import { MemorySaver, InMemoryStore } from "@langchain/langgraph";

const checkpointer = new MemorySaver()
const store = new InMemoryStore()

const model = ...
const researchAgent = ...
const mathAgent = ...

const workflow = createSupervisor({
  agents: [researchAgent, mathAgent],
  llm: model,
  prompt: "You are a team supervisor managing a research expert and a math expert.",
})

// Compile with checkpointer/store
const app = workflow.compile({
  checkpointer,
  store
})

Overview (`libs/langgraph-swarm/README.md`) Copy Section

🤖 LangGraph Multi-Agent Swarm

A JavaScript library for creating swarm-style multi-agent systems using LangGraph. A swarm is a type of multi-agent architecture where agents dynamically hand off control to one another based on their specializations. The system remembers which agent was last active, ensuring that on subsequent interactions, the conversation resumes with that agent.

[!NOTE]
This library has been updated to support LangChain 1.0. However, it has not been tested with the new agents in langchain. The library currently only supports the prebuilt createReactAgent from LangGraph. This update allows users to migrate to LangChain 1.0 without changing their existing code. For users of the swarm package, we recommend continuing to use createReactAgent rather than the new createAgent pattern from LangChain for now.

Features Copy Chapter

• 🤖 Multi-agent collaboration - Enable specialized agents to work together and hand off context to each other
• 🛠️ Customizable handoff tools - Built-in tools for communication between agents

This library is built on top of LangGraph, a powerful framework for building agent applications, and comes with out-of-box support for streaming, short-term and long-term memory and human-in-the-loop

Installation Copy Chapter

npm install @langchain/langgraph-swarm @langchain/langgraph @langchain/core

Quickstart Copy Chapter

npm install @langchain/langgraph-swarm @langchain/langgraph @langchain/core @langchain/openai

export OPENAI_API_KEY=<your_api_key>

/* Detailed source-code truncated for AI context efficiency. */

Memory Copy Chapter

You can add short-term and long-term memory to your swarm multi-agent system. Since createSwarm() returns an instance of StateGraph that needs to be compiled before use, you can directly pass a checkpointer or a store instance to the .compile() method:

import { MemorySaver, InMemoryStore } from "@langchain/langgraph";

// short-term memory
const checkpointer = new MemorySaver()
// long-term memory
const store = new InMemoryStore()

alice = ...
bob = ...

const workflow = createSwarm({
  agents: [alice, bob],
  defaultActiveAgent: "Alice",
})

// Compile with checkpointer/store
const app = workflow.compile({
  checkpointer,
  store
})

[!IMPORTANT]
Adding short-term memory is crucial for maintaining conversation state across multiple interactions. Without it, the swarm would "forget" which agent was last active and lose the conversation history. Make sure to always compile the swarm with a checkpointer if you plan to use it in multi-turn conversations; e.g., workflow.compile(checkpointer=checkpointer).

How to customize Copy Chapter

You can customize multi-agent swarm by changing either the handoff tools implementation or the agent implementation.

Customizing handoff tools Copy Section

By default, the agents in the swarm are assumed to use handoff tools created with the prebuilt createHandoffTool. You can also create your own, custom handoff tools. Here are some ideas on how you can modify the default implementation:

• change tool name and/or description
• add tool call arguments for the LLM to populate, for example a task description for the next agent
• change what data is passed to the next agent as part of the handoff: by default create_handoff_tool passes full message history (all of the messages generated in the swarm up to this point), as well as the contents of Command.update to the next agent

[!IMPORTANT]
If you want to change what messages are passed to the next agent, you must use a different state schema key for messages in your agent implementation (e.g., alice_messages). By default, all agent (subgraph) state updates are applied to the swarm (parent) graph state during the handoff. Since all of the agents by default are assumed to communicate over a single messages key, this means that the agent's messages are automatically combined into the parent graph's messages, unless an agent uses a different key for messages. See more on this in the customizing agent implementation section.

Here is an example of what a custom handoff tool might look like:

/* Detailed source-code truncated for AI context efficiency. */

[!IMPORTANT]
If you are implementing custom handoff tools that return Command, you need to ensure that:
(1) your agent has a tool-calling node that can handle tools returning Command (like LangGraph's prebuilt ToolNode)
(2) both the swarm graph and the next agent graph have the state schema containing the keys you want to update in Command.update

Customizing agent implementation Copy Section

By default, individual agents are expected to communicate over a single messages key that is shared by all agents and the overall multi-agent swarm graph. This means that all of the messages from all of the agents will be combined into a single, shared list of messages. This might not be desirable if you don't want to expose an agent's internal history of messages. To change this, you can customize the agent by taking the following steps:

1. use custom state schema with a different key for messages, for example alice_messages
2. write a wrapper that converts the parent graph state to the child agent state and back (see this how-to guide)

import { BaseMessage } from "@langchain/core/messages";
import { Annotation, StateGraph, messagesStateReducer } from "@langchain/langgraph";

export const AliceStateAnnotation = Annotation.Root({
  alice_messages: Annotation<BaseMessage[]>({
    reducer: messagesStateReducer,
    default: () => [],
  }),
});
import { SwarmState } from "@langchain/langgraph-swarm";

// see this guide to learn how you can implement a custom tool-calling agent
// https://langchain-ai.github.io/langgraphjs/how-tos/react-agent-from-scratch/
const alice = (
    new StateGraph(AliceStateAnnotation)
    .addNode("model", ...)
    .addNode("tools", ...)
    .addEdge(...)
    ...
    .compile()
)

// wrapper calling the agent
const callAlice = async (state: typeof SwarmState.State) => {
    // you can put any input transformation from parent state -> agent state
    // for example, you can invoke "alice" with "task_description" populated by the LLM
    const response = await alice.invoke({"alice_messages": state["messages"]})
    // you can put any output transformation from agent state -> parent state
    return { "messages": response.alice_messages }
}

const callBob = async (state: typeof SwarmState.State) => {
    ...
}

Then, you can create the swarm manually in the following way:

import { addActiveAgentRouter } from "@langchain/langgraph-swarm";

let workflow = (
    new StateGraph(SwarmState)
    .addNode("Alice", callAlice, { ends: ["Bob"] })
    .addNode("Bob", callBob, { ends: ["Alice"] })
)
// this is the router that enables us to keep track of the last active agent
workflow = addActiveAgentRouter(workflow, {
    routeTo: ["Alice", "Bob"],
    defaultActiveAgent: "Alice",
})

// compile the workflow
const app = workflow.compile()

Overview (`libs/langgraph-ui/README.md`) Copy Section

LangGraph.js UI

Contains the logic for creating Generative UI bundles served via LangGraph API.

Overview (`libs/sdk-angular/README.md`) Copy Section

@langchain/angular

Angular SDK for building AI-powered applications with Deep Agents, LangChain and LangGraph.

The package ships a Signals-first API built on top of the v2 streaming
protocol. injectStream returns a small, always-on root handle
(values, messages, isLoading, error, …) and pushes anything
namespaced (subagents, subgraphs, media, submission queue, per-message
metadata) behind ref-counted inject* selectors so components
only pay for data they actually consume.

Upgrading from 0.x? See docs/v1-migration.md
for the complete matrix of option, return-shape, and transport
changes.

Installation Copy Chapter

npm install @langchain/angular @langchain/core

Peer dependencies: @angular/core (^18.0.0 – ^21.0.0),
@langchain/core (^1.1.27).

Quick start Copy Chapter

import { Component } from "@angular/core";
import { injectStream } from "@langchain/angular";

@Component({
  standalone: true,
  template: `
    <div>
      @for (msg of stream.messages(); track msg.id ?? $index) {
        <div>{{ str(msg.content) }}</div>
      }

      <button
        [disabled]="stream.isLoading()"
        (click)="onSubmit()"
      >
        Send
      </button>
    </div>
  `,
})
export class ChatComponent {
  readonly stream = injectStream({
    assistantId: "agent",
    apiUrl: "http://localhost:2024",
  });

  str(v: unknown) {
    return typeof v === "string" ? v : JSON.stringify(v);
  }

  onSubmit() {
    void this.stream.submit({
      messages: [{ type: "human", content: "Hello!" }],
    });
  }
}

injectStream must be called from an Angular injection context —
the host's DestroyRef owns the stream, so navigating away destroys
the controller automatically.

Features at a glance Copy Chapter

• Signals everywhere. Messages, values, tool calls, interrupts,
  loading/error state — all Angular Signal<T>s you call as
  functions in templates.
• One call, two transports. Same option bag targets either the
  LangGraph Platform (SSE by default, transport: "websocket"
  opt-in) or a custom backend through an AgentServerAdapter.
• Ref-counted selectors. injectMessages, injectValues,
  injectToolCalls, media selectors, submission queue — the first
  consumer opens a subscription, the last one's DestroyRef closes
  it. Components pay only for what they render.
• Human-in-the-loop. Interrupts are first-class signals; resume
  or fork a specific pending interrupt with one call.
• Headless tools. Register browser-side tool implementations;
  the runtime dispatches matching interrupts and auto-resumes with
  the return value.
• Subagent & subgraph discovery. Lightweight snapshots at the
  root; scoped content (messages, tool calls, state) via the same
  selectors, targeted at a snapshot or namespace.
• Forking without history preload. Per-message metadata +
  submit({ forkFrom }) replaces the legacy branch /
  fetchStateHistory trio.
• DI-native. provideStream for subtree sharing,
  provideStreamDefaults for app-wide config, StreamService for
  class-based wrappers.
• Typed end-to-end. Pass typeof agent as the first generic —
  state, tool args, and per-subagent state flow through to every
  selector.

Public stream types Copy Chapter

Use StreamApi<T> when you need to name the return type of
injectStream, useStream, provideStream, or StreamService in
Angular code. It is the Angular-facing alias for the Signals-first
handle.

UseStreamResult<T> is also exported as a React-compatible alias for
the same shape. Prefer it only in shared utilities that are designed to
accept stream handles from multiple framework packages.

Documentation Copy Chapter

In-depth guides live under docs/:

• inject-stream.md — options + return-shape reference
• transports.md — SSE, WebSocket, and custom AgentServerAdapter
• custom-transport.md — implementing AgentServerAdapter against your own backend, with a worked walkthrough of examples/ui-react-transport
• selectors.md — scoped reads (injectMessages, injectValues, media, channels, …)
• interrupts.md — handling and responding to interrupts
• branching.md — forking via injectMessageMetadata + submit({ forkFrom })
• submission-queue.md — injectSubmissionQueue and multitaskStrategy: "enqueue"
• headless-tools.md — browser-side tool implementations
• subagents-subgraphs.md — discovery snapshots and scoped content
• dependency-injection.md — provideStream, provideStreamDefaults, StreamService
• type-safety.md — generics, agent inference, and public stream aliases
• testing.md — STREAM_INSTANCE fakes and service overrides
• v1-migration.md — migrating from 0.x

Playground Copy Chapter

For complete end-to-end examples, visit the
LangChain UI Playground.

License Copy Chapter

MIT

Overview (`libs/sdk-react/README.md`) Copy Section

@langchain/react

React SDK for building AI-powered applications with Deep Agents, LangChain and LangGraph.

@langchain/react v1 ships a v2-native 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, …).

Highlights Copy Chapter

• v2-native streaming protocol. Session-based transport with automatic re-attach on remount; no more reconnectOnMount / joinStream dance.
• Selector-based subscriptions. Namespaced data (subagents, subgraphs, media) streams only when a component actually mounts the matching selector hook, and releases on unmount.
• Always-on root projections. values, messages, toolCalls, and interrupts are live at the root with zero per-subscription cost.
• Agent-brand type inference. useStream<typeof agent>() unwraps state, tool calls, and subagent state maps from an agent brand.
• Discriminated options. The hosted Agent Server path and the custom-adapter path are two arms of a single typed union — mixing them is a compile-time error.
• Multimodal media streams. Built-in assembly for audio, images, video, and files.
• Suspense integration. useSuspenseStream hands the initial hydration phase to <Suspense> and non-streaming errors to Error Boundaries.

Installation Copy Chapter

npm install @langchain/react @langchain/core

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

Quick Start Copy Chapter

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

Mental model Copy Chapter

@langchain/react v1 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, discovery maps). Mount it once per thread.
2. Companion selector hooks. Each one 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, a specific extension channel, or a media stream.

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

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

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

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

Documentation Copy Chapter

Detailed guides live in ./docs. Start with the two files most apps need first:

• useStream — options, return shape, submit(), stop(), respond(), hydrationPromise.
• Companion selector hooks — useValues, useMessages, useToolCalls, useMessageMetadata, useChannel, useExtension, and friends.

Feature-specific guides:

• Transports — SSE, WebSocket, HttpAgentServerAdapter, custom AgentServerAdapter.
• Custom transports — implementing AgentServerAdapter against your own backend, with a worked walkthrough of examples/ui-react-transport.
• Interrupts & headless tools — pausing runs, respond(), tools + onTool.
• Fork / edit from a checkpoint — useMessageMetadata + submit({ forkFrom }).
• Submission queue — multitaskStrategy: "enqueue" + useSubmissionQueue.
• Subagents & subgraphs — discovery maps, scoped selector subscriptions.
• Multimodal media — useAudio / useImages / useVideo / useFiles, useMediaURL, players.
• useSuspenseStream — Suspense + Error Boundary integration.
• StreamProvider / useStreamContext — share one stream across a subtree.
• Type safety — agent-brand inference, prop-drilling, type helpers.

Migrating from v0 to v1 Copy Chapter

The useStream import name is unchanged, but the return shape, option bag, and protocol semantics all shifted. Most chat apps migrate in well under an hour — the full migration guide with line-by-line diffs lives in ./docs/v1-migration.md.

Legacy type aliases (UseStream, UseSuspenseStream, UseStreamOptions, UseStreamTransport, QueueEntry, GetToolCallsType, SubagentStream, …) and the legacy FetchStreamTransport class are no longer re-exported from @langchain/react. Apps still on the legacy surface can import directly from @langchain/langgraph-sdk/ui during their migration.

Playground Copy Chapter

For complete end-to-end examples with full agentic UIs, visit the LangChain UI Playground.

License Copy Chapter

MIT

Overview (`libs/sdk-svelte/README.md`) Copy Section

@langchain/svelte

Svelte 5 SDK for Deep Agents, LangChain and LangGraph.

useStream binds a LangGraph agent into a Svelte 5 component. Reactive fields are exposed as getters on a stable handle (stream.messages, stream.isLoading, …) so templates and $derived expressions track updates automatically — no stores, no $ prefix, no destructuring.

Installation Copy Chapter

npm install @langchain/svelte @langchain/core

Peer dependencies: svelte ^5.0.0, @langchain/core ^1.0.1

Quick start Copy Chapter

<script lang="ts">
  import { useStream } from "@langchain/svelte";

  const stream = useStream({
    assistantId: "agent",
    apiUrl: "http://localhost:2024",
  });
</script>

{#each stream.messages as msg (msg.id)}
  <div>{msg.content}</div>
{/each}

<button
  disabled={stream.isLoading}
  onclick={() =>
    stream.submit({ messages: [{ type: "human", content: "Hello!" }] })}
>
  Send
</button>

Note: Access fields through the live stream handle. Destructuring (const { messages } = stream) freezes the values at that moment — use stream.messages in templates instead.

Highlights Copy Chapter

• v2-native streaming protocol. Session-based transport with automatic re-attach on remount; no more reconnectOnMount / joinStream dance.
• Always-on root projections. values, messages, toolCalls, and interrupts are reactive at the root with zero extra subscription cost.
• Selector composables for scoped data. Per-subagent / per-subgraph messages, tool calls, and media stream only when a component actually mounts the matching composable, and release on unmount.
• Discriminated option bag. The hosted Agent Server path and the custom-adapter path are two arms of a single typed union — mixing them is a compile-time error.
• Reactive threadId. Pass threadId: () => active to drive in-place thread swaps without remounting.
• Agent-brand type inference. useStream<typeof agent>() unwraps state, tool calls, and subagent state maps from an agent brand.
• Multimodal media streams. Built-in assembly for audio, images, video, and files — plus opinionated playback helpers.
• Headless tools. Register local tool implementations that auto-resolve server-emitted tool-call interrupts without a round-trip through the UI.

Documentation Copy Chapter

In-depth guides live in docs/:

• useStream — options, return shape, reactive threadId
• Selector composables (useMessages, useToolCalls, useValues, …)
• Interrupts, respond(), stop(), hydrationPromise
• Submission queue
• Stream context (provideStream / getStream)
• Headless tools
• Custom transport (AgentServerAdapter, HttpAgentServerAdapter)
• Media (images, audio, video, files) & playback helpers
• Type safety

Migrating from v0 Copy Chapter

@langchain/svelte v1 targets the v2 streaming protocol. The useStream import stays the same, but the option bag, return shape, and how you subscribe to scoped data all change. Most chat apps migrate in well under an hour — the full guide with line-by-line diffs lives in docs/v1-migration.md.

Playground Copy Chapter

For full end-to-end examples, see the LangChain UI Playground.

License Copy Chapter

MIT

Overview (`libs/sdk-vue/README.md`) Copy Section

@langchain/vue

Vue SDK for building AI-powered applications with Deep Agents, LangChain and LangGraph.

The package ships a Composition-API–first binding built on top of
the v2 streaming protocol. useStream returns a small, always-on
root handle (values, messages, isLoading, error, …) and
pushes anything namespaced (subagents, subgraphs, media, submission
queue, per-message metadata) behind ref-counted use* selectors
so components only pay for the data they actually consume.

Upgrading from 0.x? See docs/v1-migration.md
for the complete matrix of option, return-shape, and transport
changes.

Highlights Copy Chapter

• v2-native streaming protocol. Session-based transport with
  automatic re-attach on remount — no reconnectOnMount /
  joinStream dance.
• Composition-API first. Everything is a ShallowRef /
  ComputedRef, auto-disposed via onScopeDispose when the scope
  unmounts.
• Selector-based subscriptions. Namespaced data (subagents,
  subgraphs, media) streams only when a component actually mounts
  the matching selector composable, and releases on unmount.
• Discriminated transports. Hosted Agent Server and custom
  adapters are two arms of a single typed union — mixing them is a
  compile-time error.
• Agent-brand type inference. useStream<typeof agent>()
  unwraps state, tool calls, and subagent state maps from an agent
  brand.
• Multimodal media streams. Built-in assembly for audio,
  images, video, and files, with ready-to-use `` / <audio> /
  <video> players.
• <Suspense> friendly. hydrationPromise lets you gate
  async setup() on initial hydration.

Installation Copy Chapter

npm install @langchain/vue @langchain/core

Peer dependencies: vue (^3.4.0), @langchain/core (^1.0.1).

Quick start Copy Chapter

<script setup lang="ts">
import { useStream } from "@langchain/vue";

const stream = useStream({
  assistantId: "agent",
  apiUrl: "http://localhost:2024",
});

function onSubmit() {
  void stream.submit({ messages: [{ type: "human", content: "Hello!" }] });
}
</script>

<template>
  <div>
    <div v-for="(msg, i) in stream.messages" :key="msg.id ?? i">
      {{ typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content) }}
    </div>

    <button :disabled="stream.isLoading" @click="onSubmit">
      Send
    </button>
  </div>
</template>

Reactive fields on the handle are Vue refs (ShallowRef /
ComputedRef). In <script setup>, read them with .value:
stream.messages.value, stream.isLoading.value. In <template>,
Vue auto-unwraps refs, so prefer the shorter
stream.messages / stream.isLoading form.

Documentation Copy Chapter

In-depth guides live in docs/:

• API reference — useStream options and
  return shape.
• Selectors — ref-counted readers for
  namespaced / scoped data.
• Transports — SSE, WebSocket, and custom
  AgentServerAdapter implementations.
• Custom transports — implementing
  AgentServerAdapter against your own backend, with a worked
  walkthrough of examples/ui-react-transport.
• Interrupts & headless tools — pausing a
  run, responding to interrupts, registering browser-side tools.
• Forking from a message — edit / retry flows
  with useMessageMetadata + submit({ forkFrom }).
• Submission queue — inspecting and
  cancelling enqueued submits.
• Subagents & subgraphs — rendering
  per-subagent messages, tool calls, and state via scoped selectors.
• Multimodal media — audio / image / video /
  file streams with built-in players.
• Sharing a stream — provideStream,
  useStreamContext, and the LangChainPlugin app-level defaults.
• Suspense-style hydration — gating
  async setup() on hydrationPromise.
• Type safety — brand inference, generics,
  and the exported helper types.
• Testing — mounting components with mock
  streams or real dev servers.
• Migrating from 0.x — full diff of
  options, return shape, and transport classes.

Playground Copy Chapter

For complete end-to-end examples with full agentic UIs, visit the
LangChain UI Playground.

License Copy Chapter

MIT

Overview (`libs/sdk/README.md`) Copy Section

`@langchain/langgraph-sdk`

The JavaScript / TypeScript SDK for talking to a LangGraph API server.
Use it to create and manage assistants, threads, runs, cron
schedules, and the KV store — and, most importantly, to stream
graph executions in real time.

📚 Full documentation

Install Copy Chapter

pnpm add @langchain/langgraph-sdk @langchain/core
# or: npm install @langchain/langgraph-sdk @langchain/core
# or: yarn add @langchain/langgraph-sdk @langchain/core

Quick start Copy Chapter

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

const client = new Client({ apiUrl: "http://localhost:2024" });

// Open a thread-centric stream (the recommended way to stream).
const thread = client.threads.stream({ assistantId: "my-agent" });

await thread.run.start({
  input: { messages: [{ role: "user", content: "hello" }] },
});

for await (const message of thread.messages) {
  for await (const token of message.text) {
    process.stdout.write(token);
  }
}

console.log(await thread.output);
await thread.close();

With no apiUrl, the SDK points at http://localhost:2024 (the
default langgraph dev URL).

What's in the SDK Copy Chapter

Streaming Copy Section

client.threads.stream(...) returns a ThreadStream
with typed, lazy projections for every aspect of a run:

• thread.messages / thread.toolCalls — assembled chat output.
• thread.values / thread.output — graph state and final answer.
• thread.interrupts / thread.interrupted — human-in-the-loop.
• thread.subgraphs / thread.subagents — nested / deep-agent work.
• thread.extensions.<name> — typed custom server projections.
• thread.audio / thread.images / thread.video / thread.files
  — media.

Deprecated. The generator-based streaming APIs on
client.runs.* (stream, joinStream) and client.threads.joinStream
are preserved for backwards compatibility only. New code should use
client.threads.stream(...). See
Runs (legacy) for migration guidance.

Transports Copy Section

Streaming defaults to Server-Sent Events (SSE) over HTTP. You can
switch to WebSocket per-call or globally, or plug in a custom
AgentServerAdapter:

const thread = client.threads.stream({
  assistantId: "my-agent",
  transport: "websocket",
});

See Transports for full details.

Framework adapters Copy Chapter

If you're building a UI, use the framework-specific packages that
wrap this SDK:

• @langchain/langgraph-sdk/react
• @langchain/langgraph-sdk/vue
• @langchain/langgraph-sdk/svelte
• @langchain/langgraph-sdk/angular

Use the SDK directly when you need low-level control, run it from a
non-browser environment (Node.js server, edge workers, scripts), or
integrate into a framework that does not yet have a first-party
adapter.

Architecture Copy Chapter

The client code is organized into sub-client modules under
src/client/:

Change log Copy Chapter

See CHANGELOG.md.

Overview (`internal/environment_tests/test-exports-cf/README.md`) Copy Section

test-exports-cf

This package was generated with wrangler init with the purpose of testing compatibility with Cloudlfare Workers.

Overview (`internal/environment_tests/test-exports-vercel/README.md`) Copy Section

This is a Next.js project bootstrapped with create-next-app.

Getting Started Copy Chapter

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More Copy Chapter

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel Copy Chapter

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Overview (`libs/sdk-angular/docs/README.md`) Copy Section

Angular SDK docs

This folder contains guides for using @langchain/angular to build
LangGraph-powered Angular applications. The docs cover the main stream API,
Angular dependency injection patterns, selectors, transports, and common
interactive agent workflows.

Core usage Copy Chapter

• inject-stream.md explains the primary injectStream
  API, including options, return values, and lifecycle behavior.
• dependency-injection.md covers
  provideStream, injectStream, stream defaults, and StreamService.
• type-safety.md describes agent-brand inference, stream
  aliases, and type helpers.
• testing.md shows how to test streams, selectors, and
  services.

Streaming features Copy Chapter

• selectors.md explains selector targets, scoped messages,
  media selectors, and cleanup behavior.
• submission-queue.md covers queued submissions,
  multitask strategies, and thread swaps.
• interrupts.md shows how to read and resume interrupts.
• headless-tools.md covers tool handlers and lifecycle
  events that run outside the visible UI.

Agent workflows Copy Chapter

• branching.md explains how to fork from a message using
  checkpoint IDs.
• subagents-subgraphs.md covers subagent and
  subgraph discovery, rendering, and namespace targeting.

Connectivity and migration Copy Chapter

• transports.md compares the built-in LangGraph Platform
  transports and custom adapters.
• custom-transport.md is the detailed guide for
  pointing injectStream at a custom backend — HttpAgentServerAdapter,
  server-side protocol handling, lazy thread binding, and implementing
  AgentServerAdapter directly.
• v1-migration.md explains how to migrate from earlier
  Angular SDK APIs to v1.

Overview (`libs/sdk-react/docs/README.md`) Copy Section

React SDK docs

This folder contains guides for using @langchain/react to build
LangGraph-powered React applications. The docs cover the core stream hooks,
context sharing, selectors, transports, and interactive agent patterns such as
interrupts, media, and subagents.

Core usage Copy Chapter

• use-stream.md explains the primary useStream hook,
  including options, return values, submissions, stopping, and hydration.
• context.md covers StreamProvider, useStreamContext,
  type inference, nested providers, and custom adapters.
• suspense.md describes useSuspenseStream and how it
  differs from useStream.
• type-safety.md explains agent-brand inference, custom
  state types, stream prop drilling, and helper types.

Streaming features Copy Chapter

• selectors.md covers companion selector hooks for reading
  root or scoped stream data.
• submission-queue.md explains multitask strategies,
  queued runs, cancellation, and thread switches.
• interrupts.md shows how to read, resume, and respond to
  interrupts, including headless tools.
• multimodal.md covers media handles, media hooks, and
  audio/video helpers.

Agent workflows Copy Chapter

• fork-from-checkpoint.md explains editing or
  retrying from a checkpoint.
• subagents.md covers subagent discovery snapshots,
  rendering subagent content, and subgraphs.

Connectivity Copy Chapter

• transports.md compares built-in SSE, WebSocket,
  header-based auth, and custom adapters.
• custom-transport.md is the detailed guide for
  pointing useStream at a custom backend — HttpAgentServerAdapter,
  server-side protocol handling, lazy thread binding, and implementing
  AgentServerAdapter directly.

Overview (`libs/sdk-svelte/docs/README.md`) Copy Section

Svelte SDK docs

This folder contains guides for using @langchain/svelte to build
LangGraph-powered Svelte applications. The docs cover the main stream
composable, stream context, selectors, custom transports, and interactive agent
workflows.

Core usage Copy Chapter

• use-stream.md explains the primary useStream
  composable, including options, return shape, and reactive threadId values.
• stream-context.md covers providing and reading a
  stream through Svelte context.
• type-safety.md explains agent-brand inference, custom
  state types, typed stream handles, and helper types.
• v1-migration.md explains how to migrate from
  @langchain/svelte v0 to v1.

Streaming features Copy Chapter

• selector-composables.md covers selector
  composables, per-subagent views, per-message metadata, and raw event access.
• submission-queue.md explains the submission queue
  exposed by the stream.
• interrupts.md shows how to handle targeted interrupts,
  stop runs, and use hydrationPromise.
• media.md covers media URLs and audio/video helpers.

Agent workflows and connectivity Copy Chapter

• headless-tools.md covers tool implementations and
  lifecycle events for headless tools.
• custom-transport.md is the detailed guide for
  pointing useStream at a custom backend in Svelte apps —
  HttpAgentServerAdapter, server-side protocol handling, lazy thread
  binding, and implementing AgentServerAdapter directly.

Overview (`libs/sdk-vue/docs/README.md`) Copy Section

Vue SDK docs

This folder contains guides for using @langchain/vue to build
LangGraph-powered Vue applications. The docs cover the stream composables,
context sharing, selectors, transports, testing, and advanced agent workflows.

Core usage Copy Chapter

• api-reference.md documents useStream options,
  return values, and related APIs.
• sharing-streams.md covers provideStream,
  useStreamContext, app-level defaults, and multi-agent layouts.
• suspense.md explains suspense-style hydration and
  hydrationPromise.
• type-safety.md explains agent-brand inference, custom
  state shapes, stream prop drilling, and helper types.
• testing.md shows how to test with provided streams.

Streaming features Copy Chapter

• selectors.md covers selector composables, target
  arguments, examples, and cleanup behavior.
• submission-queue.md explains queued submissions and
  thread switching.
• interrupts.md shows how to handle interrupts (including
  script vs template payload access and HITL), resume a specific interrupt,
  stop runs, and use headless tools.
• multimodal.md covers multimodal media selectors, helper
  APIs, examples, and subagent scoping.

Agent workflows Copy Chapter

• forking.md explains forking from a message for branching
  workflows.
• subagents.md covers subagent and subgraph rendering,
  listing, and discovery.

Connectivity and migration Copy Chapter

• transports.md compares built-in SSE, WebSocket, and
  custom adapter options.
• custom-transport.md is the detailed guide for
  pointing useStream at a custom backend — HttpAgentServerAdapter,
  server-side protocol handling, lazy thread binding, and implementing
  AgentServerAdapter directly.
• v1-migration.md explains how to migrate to
  @langchain/vue v1.

Overview (`libs/sdk/docs/README.md`) Copy Section

`@langchain/langgraph-sdk`

The JavaScript / TypeScript SDK for talking to a LangGraph API server. Use
it to create and manage assistants, threads, runs, cron schedules, and the
KV store — and, most importantly, to stream graph executions in real
time.

If you're building a UI on top of LangGraph, the framework-specific
packages are thin wrappers around this SDK:

• @langchain/react
• @langchain/vue
• @langchain/svelte
• @langchain/angular

Use the SDK directly when you need low-level control, run it from a
non-browser environment (Node.js server, edge workers, scripts), or
integrate into a framework that is not yet covered by a first-party
adapter.

Table of contents Copy Chapter

1. Getting started — install, create a Client,
   make your first request.
2. Configuration — apiUrl, apiKey, headers,
   timeouts, retries, request hooks, and the streamProtocol flag.
3. Streaming (recommended)
   • Overview — the ThreadStream primitive returned
     by client.threads.stream(...).
   • Messages & tokens — stream text and
     reasoning deltas from chat models.
   • Interrupts & human-in-the-loop —
     pause, inspect, and resume runs.
   • Subgraphs —
     observe nested work in fan-out graphs.
   • Subagents —
     observe deepagents-specific task-tool workers.
   • Custom transformers (extensions) —
     consume custom:<name> projections with end-to-end typing.
   • Media blocks — audio, image, video, and
     file streams.
   • Advanced: raw subscriptions —
     subscribe(), onEvent(), state.*, channel filters.
   • Transports — SSE, WebSocket, and custom
     AgentServerAdapters.
4. Sub-clients
   • Assistants — client.assistants.
   • Threads — client.threads (CRUD, state, history).
   • Runs (legacy) — client.runs (deprecated for
     streaming; use client.threads.stream
     instead).
   • Cron jobs — client.crons.
   • KV store — client.store.

Which API do I use for streaming? Copy Chapter

The SDK ships with two generations of streaming APIs. New code should
always use the v2 client.threads.stream(...) primitive. The legacy
generators on client.runs.* are preserved for backwards compatibility
only.

• Stream a run with typed projections: client.threads.stream(...) ✅ recommended
• Stream messages token-by-token: thread.messages ✅
• Human-in-the-loop: thread.interrupts + thread.input.respond(...) ✅
• Subgraph tree: thread.subgraphs ✅
• Deep-agent subagents: thread.subagents ✅
• Custom server-side projections: thread.extensions.<name> ✅
• Re-attach to an in-flight run: client.threads.stream(threadId, { assistantId }) ✅
• client.runs.stream(...) / runs.joinStream(): ⚠️ Legacy — see Runs (legacy) for migration guidance

Quick peek Copy Chapter

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

const client = new Client({ apiUrl: "http://localhost:2024" });

const thread = client.threads.stream({ assistantId: "my-agent" });

await thread.run.start({
  input: { messages: [{ role: "user", content: "hello" }] },
});

for await (const message of thread.messages) {
  for await (const token of message.text) {
    process.stdout.write(token);
  }
}

console.log(await thread.output);
await thread.close();

Continue with Getting started.

Docs Index (`docs/docs/index.md`) Copy Section

hide_comments: true title: LangGraph Copy Chapter

{!README.md!}

Docs Llms Txt Overview (`docs/docs/llms-txt-overview.md`) Copy Section

LLMs-txt Overview

Overview Copy Chapter

Below you can find a list of documentation files in the llms.txt format, specifically llms.txt and llms-full.txt. These files allow large language models (LLMs) and agents to access programming documentation and APIs, particularly useful within integrated development environments (IDEs).

!!! info "Review the output"

Even with access to up-to-date documentation, current state-of-the-art models may not always generate correct code. Treat the generated code as a starting point, and always review it before shipping
code to production.

Differences Between `llms.txt` and `llms-full.txt` Copy Chapter

• llms.txt is an index file containing links with brief descriptions of the content. An LLM or agent must follow these links to access detailed information.

• llms-full.txt includes all the detailed content directly in a single file, eliminating the need for additional navigation.

A key consideration when using llms-full.txt is its size. For extensive documentation, this file may become too large to fit into an LLM's context window.

Using `llms.txt` via an MCP Server Copy Chapter

As of March 9, 2025, IDEs do not yet have robust native support for llms.txt. However, you can still use llms.txt effectively through an MCP server.

🚀 Use the `mcpdoc` Server Copy Section

We provide an MCP server that was designed to serve documentation for LLMs and IDEs:

👉 langchain-ai/mcpdoc GitHub Repository

This MCP server allows integrating llms.txt into tools like Cursor, Windsurf, Claude, and Claude Code.

📘 Setup instructions and usage examples are available in the repository.

Using `llms-full.txt` Copy Chapter

The LangGraph llms-full.txt file typically contains several hundred thousand tokens, exceeding the context window limitations of most LLMs. To effectively use this file:

1. With IDEs (e.g., Cursor, Windsurf):

   • Add the llms-full.txt as custom documentation. The IDE will automatically chunk and index the content, implementing Retrieval-Augmented Generation (RAG).

2. Without IDE support:

   • Use a chat model with a large context window.
   • Implement a RAG strategy to manage and query the documentation efficiently.

Docs Agents Overview (`docs/docs/agents/overview.md`) Copy Section

title: Overview Copy Chapter

Agent development with LangGraph

LangGraph provides both low-level primitives and high-level prebuilt components for building agent-based applications. This section focuses on the prebuilt, reusable components designed to help you construct agentic systems quickly and reliably—without the need to implement orchestration, memory, or human feedback handling from scratch.

What is an agent? Copy Chapter

An agent consists of three components: a large language model (LLM), a set of tools it can use, and a prompt that provides instructions.

The LLM operates in a loop. In each iteration, it selects a tool to invoke, provides input, receives the result (an observation), and uses that observation to inform the next action. The loop continues until a stopping condition is met — typically when the agent has gathered enough information to respond to the user.

Key features Copy Chapter

LangGraph includes several capabilities essential for building robust, production-ready agentic systems:

• Memory integration: Native support for short-term (session-based) and long-term (persistent across sessions) memory, enabling stateful behaviors in chatbots and assistants.
• Human-in-the-loop control: Execution can pause indefinitely to await human feedback—unlike websocket-based solutions limited to real-time interaction. This enables asynchronous approval, correction, or intervention at any point in the workflow.
• Streaming support: Real-time streaming of agent state, model tokens, tool outputs, or combined streams.
• Deployment tooling: Includes infrastructure-free deployment tools. LangGraph Platform supports testing, debugging, and deployment.
  • Studio: A visual IDE for inspecting and debugging workflows.
  • Supports multiple deployment options for production.

High-level building blocks Copy Chapter

LangGraph comes with a set of prebuilt components that implement common agent behaviors and workflows. These abstractions are built on top of the LangGraph framework, offering a faster path to production while remaining flexible for advanced customization.

Using LangGraph for agent development allows you to focus on your application's logic and behavior, instead of building and maintaining the supporting infrastructure for state, memory, and human feedback.

Package ecosystem Copy Chapter

The high-level components are organized into several packages, each with a specific focus.

Visualize an agent graph Copy Chapter

Use the following tool to visualize the graph generated by createReactAgent and to view an outline of the corresponding code. It allows you to explore the infrastructure of the agent as defined by the presence of:

• tools: A list of tools (functions, APIs, or other callable objects) that the agent can use to perform tasks.

• preModelHook: A function that is called before the model is invoked. It can be used to condense messages or perform other preprocessing tasks.

• postModelHook: A function that is called after the model is invoked. It can be used to implement guardrails, human-in-the-loop flows, or other postprocessing tasks.

• responseFormat: A data structure used to constrain the type of the final output (via Zod schemas).

  text Copy

  <h3 class="agent-section-title">Features</h3>
  <label> `tools`</label>
  <label> `preModelHook`</label>
  <label> `postModelHook`</label>
  <label> `responseFormat`</label>

  Graph

The following code snippet shows how to create the above agent (and underlying graph) with createReactAgent:

Docs Concepts Index (`docs/docs/concepts/index.md`) Copy Section

title: Concepts Copy Chapter

Conceptual Guide

This guide provides explanations of the key concepts behind the LangGraph framework and AI applications more broadly.

We recommend that you go through at least the Quick Start before diving into the conceptual guide. This will provide practical context that will make it easier to understand the concepts discussed here.

The conceptual guide does not cover step-by-step instructions or specific implementation examples — those are found in the Tutorials and How-to guides. For detailed reference material, please see the API reference.

LangGraph Copy Chapter

High Level Copy Section

• Why LangGraph?: A high-level overview of LangGraph and its goals.

Concepts Copy Section

• LangGraph Glossary: LangGraph workflows are designed as graphs, with nodes representing different components and edges representing the flow of information between them. This guide provides an overview of the key concepts associated with LangGraph graph primitives.
• Common Agentic Patterns: An agent uses an LLM to pick its own control flow to solve more complex problems! Agents are a key building block in many LLM applications. This guide explains the different types of agent architectures and how they can be used to control the flow of an application.
• Multi-Agent Systems: Complex LLM applications can often be broken down into multiple agents, each responsible for a different part of the application. This guide explains common patterns for building multi-agent systems.
• Breakpoints: Breakpoints allow pausing the execution of a graph at specific points. Breakpoints allow stepping through graph execution for debugging purposes.
• Human-in-the-Loop: Explains different ways of integrating human feedback into a LangGraph application.
• Time Travel: Time travel allows you to replay past actions in your LangGraph application to explore alternative paths and debug issues.
• Persistence: LangGraph has a built-in persistence layer, implemented through checkpointers. This persistence layer helps to support powerful capabilities like human-in-the-loop, memory, time travel, and fault-tolerance.
• Memory: Memory in AI applications refers to the ability to process, store, and effectively recall information from past interactions. With memory, your agents can learn from feedback and adapt to users' preferences.
• Streaming: Streaming is crucial for enhancing the responsiveness of applications built on LLMs. By displaying output progressively, even before a complete response is ready, streaming significantly improves user experience (UX), particularly when dealing with the latency of LLMs.
• Functional API: An alternative to Graph API (StateGraph) for development in LangGraph.
• FAQ: Frequently asked questions about LangGraph.

LangGraph Platform Copy Chapter

LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework.

The LangGraph Platform offers a few different deployment options described in the deployment options guide.

!!! tip

* LangGraph is an MIT-licensed open-source library, which we are committed to maintaining and growing for the community.
* You can always deploy LangGraph applications on your own infrastructure using the open-source LangGraph project without using LangGraph Platform.

High Level Copy Section

• Why LangGraph Platform?: The LangGraph platform is an opinionated way to deploy and manage LangGraph applications. This guide provides an overview of the key features and concepts behind LangGraph Platform.
• Deployment Options: LangGraph Platform offers four deployment options: Self-Hosted Lite, Self-Hosted Enterprise, bring your own cloud (BYOC), and Cloud SaaS. This guide explains the differences between these options, and which Plans they are available on.
• Plans: LangGraph Platforms offer three different plans: Developer, Plus, Enterprise. This guide explains the differences between these options, what deployment options are available for each, and how to sign up for each one.
• Template Applications: Reference applications designed to help you get started quickly when building with LangGraph.

Components Copy Section

The LangGraph Platform comprises several components that work together to support the deployment and management of LangGraph applications:

• LangGraph Server: The LangGraph Server is designed to support a wide range of agentic application use cases, from background processing to real-time interactions.
• LangGraph Studio: LangGraph Studio is a specialized IDE that can connect to a LangGraph Server to enable visualization, interaction, and debugging of the application locally.
• LangGraph CLI: LangGraph CLI is a command-line interface that helps to interact with a local LangGraph
• Python/JS SDK: The Python/JS SDK provides a programmatic way to interact with deployed LangGraph Applications.
• Remote Graph: A RemoteGraph allows you to interact with any deployed LangGraph application as though it were running locally.

LangGraph Server Copy Section

• Application Structure: A LangGraph application consists of one or more graphs, a LangGraph API Configuration file (langgraph.json), a file that specifies dependencies, and environment variables.
• Assistants: Assistants are a way to save and manage different configurations of your LangGraph applications.
• Web-hooks: Webhooks allow your running LangGraph application to send data to external services on specific events.
• Cron Jobs: Cron jobs are a way to schedule tasks to run at specific times in your LangGraph application.
• Double Texting: Double texting is a common issue in LLM applications where users may send multiple messages before the graph has finished running. This guide explains how to handle double texting with LangGraph Deploy.
• Authentication & Access Control: Learn about options for authentication and access control when deploying the LangGraph Platform.

Deployment Options Copy Section

• Self-Hosted Lite: A free (up to 1 million nodes executed), limited version of LangGraph Platform that you can run locally or in a self-hosted manner
• Cloud SaaS: Hosted as part of LangSmith.
• Bring Your Own Cloud: We manage the infrastructure, so you don't have to, but the infrastructure all runs within your cloud.
• Self-Hosted Enterprise: Completely managed by you.

Docs How Tos Index (`docs/docs/how-tos/index.md`) Copy Section

title: How-to Guides Copy Chapter

How-to guides

Here you’ll find answers to “How do I...?” types of questions. These guides are goal-oriented and concrete; they're meant to help you complete a specific task. For conceptual explanations see the Conceptual guide. For end-to-end walk-throughs see Tutorials. For comprehensive descriptions of every class and function see the API Reference.

Installation Copy Chapter

• How to install and manage dependencies
• How to use LangGraph.js in web environments

LangGraph Copy Chapter

Controllability Copy Section

LangGraph.js is known for being a highly controllable agent framework.
These how-to guides show how to achieve that controllability.

• How to create branches for parallel execution
• How to create map-reduce branches for parallel execution
• How to defer node execution
• How to combine control flow and state updates with Command
• How to create and control loops with recursion limits

Persistence Copy Section

LangGraph.js makes it easy to persist state across graph runs. The guides below shows how to add persistence to your graph.

• How to add thread-level persistence to your graph
• How to add thread-level persistence to subgraphs
• How to add cross-thread persistence
• How to use a Postgres checkpointer for persistence

See the below guides for how-to add persistence to your workflow using the Functional API:

• How to add thread-level persistence (functional API)
• How to add cross-thread persistence (functional API)

Memory Copy Section

LangGraph makes it easy to manage conversation memory in your graph. These how-to guides show how to implement different strategies for that.

• How to manage conversation history
• How to delete messages
• How to add summary of the conversation history
• How to add long-term memory (cross-thread)
• How to use semantic search for long-term memory

Human-in-the-loop Copy Section

Human-in-the-loop functionality allows
you to involve humans in the decision-making process of your graph. These how-to guides show how to implement human-in-the-loop workflows in your graph.

Key workflows:

• How to wait for user input: A basic example that shows how to implement a human-in-the-loop workflow in your graph using the interrupt function.
• How to review tool calls: Incorporate human-in-the-loop for reviewing/editing/accepting tool call requests before they executed using the interrupt function.

Other methods:

• How to add static breakpoints: Use for debugging purposes. For human-in-the-loop workflows, we recommend the interrupt function instead.
• How to edit graph state: Edit graph state using graph.update_state method. Use this if implementing a human-in-the-loop workflow via static breakpoints.
• How to add dynamic breakpoints with NodeInterrupt: Not recommended: Use the interrupt function instead.

See the below guides for how-to implement human-in-the-loop workflows with the Functional API:

• How to wait for user input (Functional API)
• How to review tool calls (Functional API)

Time Travel Copy Section

Time travel allows you to replay past actions in your LangGraph application to explore alternative paths and debug issues. These how-to guides show how to use time travel in your graph.

• How to view and update past graph state

Streaming Copy Section

LangGraph is built to be streaming first.
These guides show how to use different streaming modes.

• How to stream the full state of your graph
• How to stream state updates of your graph
• How to stream LLM tokens
• How to stream LLM tokens without LangChain models
• How to stream custom data
• How to configure multiple streaming modes
• How to stream events from within a tool
• How to stream from the final node

Tool calling Copy Section

• How to call tools using ToolNode
• How to force an agent to call a tool
• How to handle tool calling errors
• How to pass runtime values to tools
• How to update graph state from tools

Subgraphs Copy Section

Subgraphs allow you to reuse an existing graph from another graph. These how-to guides show how to use subgraphs:

• How to add and use subgraphs
• How to view and update state in subgraphs
• How to transform inputs and outputs of a subgraph

Multi-agent Copy Section

• How to build a multi-agent network
• How to add multi-turn conversation in a multi-agent application

See the multi-agent tutorials for implementations of other multi-agent architectures.

See the below guides for how-to implement multi-agent workflows with the Functional API:

• How to build a multi-agent network (functional API)
• How to add multi-turn conversation in a multi-agent application (functional API)

State management Copy Section

• How to define graph state
• Have a separate input and output schema
• Pass private state between nodes inside the graph

Other Copy Section

• How to add runtime configuration to your graph
• How to add node retries
• How to cache expensive nodes
• How to let an agent return tool results directly
• How to have an agent respond in structured format
• How to manage agent steps

Prebuilt ReAct Agent Copy Section

• How to create a ReAct agent
• How to add memory to a ReAct agent
• How to add a system prompt to a ReAct agent
• How to add Human-in-the-loop to a ReAct agent
• How to return structured output from a ReAct agent

See the below guide for how-to build ReAct agents with the Functional API:

• How to create a ReAct agent from scratch (Functional API)

LangGraph Platform Copy Chapter

This section includes how-to guides for LangGraph Platform.

LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework. It provides four deployment options to fit a range of needs: a free tier, a self-hosted version, a cloud SaaS, and a Bring Your Own Cloud (BYOC) option. You can explore these options in detail in the deployment options guide.

!!! tip

* LangGraph is an MIT-licensed open-source library, which we are committed to maintaining and growing for the community.
* You can always deploy LangGraph applications on your own infrastructure using the open-source LangGraph project without using LangGraph Platform.

Application Structure Copy Section

Learn how to set up your app for deployment to LangGraph Platform:

• How to set up app for deployment (requirements.txt)
• How to set up app for deployment (pyproject.toml)
• How to set up app for deployment (JavaScript)
• How to customize Dockerfile
• How to test locally
• How to integrate LangGraph into your React application

Deployment Copy Section

LangGraph applications can be deployed using LangGraph Cloud, which provides a range of services to help you deploy, manage, and scale your applications.

• How to deploy to LangGraph cloud
• How to deploy to a self-hosted environment
• How to interact with the deployment using RemoteGraph

Authentication & Access Control Copy Section

• How to add custom authentication

Modifying the API Copy Section

• How to add custom routes
• How to add custom middleware

Assistants Copy Section

Assistants are a configured instance of a template.

• How to configure agents
• How to version assistants

Threads Copy Section

• How to copy threads
• How to check status of your threads

Runs Copy Section

LangGraph Cloud supports multiple types of runs besides streaming runs.

• How to run an agent in the background
• How to run multiple agents in the same thread
• How to create cron jobs
• How to create stateless runs

Streaming Copy Section

Streaming the results of your LLM application is vital for ensuring a good user experience, especially when your graph may call multiple models and take a long time to fully complete a run. Read about how to stream values from your graph in these how to guides:

• How to stream values
• How to stream updates
• How to stream messages
• How to stream events
• How to stream in debug mode
• How to stream multiple modes

Frontend & Generative UI Copy Section

With LangGraph Platform you can integrate LangGraph agents into your React applications and colocate UI components with your agent code.

• How to integrate LangGraph into your React application
• How to implement Generative User Interfaces with LangGraph

Human-in-the-loop Copy Section

When creating complex graphs, leaving every decision up to the LLM can be dangerous, especially when the decisions involve invoking certain tools or accessing specific documents. To remedy this, LangGraph allows you to insert human-in-the-loop behavior to ensure your graph does not have undesired outcomes. Read more about the different ways you can add human-in-the-loop capabilities to your LangGraph Cloud projects in these how-to guides:

• How to add a breakpoint
• How to wait for user input
• How to edit graph state
• How to replay and branch from prior states
• How to review tool calls

Double-texting Copy Section

Graph execution can take a while, and sometimes users may change their mind about the input they wanted to send before their original input has finished running. For example, a user might notice a typo in their original request and will edit the prompt and resend it. Deciding what to do in these cases is important for ensuring a smooth user experience and preventing your graphs from behaving in unexpected ways. The following how-to guides provide information on the various options LangGraph Cloud gives you for dealing with double-texting:

• How to use the interrupt option
• How to use the rollback option
• How to use the reject option
• How to use the enqueue option

Webhooks Copy Section

• How to integrate webhooks

Cron Jobs Copy Section

• How to create cron jobs

LangGraph Studio Copy Section

LangGraph Studio is a built-in UI for visualizing, testing, and debugging your agents.

• How to connect to a LangGraph Cloud deployment
• How to connect to a local deployment
• How to test your graph in LangGraph Studio
• How to interact with threads in LangGraph Studio

Troubleshooting Copy Chapter

These are the guides for resolving common errors you may find while building with LangGraph. Errors referenced below will have an lc_error_code property corresponding to one of the below codes when they are thrown in code.

• GRAPH_RECURSION_LIMIT
• INVALID_CONCURRENT_GRAPH_UPDATE
• INVALID_GRAPH_NODE_RETURN_VALUE
• MULTIPLE_SUBGRAPHS
• UNREACHABLE_NODE

Docs Tutorials Index (`docs/docs/tutorials/index.md`) Copy Section

title: Tutorials Copy Chapter

Tutorials

Welcome to the LangGraph.js Tutorials! These notebooks introduce LangGraph through building various language agents and applications.

Quick Start Copy Chapter

Learn the basics of LangGraph through a comprehensive quick start in which you will build an agent from scratch.

• Quick Start
• Common Workflows: Overview of the most common workflows using LLMs implemented with LangGraph.
• LangGraph Cloud Quick Start: In this tutorial, you will build and deploy an agent to LangGraph Cloud.

Use cases Copy Chapter

Learn from example implementations of graphs designed for specific scenarios and that implement common design patterns.

Chatbots

• Customer support with a small model

RAG

• Agentic RAG
• Corrective RAG
• Self-RAG

Multi-Agent Systems

• Collaboration: Enabling two agents to collaborate on a task
• Supervision: Using an LLM to orchestrate and delegate to individual agents
• Hierarchical Teams: Orchestrating nested teams of agents to solve problems

Planning Agents

• Plan-and-Execute: Implementing a basic planning and execution agent

Reflection & Critique

• Basic Reflection: Prompting the agent to reflect on and revise its outputs
• Rewoo: Reducing re-planning by saving observations as variables

Evaluation Copy Section

• Agent-based: Evaluate chatbots via simulated user interactions

Docs Versions Index (`docs/docs/versions/index.md`) Copy Section

LangGraph Over Time

As LangGraph.js continues to evolve and improve, breaking changes are sometimes necessary to enhance functionality, performance, or developer experience. This page serves as a guide to the version history of LangGraph.js, documenting significant changes and providing assistance for upgrading between versions.

Version History Copy Chapter

v0.4.x (Latest) Copy Section

• (Breaking) Cleanup of the Interrupt interface: removing when, ns in favour of id and values.
• (Breaking) Removed writes from checkpoints. You will need to upgrade your checkpointer packages.
• (Breaking) Allow async serialization and deserialization of values from checkpointers.
• (Breaking) Removed unused support for SharedValue and managed values.
• Improved type-inference of configurable fields (0.4.0) and streamMode: "updates" (0.4.4).
• Added support for context property and Runtime type.
• Added support for deleteThread in checkpointers.
• Added support for durability property superseding checkpointDuring.
• Added support for dynamic model choice in createReactAgent (0.4.3).
• Added support for partially applying tool calls in createReactAgent["postModelHook"] (0.4.3).
• Numerous bugfixes.

v0.3.0 Copy Section

• (Breaking) Interrupts are now properly propagated in "values" stream mode and in .invoke().
• (Breaking) Return type of .stream() is now strictly typed.
• Added support for node / task caching.
• Added support for deferred nodes.
• Added support for preModelHook and postModelHook in createReactAgent.
• Added support for addSequence and shorthand object syntax for addNode.
• Added pushMessage() method to allow manually pushing messages to "messages" stream mode.
• Added isInterrupted() method to check if the state contains an interrupt.
• Numerous bugfixes.

v0.2.0 Copy Section

• (Breaking) @langchain/core is now a peer dependency and requires explicit installation.
• Added support for dynamic breakpoints.
• Added support for separate input and output schema.
• Allow using an array to specify destination nodes from a conditional edge as shorthand for object.
• Numerous bugfixes.

v0.1.0 Copy Section

• (Breaking) Changed checkpoint representations to support namespacing for subgraphs and pending writes.
• (Breaking) MessagesState was changed to MessagesAnnotation.
• Added Annotation, a more streamlined way to declare state. Removes the need for separate type and channel declarations.
• Split checkpointer implementations into different libraries for easier inheritance.
• Major internal architecture refactor to use more robust patterns.
• Deprecated MessageGraph in favor of StateGraph + MessagesAnnotation.
• Numerous bugfixes.

Upgrading Copy Chapter

When upgrading LangGraph.js, please refer to the specific version sections below for detailed instructions on how to adapt your code to the latest changes.

Upgrading to v0.3.0 Copy Section

• If a node is interrupted, it will now be present in the "values" stream mode and in .invoke() under the __interrupts key. You can use the isInterrupted() method to check if the state contains an interrupt and handle it appropriately.
• The return type of .stream() is no longer IterableReadableStream<any>, which means you may need to fix any type errors.

Upgrading to v0.2.0 Copy Section

• You will now need to install @langchain/core explicitly. See this page for more information.

Upgrading to v0.1.0 Copy Section

• Old saved checkpoints will no longer be valid, and you will need to update to use a new prebuilt checkpointer.
• We recommend switching to the new Annotation syntax when declaring graph state.

Deprecation Notices Copy Chapter

This section will list any deprecated features or APIs, along with their planned removal dates and recommended alternatives.

`MessageGraph`

Use MessagesAnnotation with StateGraph.

`createFunctionCallingExecutor`

Use createReactAgent with a model that supports tool calling.

`ToolExecutor`

Use ToolNode instead.

Full changelog Copy Chapter

For the most up-to-date information on LangGraph.js versions and changes, please refer to our GitHub repository and release notes.

Libs Sdk Docs Getting Started (`libs/sdk/docs/getting-started.md`) Copy Section

Getting started

Install Copy Chapter

npm add @langchain/langgraph-sdk @langchain/core
# or
pnpm add @langchain/langgraph-sdk @langchain/core
# or
yarn add @langchain/langgraph-sdk @langchain/core

@langchain/core is a required peer dependency. Install it alongside
the SDK unless you already depend on @langchain/langgraph (which
peers the same package).

The SDK targets modern runtimes (Node ≥ 18, evergreen browsers, Deno,
Bun, Cloudflare Workers, Vercel Edge). No additional polyfills are
required in environments that ship fetch, ReadableStream, and
AbortController.

Create a client Copy Chapter

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

const client = new Client({
  apiUrl: "http://localhost:2024",
});

With zero arguments, the client defaults to http://localhost:8123
(the LangGraph dev server) and picks up an API key from the
LANGGRAPH_API_KEY, LANGSMITH_API_KEY, or LANGCHAIN_API_KEY
environment variables. See Configuration for the
full option bag.

Your first request Copy Chapter

Discover an assistant Copy Section

A fresh LangGraph project auto-creates one assistant per graph
registered in langgraph.json. List them:

const assistants = await client.assistants.search({ limit: 10 });
const agent = assistants[0];
console.log(agent.assistant_id, agent.graph_id);

Stream a run (recommended) Copy Section

Use client.threads.stream(...) — the v2 thread-centric streaming API:

const thread = client.threads.stream({ assistantId: agent.assistant_id });

await thread.run.start({
  input: { messages: [{ role: "user", content: "what's 42 * 17?" }] },
});

for await (const message of thread.messages) {
  for await (const token of message.text) {
    process.stdout.write(token);
  }
  process.stdout.write("\n");
}

console.log("final state:", await thread.output);
await thread.close();

thread.messages, thread.values, thread.toolCalls, thread.subgraphs,
and thread.extensions.<name> are lazy — only the projections you
actually touch are streamed across the wire. Everything is covered in
detail in Streaming.

Call a non-streaming API Copy Section

Every sub-client also exposes plain async methods for CRUD-style work:

const thread = await client.threads.create({ metadata: { topic: "math" } });
await client.threads.update(thread.thread_id, {
  metadata: { topic: "algebra" },
});
await client.store.putItem(["notes"], "first", {
  body: "thread opened",
});

See the sub-client guides under the main index.

TypeScript support Copy Chapter

Every response shape is fully typed. The Client constructor accepts
three type parameters for graph-specific state:

type State = { messages: BaseMessage[]; summary?: string };
type Update = Partial<State>;
type CustomEvent = { kind: "progress"; pct: number };

const client = new Client<State, Update, CustomEvent>({ apiUrl: "..." });

const state = await client.threads.getState<State>(threadId);
//    ^? ThreadState<State>

For streaming, use the generic on threads.stream() to type server-side
transformer projections end-to-end:

type Extensions = InferExtensions<[typeof myTransformer]>;
const thread = client.threads.stream<Extensions>({ assistantId: "agent" });
//    ^? ThreadStream<Extensions>

See Custom transformers for details.

What to read next Copy Chapter

• Configuration — tune Client for your
  environment.
• Streaming — the recommended streaming primitive
  and its lazy projections.
• Threads — CRUD, state, history, checkpoints,
  pruning, and more.

Docs Troubleshooting Errors Index (`docs/docs/troubleshooting/errors/index.md`) Copy Section

Error reference

This page contains guides around resolving common errors you may find while building with LangChain.
Errors referenced below will have an lc_error_code property corresponding to one of the below codes when they are thrown in code.

• GRAPH_RECURSION_LIMIT
• INVALID_CONCURRENT_GRAPH_UPDATE
• INVALID_GRAPH_NODE_RETURN_VALUE
• MULTIPLE_SUBGRAPHS
• UNREACHABLE_NODE

Docs Tutorials Workflows Index (`docs/docs/tutorials/workflows/index.md`) Copy Section

Workflows and Agents

This guide reviews common patterns for agentic systems. In describing these systems, it can be useful to make a distinction between "workflows" and "agents". One way to think about this difference is nicely explained here by Anthropic:

Workflows are systems where LLMs and tools are orchestrated through predefined code paths.
Agents, on the other hand, are systems where LLMs dynamically direct their own processes and tool usage, maintaining control over how they accomplish tasks.

Here is a simple way to visualize these differences:

When building agents and workflows, LangGraph offers a number of benefits including persistence, streaming, and support for debugging as well as deployment.

Set up Copy Chapter

!!! note Compatibility

The Functional API requires `@langchain/langgraph>=0.2.24`.

You can use any chat model that supports structured outputs and tool calling. Below, we show the process of installing the packages, setting API keys, and testing structured outputs / tool calling for Anthropic.

??? "Install dependencies"

```bash
yarn add @langchain/langgraph @langchain/anthropic @langchain/core
```

Initialize an LLM

import { ChatAnthropic } from "@langchain/anthropic";

process.env.ANTHROPIC_API_KEY = "<your_anthropic_key>";

const llm = new ChatAnthropic({
  model: "claude-3-5-sonnet-latest",
});

Building Blocks: The Augmented LLM Copy Chapter

LLM have augmentations that support building workflows and agents. These include structured outputs and tool calling, as shown in this image from the Anthropic blog:

import { tool } from "@langchain/core/tools";
import { z } from "zod";

const searchQuerySchema = z.object({
  searchQuery: z.string().describe("Query that is optimized web search."),
  justification: z.string("Why this query is relevant to the user's request."),
});

// Augment the LLM with schema for structured output
const structuredLlm = llm.withStructuredOutput(searchQuerySchema, {
  name: "searchQuery",
});

// Invoke the augmented LLM
const output = await structuredLlm.invoke(
  "How does Calcium CT score relate to high cholesterol?"
);

const multiply = tool(
  async ({ a, b }) => {
    return a * b;
  },
  {
    name: "multiply",
    description: "multiplies two numbers together",
    schema: z.object({
      a: z.number("the first number"),
      b: z.number("the second number"),
    }),
  }
);

// Augment the LLM with tools
const llmWithTools = llm.bindTools([multiply]);

// Invoke the LLM with input that triggers the tool call
const message = await llmWithTools.invoke("What is 2 times 3?");

console.log(message.tool_calls);

Prompt chaining Copy Chapter

In prompt chaining, each LLM call processes the output of the previous one.

As noted in the Anthropic blog:

Prompt chaining decomposes a task into a sequence of steps, where each LLM call processes the output of the previous one. You can add programmatic checks (see "gate” in the diagram below) on any intermediate steps to ensure that the process is still on track.

When to use this workflow: This workflow is ideal for situations where the task can be easily and cleanly decomposed into fixed subtasks. The main goal is to trade off latency for higher accuracy, by making each LLM call an easier task.

=== "Graph API"

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/a0281fca-3a71-46de-beee-791468607b75/r

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/332fa4fc-b6ca-416e-baa3-161625e69163/r

Parallelization Copy Chapter

With parallelization, LLMs work simultaneously on a task:

LLMs can sometimes work simultaneously on a task and have their outputs aggregated programmatically. This workflow, parallelization, manifests in two key variations: Sectioning: Breaking a task into independent subtasks run in parallel. Voting: Running the same task multiple times to get diverse outputs.

When to use this workflow: Parallelization is effective when the divided subtasks can be parallelized for speed, or when multiple perspectives or attempts are needed for higher confidence results. For complex tasks with multiple considerations, LLMs generally perform better when each consideration is handled by a separate LLM call, allowing focused attention on each specific aspect.

=== "Graph API"

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/3be2e53c-ca94-40dd-934f-82ff87fac277/r

    **Resources:**

    **Documentation**

    See our documentation on parallelization [here](https://langchain-ai.github.io/langgraphjs/how-tos/branching/).

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/623d033f-e814-41e9-80b1-75e6abb67801/r

Routing Copy Chapter

Routing classifies an input and directs it to a followup task. As noted in the Anthropic blog:

Routing classifies an input and directs it to a specialized followup task. This workflow allows for separation of concerns, and building more specialized prompts. Without this workflow, optimizing for one kind of input can hurt performance on other inputs.

When to use this workflow: Routing works well for complex tasks where there are distinct categories that are better handled separately, and where classification can be handled accurately, either by an LLM or a more traditional classification model/algorithm.

=== "Graph API"

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/c4580b74-fe91-47e4-96fe-7fac598d509c/r

    **Examples**

    [Here](https://langchain-ai.github.io/langgraphjs/tutorials/rag/langgraph_adaptive_rag_local/) is RAG workflow that routes questions. See our video [here](https://www.youtube.com/watch?v=bq1Plo2RhYI).

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/5e2eb979-82dd-402c-b1a0-a8cceaf2a28a/r

Orchestrator-Worker Copy Chapter

With orchestrator-worker, an orchestrator breaks down a task and delegates each sub-task to workers. As noted in the Anthropic blog:

In the orchestrator-workers workflow, a central LLM dynamically breaks down tasks, delegates them to worker LLMs, and synthesizes their results.

When to use this workflow: This workflow is well-suited for complex tasks where you can’t predict the subtasks needed (in coding, for example, the number of files that need to be changed and the nature of the change in each file likely depend on the task). Whereas it’s topographically similar, the key difference from parallelization is its flexibility—subtasks aren't pre-defined, but determined by the orchestrator based on the specific input.

=== "Graph API"

```ts
import { z } from "zod";

// Schema for structured output to use in planning
const sectionSchema = z.object({
  name: z.string().describe("Name for this section of the report."),
  description: z.string().describe(
    "Brief overview of the main topics and concepts to be covered in this section."
  ),
});

const sectionsSchema = z.object({
  sections: z.array(sectionSchema).describe("Sections of the report."),
});

// Augment the LLM with schema for structured output
const planner = llm.withStructuredOutput(sectionsSchema);
```

**Creating Workers in LangGraph**

Because orchestrator-worker workflows are common, LangGraph **has the `Send` API to support this**. It lets you dynamically create worker nodes and send each one a specific input. Each worker has its own state, and all worker outputs are written to a *shared state key* that is accessible to the orchestrator graph. This gives the orchestrator access to all worker output and allows it to synthesize them into a final output. As you can see below, we iterate over a list of sections and `Send` each to a worker node. See further documentation [here](https://langchain-ai.github.io/langgraphjs/how-tos/map-reduce/) and [here](https://langchain-ai.github.io/langgraphjs/concepts/low_level/#send).

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/78cbcfc3-38bf-471d-b62a-b299b144237d/r

    **Resources:**

    **Examples**

    [Here](https://github.com/langchain-ai/report-mAIstro) is a project that uses orchestrator-worker for report planning and writing. See our video [here](https://www.youtube.com/watch?v=wSxZ7yFbbas).

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/75a636d0-6179-4a12-9836-e0aa571e87c5/r

Evaluator-optimizer Copy Chapter

In the evaluator-optimizer workflow, one LLM call generates a response while another provides evaluation and feedback in a loop:

In the evaluator-optimizer workflow, one LLM call generates a response while another provides evaluation and feedback in a loop.

When to use this workflow: This workflow is particularly effective when we have clear evaluation criteria, and when iterative refinement provides measurable value. The two signs of good fit are, first, that LLM responses can be demonstrably improved when a human articulates their feedback; and second, that the LLM can provide such feedback. This is analogous to the iterative writing process a human writer might go through when producing a polished document.

=== "Graph API"

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/86ab3e60-2000-4bff-b988-9b89a3269789/r

    **Resources:**

    **Examples**

    [Here](https://github.com/langchain-ai/research-rabbit) is an assistant that uses evaluator-optimizer to improve a report. See our video [here](https://www.youtube.com/watch?v=XGuTzHoqlj8).

    [Here](https://langchain-ai.github.io/langgraphjs/tutorials/rag/langgraph_adaptive_rag_local/) is a RAG workflow that grades answers for hallucinations or errors. See our video [here](https://www.youtube.com/watch?v=bq1Plo2RhYI).

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/f66830be-4339-4a6b-8a93-389ce5ae27b4/r

Agent Copy Chapter

Agents are typically implemented as an LLM performing actions (via tool-calling) based on environmental feedback in a loop. As noted in the Anthropic blog:

Agents can handle sophisticated tasks, but their implementation is often straightforward. They are typically just LLMs using tools based on environmental feedback in a loop. It is therefore crucial to design toolsets and their documentation clearly and thoughtfully.

When to use agents: Agents can be used for open-ended problems where it’s difficult or impossible to predict the required number of steps, and where you can’t hardcode a fixed path. The LLM will potentially operate for many turns, and you must have some level of trust in its decision-making. Agents' autonomy makes them ideal for scaling tasks in trusted environments.

import { tool } from "@langchain/core/tools";
import { z } from "zod";

// Define tools
const multiply = tool(
  async ({ a, b }: { a: number; b: number }) => {
    return a * b;
  },
  {
    name: "multiply",
    description: "Multiply two numbers together",
    schema: z.object({
      a: z.number().describe("first number"),
      b: z.number().describe("second number"),
    }),
  }
);

const add = tool(
  async ({ a, b }: { a: number; b: number }) => {
    return a + b;
  },
  {
    name: "add",
    description: "Add two numbers together",
    schema: z.object({
      a: z.number().describe("first number"),
      b: z.number().describe("second number"),
    }),
  }
);

const divide = tool(
  async ({ a, b }: { a: number; b: number }) => {
    return a / b;
  },
  {
    name: "divide",
    description: "Divide two numbers",
    schema: z.object({
      a: z.number().describe("first number"),
      b: z.number().describe("second number"),
    }),
  }
);

// Augment the LLM with tools
const tools = [add, multiply, divide];
const toolsByName = Object.fromEntries(tools.map((tool) => [tool.name, tool]));
const llmWithTools = llm.bindTools(tools);

=== "Graph API"

```

/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

    https://smith.langchain.com/public/051f0391-6761-4f8c-a53b-22231b016690/r

    **Examples**

    [Here](https://github.com/langchain-ai/memory-agent) is a project that uses a tool calling agent to create / store long-term memories.

=== "Functional API"

    ```
/* Detailed source-code truncated for AI context efficiency. */

**LangSmith Trace**

https://smith.langchain.com/public/42ae8bf9-3935-4504-a081-8ddbcbfc8b2e/r

Pre-built

LangGraph also provides a pre-built method for creating an agent as defined above (using the createReactAgent function):

https://langchain-ai.github.io/langgraphjs/how-tos/create-react-agent/

import { createReactAgent } from "@langchain/langgraph/prebuilt";

// Pass in:
// (1) an LLM instance
// (2) the tools list (which is used to create the tool node)
const prebuiltAgent = createReactAgent({
  llm: llmWithTools,
  tools,
});

// invoke
const result = await prebuiltAgent.invoke({
  messages: [
    {
      role: "user",
      content: "Add 3 and 4.",
    },
  ],
});
console.log(result.messages);

LangSmith Trace

https://smith.langchain.com/public/abab6a44-29f6-4b97-8164-af77413e494d/r

What LangGraph provides Copy Chapter

By constructing each of the above in LangGraph, we get a few things:

Persistence: Human-in-the-Loop Copy Section

LangGraph persistence layer supports interruption and approval of actions (e.g., Human In The Loop). See Module 3 of LangChain Academy.

Persistence: Memory Copy Section

LangGraph persistence layer supports conversational (short-term) memory and long-term memory. See Modules 2 and 5 of LangChain Academy:

Streaming Copy Section

LangGraph provides several ways to stream workflow / agent outputs or intermediate state. See Module 3 of LangChain Academy.

Deployment Copy Section

LangGraph provides an easy on-ramp for deployment, observability, and evaluation. See module 6 of LangChain Academy.

Docs Requirements (`docs/docs-requirements.txt`) Copy Section

mkdocs
mkdocstrings
mkdocs-jupyter
mkdocs-redirects
mkdocs-minify-plugin
mkdocs-open-in-new-tab
mkdocs-rss-plugin
mkdocs-typedoc
mkdocs-exclude-search
markdown-include
markdown-callouts

Mkdocs.Yml (`docs/mkdocs.yml`) Copy Section

site_name: ""
site_description: Build language agents as graphs
site_url: https://langchain-ai.github.io/langgraphjs/
repo_url: https://github.com/langchain-ai/langgraphjs
theme:
name: material
custom_dir: overrides
logo_dark_mode: static/wordmark_light.svg
logo_light_mode: static/wordmark_dark.svg
favicon: static/favicon.png
features:
- announce.dismiss
- content.code.annotate
- content.code.copy
- content.code.select
- content.tabs.link
- content.tooltips
- header.autohide
- navigation.expand
- navigation.footer
- navigation.indexes
- navigation.instant
- navigation.instant.prefetch
- navigation.instant.progress
- navigation.sections
- navigation.path
- navigation.prune
- navigation.tabs
- navigation.top
- navigation.tracking
- search.highlight
- search.share
- search.suggest
- toc.follow
palette:
- scheme: default
primary: white
accent: gray
toggle:
icon: material/brightness-7
name: Switch to dark mode
- scheme: slate
primary: grey
accent: white
toggle:
icon: material/brightness-4
name: Switch to light mode
font:
text: "Public Sans"
code: "Roboto Mono"
plugins:

• search:
  separator: '[\s\u200b-_,:!=[]()"`/]+|.(?!\d)|&[lg]t;|(?!\b)(?=[A-Z][a-z])'
• autorefs
• open-in-new-tab
• exclude-search:
  exclude:
  - tutorials/quickstart.ipynb
  - tutorials/deployment.md
  - tutorials/langgraph-platform/local-server.md
  - concepts/template_applications.md # TODO: make tutorial
  - cloud/quick_start.md
  - how-tos/index.md
  - how-tos#installation
  - how-tos/manage-ecosystem-dependencies.ipynb
  - how-tos/use-in-web-environments.ipynb
  - how-tos#langgraph
  - how-tos#controllability
  - how-tos/map-reduce.ipynb
  - how-tos/branching.ipynb
  - how-tos/command.ipynb
  - how-tos/recursion-limit.ipynb
  - how-tos/defer-node-execution.ipynb
  - how-tos#persistence
  - how-tos/persistence.ipynb
  - how-tos/persistence-functional.ipynb
  - how-tos/subgraph-persistence.ipynb
  - how-tos/cross-thread-persistence.ipynb
  - how-tos/cross-thread-persistence-functional.ipynb
  - how-tos/persistence-postgres.ipynb
  - how-tos#memory
  - how-tos/manage-conversation-history.ipynb
  - how-tos/delete-messages.ipynb
  - how-tos/add-summary-conversation-history.ipynb
  - how-tos/semantic-search.ipynb
  - how-tos#human-in-the-loop
  - how-tos/breakpoints.ipynb
  - how-tos/dynamic_breakpoints.ipynb
  - how-tos/edit-graph-state.ipynb
  - how-tos/wait-user-input.ipynb
  - how-tos/wait-user-input-functional.ipynb
  - how-tos/time-travel.ipynb
  - how-tos/review-tool-calls.ipynb
  - how-tos/review-tool-calls-functional.ipynb
  - how-tos#streaming
  - how-tos/stream-values.ipynb
  - how-tos/stream-updates.ipynb
  - how-tos/stream-tokens.ipynb
  - how-tos/streaming-tokens-without-langchain.ipynb
  - how-tos/streaming-content.ipynb
  - how-tos/stream-multiple.ipynb
  - how-tos/streaming-events-from-within-tools.ipynb
  - how-tos/streaming-from-final-node.ipynb
  - how-tos#tool-calling
  - how-tos/tool-calling.ipynb
  - how-tos/force-calling-a-tool-first.ipynb
  - how-tos/tool-calling-errors.ipynb
  - how-tos/pass-run-time-values-to-tools.ipynb
  - how-tos/update-state-from-tools.ipynb
  - how-tos#subgraphs
  - how-tos/subgraph.ipynb
  - how-tos/subgraphs-manage-state.ipynb
  - how-tos/subgraph-transform-state.ipynb
  - how-tos#multi-agent
  - how-tos/multi-agent-network.ipynb
  - how-tos/multi-agent-network-functional.ipynb
  - how-tos/multi-agent-multi-turn-convo.ipynb
  - how-tos/multi-agent-multi-turn-convo-functional.ipynb
  - how-tos#state-management
  - how-tos/define-state.ipynb
  - how-tos/input_output_schema.ipynb
  - how-tos/pass_private_state.ipynb
  - how-tos#other
  - how-tos/configuration.ipynb
  - how-tos/node-retry-policies.ipynb
  - how-tos/node-caching.ipynb
  - how-tos/dynamically-returning-directly.ipynb
  - how-tos/respond-in-format.ipynb
  - how-tos/managing-agent-steps.ipynb
  - how-tos#prebuilt-react-agent
  - how-tos/create-react-agent.ipynb
  - how-tos/react-memory.ipynb
  - how-tos/react-system-prompt.ipynb
  - how-tos/react-human-in-the-loop.ipynb
  - how-tos/react-return-structured-output.ipynb
  - how-tos/react-agent-from-scratch-functional.ipynb
  - how-tos#langgraph-platform
  - how-tos#application-structure
  - cloud/deployment/setup.md
  - cloud/deployment/setup_pyproject.md
  - cloud/deployment/setup_javascript.md
  - cloud/deployment/semantic_search.md
  - cloud/deployment/custom_docker.md
  - cloud/deployment/test_locally.md
  - cloud/deployment/graph_rebuild.md
  - how-tos#deployment
  - cloud/deployment/cloud.md
  - how-tos/deploy-self-hosted.md
  - how-tos/use-remote-graph.md
  - how-tos#authentication-access-control
  - how-tos/auth/custom_auth.md
  - cloud/how-tos/auth/openapi_security_new.md
  - how-tos#assistants
  - cloud/how-tos/configuration_cloud.md
  - cloud/how-tos/assistant_versioning.md
  - how-tos#threads
  - cloud/how-tos/use_threads.md
  - cloud/how-tos/copy_threads.md
  - cloud/how-tos/check_thread_status.md
  - how-tos#runs
  - cloud/how-tos/background_run.md
  - cloud/how-tos/same-thread.md
  - cloud/how-tos/cron_jobs.md
  - how-tos#streaming
  - cloud/how-tos/stateless_runs.md
  - cloud/how-tos/stream_values.md
  - cloud/how-tos/stream_updates.md
  - cloud/how-tos/stream_messages.md
  - cloud/how-tos/stream_events.md
  - cloud/how-tos/stream_debug.md
  - cloud/how-tos/stream_multiple.md
  - how-tos#frontend-generative-ui
  - cloud/how-tos/use_stream_react.md
  - cloud/how-tos/generative_ui_react.md
  - how-tos#human-in-the-loop
  - cloud/how-tos/human_in_the_loop_breakpoint.md
  - cloud/how-tos/human_in_the_loop_user_input.md
  - cloud/how-tos/human_in_the_loop_edit_state.md
  - cloud/how-tos/human_in_the_loop_time_travel.md
  - cloud/how-tos/human_in_the_loop_review_tool_calls.md
  - how-tos#double-texting
  - cloud/how-tos/interrupt_concurrent.md
  - cloud/how-tos/rollback_concurrent.md
  - cloud/how-tos/reject_concurrent.md
  - cloud/how-tos/enqueue_concurrent.md
  - how-tos#webhooks
  - cloud/how-tos/webhooks.md
  - how-tos#cron-jobs
  - cloud/how-tos/cron_jobs.md
  - how-tos#modifying-the-api
  - cloud/how-tos/http/custom_middleware.md
  - cloud/how-tos/http/custom_routes.md
  - how-tos#langgraph-studio
  - cloud/how-tos/test_deployment.md
  - cloud/how-tos/test_local_deployment.md
  - cloud/how-tos/invoke_studio.md
  - cloud/how-tos/threads_studio.md
  - cloud/how-tos/datasets_studio.md
  - concepts/index.md
  - concepts#langgraph
  - concepts/high_level.md
  - concepts/low_level.md
  - concepts/agentic_concepts.md
  - concepts/multi_agent.md
  - concepts/human_in_the_loop.md
  - concepts/persistence.md
  - concepts/memory.md
  - concepts/streaming.md
  - concepts/functional_api.md
  - concepts#langgraph-platform
  - concepts#high-level
  - concepts/langgraph_platform.md
  - concepts/deployment_options.md
  - concepts/plans.md
  - concepts#components
  - concepts/langgraph_server.md
  - concepts/langgraph_studio.md
  - concepts/langgraph_cli.md
  - concepts/sdk.md
  - concepts#langgraph-server
  - concepts/application_structure.md
  - concepts/assistants.md
  - concepts/double_texting.md
  - concepts/auth.md
  - concepts#deployment-options
  - concepts/self_hosted.md
  - concepts/langgraph_cloud.md
  - concepts/bring_your_own_cloud.md
  - tutorials/index.md
  - tutorials#quick-start
  - tutorials/workflows/index.md
  - tutorials/chatbots/customer_support_small_model.ipynb
  - tutorials#rag
  - tutorials/rag/langgraph_agentic_rag.ipynb
  - tutorials/rag/langgraph_crag.ipynb
  - tutorials/rag/langgraph_self_rag.ipynb
  - tutorials#agent-architectures
  - tutorials#multi-agent-systems
  - tutorials/multi_agent/multi_agent_collaboration.ipynb
  - tutorials/multi_agent/agent_supervisor.ipynb
  - tutorials/multi_agent/hierarchical_agent_teams.ipynb
  - tutorials#planning-agents
  - tutorials/plan-and-execute/plan-and-execute.ipynb
  - tutorials#reflection-critique
  - tutorials/reflection/reflection.ipynb
  - tutorials/rewoo/rewoo.ipynb
  - tutorials#evaluation
  - tutorials/chatbot-simulation-evaluation/agent-simulation-evaluation.ipynb
  - adopters.md
  - llms-txt-overview.md
  - concepts/faq.md
  - troubleshooting/errors/
  - troubleshooting/errors/index.md
  - troubleshooting/errors/GRAPH_RECURSION_LIMIT.ipynb
  - troubleshooting/errors/INVALID_CONCURRENT_GRAPH_UPDATE.ipynb
  - troubleshooting/errors/INVALID_GRAPH_NODE_RETURN_VALUE.ipynb
  - troubleshooting/errors/MULTIPLE_SUBGRAPHS.ipynb
  - troubleshooting/errors/UNREACHABLE_NODE.ipynb
  - agents/overview.md
  - agents/agents.md
  - agents/run_agents.md
  - agents/streaming.md
  - agents/models.md
  - agents/tools.md
  - agents/mcp.md
  - agents/context.md
  - agents/memory.md
  - agents/human-in-the-loop.md
  - agents/multi-agent.md
  - agents/evals.md
  - agents/deployment.md
  - agents/ui.md
  # NOTE: prebuilt.md is auto-generated by make generate-prebuilt-page
  - agents/prebuilt.md

nav:

• LangGraph:
  • Introduction: index.md
• "API reference":
  • "reference/index.html"
  • LangGraph Platform:
    • Server API: "cloud/reference/api/api_ref.md"
    • CLI: "cloud/reference/cli.md"
    • SDK (Python): "cloud/reference/sdk/python_sdk_ref.md"
    • SDK (JS/TS): "cloud/reference/sdk/js_ts_sdk_ref.md"
    • RemoteGraph: reference/remote_graph.md
    • Environment variables: "cloud/reference/env_var.md"
• "Versions":
  • "versions/index.md"

markdown_extensions:

• abbr
• admonition
• pymdownx.details
• attr_list
• def_list
• footnotes
• md_in_html
• toc:
  permalink: true
• pymdownx.arithmatex:
  generic: true
• pymdownx.betterem:
  smart_enable: all
• pymdownx.caret
• pymdownx.details
• pymdownx.emoji:
  emoji_generator: !!python/name:material.extensions.emoji.to_svg
  emoji_index: !!python/name:material.extensions.emoji.twemoji
• pymdownx.highlight:
  anchor_linenums: true
  line_spans: __span
  use_pygments: true
  pygments_lang_class: true
• pymdownx.inlinehilite
• pymdownx.keys
• pymdownx.magiclink:
  normalize_issue_symbols: true
  repo_url_shorthand: true
  user: langchain-ai
  repo: langgraphjs
• pymdownx.mark
• pymdownx.smartsymbols
• pymdownx.snippets:
  auto_append:
  - includes/mkdocs.md
• pymdownx.superfences:
  custom_fences:
  - name: mermaid
  class: mermaid
  format: !!python/name:pymdownx.superfences.fence_code_format
• pymdownx.tabbed:
  alternate_style: true
  combine_header_slug: true
• pymdownx.tasklist:
  custom_checkbox: true
• markdown_include.include:
  base_path: ../
• github-callouts
  extra_css:
• css/mkdocstrings.css
• css/agent_graph_widget.css
  hooks:
• _scripts/notebook_hooks.py
  extra:
  scope: /langgraphjs/
  consent:
  title: Cookie consent
  actions:
  • accept
  • reject
    We use cookies to recognize your repeated visits and preferences, as well
    as to measure the effectiveness of our documentation and whether users
    find what they're searching for. Clicking "Accept" makes our
    documentation better. Thank you! ❤️
    social:
  • icon: fontawesome/brands/python
    link: https://langchain-ai.github.io/langgraph/
  • icon: fontawesome/brands/github
    link: https://github.com/langchain-ai/langgraphjs
  • icon: fontawesome/brands/twitter
    link: https://x.com/langchain_js

validation:

https://www.mkdocs.org/user-guide/configuration/

We're `ignoring` nav.omitted_files because we are going to rely

on files being properly links to from the index pages of:

- tutorials

- concepts

- how-tos

- reference

omitted_files: ignore

absolute_links: warn

unrecognized_links: warn
anchors: info

this is needed to handle headers with anchors for nav

not_found: info
copyright: >
Copyright © 2025 LangChain, Inc | Consent Preferences

Package.Json (`docs/package.json`) Copy Section

{
"name": "docs",
"type": "module",
"private": true,
"description": "Dependencies for LangGraph docs.",
"scripts": {
"build": "typedoc --options typedoc.jsonc"
},
"devDependencies": {
"typedoc": "patch:typedoc@npm:3.0.28.11#./patches/[email protected]"
}
}

Docs Adopters (`docs/docs/adopters.md`) Copy Section

🦜🕸️ LangGraph Adopters

This list of companies using LangGraph and their success stories is compiled from public sources. If your company uses LangGraph, we'd love for you to share your story and add it to the list. You’re also welcome to contribute updates based on publicly available information from other companies, such as blog posts or press releases.

Docs Llms (`docs/docs/llms.txt`) Copy Section

LangGraph

Quickstart Copy Chapter

These guides are designed to help you get started with LangGraph.

• LangGraph Quickstart: Build a chatbot that can use tools and keep track of conversation history. Add human-in-the-loop capabilities and explore how time-travel works.
• Common Workflows: Overview of the most common workflows using LLMs implemented with LangGraph.
• LangGraph Server Quickstart: Launch a LangGraph server locally and interact with it using REST API and LangGraph Studio Web UI.
• Deploy with LangGraph Cloud Quickstart: Deploy a LangGraph app using LangGraph Cloud.

Concepts Copy Chapter

These guides provide explanations of the key concepts behind the LangGraph framework.

• Why LangGraph?: Motivation for LangGraph, a library for building agentic applications with LLMs.
• LangGraph Glossary: LangGraph workflows are designed as graphs, with nodes representing different components and edges representing the flow of information between them. This guide provides an overview of the key concepts associated with LangGraph graph primitives.
• Common Agentic Patterns: An agent uses an LLM to pick its own control flow to solve more complex problems! Agents are a key building block in many LLM applications. This guide explains the different types of agent architectures and how they can be used to control the flow of an application.
• Multi-Agent Systems: Complex LLM applications can often be broken down into multiple agents, each responsible for a different part of the application. This guide explains common patterns for building multi-agent systems.
• Breakpoints: Breakpoints allow pausing the execution of a graph at specific points. Breakpoints allow stepping through graph execution for debugging purposes.
• Human-in-the-Loop: Explains different ways of integrating human feedback into a LangGraph application.
• Time Travel: Time travel allows you to replay past actions in your LangGraph application to explore alternative paths and debug issues.
• Persistence: LangGraph has a built-in persistence layer, implemented through checkpointers. This persistence layer helps to support powerful capabilities like human-in-the-loop, memory, time travel, and fault-tolerance.
• Memory: Memory in AI applications refers to the ability to process, store, and effectively recall information from past interactions. With memory, your agents can learn from feedback and adapt to users' preferences.
• Streaming: Streaming is crucial for enhancing the responsiveness of applications built on LLMs. By displaying output progressively, even before a complete response is ready, streaming significantly improves user experience (UX), particularly when dealing with the latency of LLMs.
• Functional API: @entrypoint and @task decorators that allow you to add LangGraph functionality to an existing codebase.
• FAQ: Frequently asked questions about LangGraph.

How-tos Copy Chapter

Here you'll find answers to "How do I...?" types of questions.

These guides are goal-oriented and concrete.

They're meant to help you complete a specific task.

Fine-grained Control Copy Section

These guides demonstrate LangGraph features that grant fine-grained control over the execution of your graph.

• How to create map-reduce branches for parallel execution
• How to update state and jump to nodes in graphs and subgraphs
• How to defer node execution
• How to add runtime configuration to your graph

Persistence Copy Section

Persistence makes it easy to persist state across graph runs (per-thread persistence) and across threads (cross-thread persistence).

These how-to guides show how to add persistence to your graph.

• How to add thread-level persistence to your graph
• How to add thread-level persistence to a subgraph
• How to add cross-thread persistence to your graph
• How to use Postgres checkpointer for persistence

See the below guides for how-to add persistence to your workflow using the Functional API:

• How to add thread-level persistence (functional API)
• How to add cross-thread persistence (functional API)

Memory Copy Section

LangGraph makes it easy to manage conversation memory in your graph. These how-to guides show how to implement different strategies for that.

• How to manage conversation history
• How to delete messages
• How to add summary conversation memory
• How to add long-term memory (cross-thread)
• How to use semantic search for long-term memory

Human-in-the-loop Copy Section

Human-in-the-loop functionality allows you to involve humans in the decision-making process of your graph.

These how-to guides show how to implement human-in-the-loop workflows in your graph.

• How to wait for user input: A basic example that shows how to implement a human-in-the-loop workflow in your graph using the interrupt function.
• How to review tool calls: Incorporate human-in-the-loop for reviewing/editing/accepting tool call requests before they executed using the interrupt function.
• How to add static breakpoints: Use for debugging purposes. For human-in-the-loop workflows, we recommend the interrupt function instead.
• How to edit graph state: Edit graph state using graph.update_state method. Use this if implementing a human-in-the-loop workflow via static breakpoints.

See the below guides for how-to implement human-in-the-loop workflows with the Functional API.

• How to wait for user input (Functional API)
• How to review tool calls (Functional API)

Time Travel Copy Section

Time travel allows you to replay past actions in your LangGraph application to explore alternative paths and debug issues. These how-to guides show how to use time travel in your graph.

• How to view and update past graph state

Streaming Copy Section

Streaming is crucial for enhancing the responsiveness of applications built on LLMs. By displaying output progressively, even before a complete response is ready, streaming significantly improves user experience (UX), particularly when dealing with the latency of LLMs.

• How to stream the full state of your graph
• How to stream state updates of your graph
• How to stream LLM tokens
• How to stream LLM tokens without LangChain models
• How to stream custom data
• How to configure multiple streaming modes
• How to stream events from within a tool
• How to stream from the final node

Tool calling Copy Section

• How to call tools using ToolNode
• How to force an agent to call a tool
• How to handle tool calling errors
• How to pass runtime values to tools
• How to update graph state from tools

Subgraphs Copy Section

Subgraphs allow you to reuse an existing graph from another graph. These how-to guides show how to use subgraphs:

• How to add and use subgraphs
• How to view and update state in subgraphs
• How to transform inputs and outputs of a subgraph

Multi-agent Copy Section

• How to build a multi-agent network
• How to add multi-turn conversation in a multi-agent application

See the multi-agent tutorials for implementations of other multi-agent architectures.

See the below guides for how-to implement multi-agent workflows with the Functional API:

• How to build a multi-agent network (functional API)
• How to add multi-turn conversation in a multi-agent application (functional API)

State management Copy Section

• How to define graph state
• Have a separate input and output schema
• Pass private state between nodes inside the graph

Other Copy Section

• How to add runtime configuration to your graph
• How to add node retries
• How to cache expensive nodes
• How to let an agent return tool results directly
• How to have an agent respond in structured format
• How to manage agent steps

Prebuilt ReAct Agent Copy Section

• How to create a ReAct agent
• How to add memory to a ReAct agent
• How to add a system prompt to a ReAct agent
• How to add Human-in-the-loop to a ReAct agent
• How to return structured output from a ReAct agent

See the below guide for how-to build ReAct agents with the Functional API:

• How to create a ReAct agent from scratch (Functional API)

LangGraph Platform Copy Chapter

This section includes how-to guides for LangGraph Platform.

LangGraph Platform is a commercial solution for deploying agentic applications in production, built on the open-source LangGraph framework. It provides four deployment options to fit a range of needs: a free tier, a self-hosted version, a cloud SaaS, and a Bring Your Own Cloud (BYOC) option. You can explore these options in detail in the deployment options guide.

!!! tip

* LangGraph is an MIT-licensed open-source library, which we are committed to maintaining and growing for the community.
* You can always deploy LangGraph applications on your own infrastructure using the open-source LangGraph project without using LangGraph Platform.

Application Structure Copy Section

Learn how to set up your app for deployment to LangGraph Platform:

• How to set up app for deployment (requirements.txt)
• How to set up app for deployment (pyproject.toml)
• How to set up app for deployment (JavaScript)
• How to customize Dockerfile
• How to test locally
• How to integrate LangGraph into your React application

Deployment Copy Section

LangGraph applications can be deployed using LangGraph Cloud, which provides a range of services to help you deploy, manage, and scale your applications.

• How to deploy to LangGraph cloud
• How to deploy to a self-hosted environment
• How to interact with the deployment using RemoteGraph

Assistants Copy Section

Assistants are a configured instance of a template.

• How to configure agents
• How to version assistants

Threads Copy Section

• How to copy threads
• How to check status of your threads

Runs Copy Section

LangGraph Cloud supports multiple types of runs besides streaming runs.

• How to run an agent in the background
• How to run multiple agents in the same thread
• How to create cron jobs
• How to create stateless runs

Streaming Copy Section

Streaming the results of your LLM application is vital for ensuring a good user experience, especially when your graph may call multiple models and take a long time to fully complete a run. Read about how to stream values from your graph in these how to guides:

• How to stream values
• How to stream updates
• How to stream messages
• How to stream events
• How to stream in debug mode
• How to stream multiple modes

Frontend & Generative UI Copy Section

With LangGraph Platform you can integrate LangGraph agents into your React applications and colocate UI components with your agent code.

• How to integrate LangGraph into your React application
• How to implement Generative User Interfaces with LangGraph

Human-in-the-loop Copy Section

When creating complex graphs, leaving every decision up to the LLM can be dangerous, especially when the decisions involve invoking certain tools or accessing specific documents. To remedy this, LangGraph allows you to insert human-in-the-loop behavior to ensure your graph does not have undesired outcomes. Read more about the different ways you can add human-in-the-loop capabilities to your LangGraph Cloud projects in these how-to guides:

• How to add a breakpoint
• How to wait for user input
• How to edit graph state
• How to replay and branch from prior states
• How to review tool calls

Double-texting Copy Section

Graph execution can take a while, and sometimes users may change their mind about the input they wanted to send before their original input has finished running. For example, a user might notice a typo in their original request and will edit the prompt and resend it. Deciding what to do in these cases is important for ensuring a smooth user experience and preventing your graphs from behaving in unexpected ways. The following how-to guides provide information on the various options LangGraph Cloud gives you for dealing with double-texting:

• How to use the interrupt option
• How to use the rollback option
• How to use the reject option
• How to use the enqueue option

Webhooks Copy Section

• How to integrate webhooks

Cron Jobs Copy Section

• How to create cron jobs

LangGraph Studio Copy Section

LangGraph Studio is a built-in UI for visualizing, testing, and debugging your agents.

• How to connect to a LangGraph Cloud deployment
• How to connect to a local deployment
• How to test your graph in LangGraph Studio
• How to interact with threads in LangGraph Studio

Troubleshooting Copy Chapter

These are the guides for resolving common errors you may find while building with LangGraph. Errors referenced below will have an lc_error_code property corresponding to one of the below codes when they are thrown in code.

• GRAPH_RECURSION_LIMIT
• INVALID_CONCURRENT_GRAPH_UPDATE
• INVALID_GRAPH_NODE_RETURN_VALUE
• MULTIPLE_SUBGRAPHS
• UNREACHABLE_NODE

Scripts Third Party Packages.Yml (`docs/_scripts/third_party/packages.yml`) Copy Section

#A list of third-party packages to surface on the third-party page.
packages:

• name: "@langchain/langgraph-supervisor"
  repo: "langchain-ai/langgraphjs"
  monorepo_path: "libs/langgraph-supervisor"
• name: "@langchain/langgraph-swarm"
  repo: "langchain-ai/langgraphjs"
  monorepo_path: "libs/langgraph-swarm"
• name: "@langchain/langgraph-cua"
  repo: "langchain-ai/langgraphjs"
  monorepo_path: "libs/langgraph-cua"

Docs Agents Agents (`docs/docs/agents/agents.md`) Copy Section

LangGraph quickstart

This guide shows you how to set up and use LangGraph's prebuilt, reusable components, which are designed to help you construct agentic systems quickly and reliably.

Prerequisites Copy Chapter

Before you start this tutorial, ensure you have the following:

• An Anthropic API key

1. Install dependencies Copy Chapter

If you haven't already, install LangGraph and LangChain:

npm install langchain @langchain/langgraph @langchain/anthropic

2. Create an agent Copy Chapter

Use createReactAgent to instantiate an agent:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const getWeather = tool( // (1)!
  async (input: { city: string }) => {
    return `It's always sunny in ${input.city}!`;
  },
  {
    name: "getWeather",
    schema: z.object({
      city: z.string().describe("The city to get the weather for"),
    }),
    description: "Get weather for a given city.",
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest"); // (2)!
const agent = createReactAgent({
  llm,
  tools: [getWeather], // (3)!
  prompt: "You are a helpful assistant", // (4)!
});

// Run the agent
await agent.invoke({
  messages: [{ role: "user", content: "what is the weather in sf" }],
});

1. Define a tool for the agent to use. For more advanced tool usage and customization, check the tools page.
2. Provide a language model for the agent to use. To learn more about configuring language models for the agents, check the models page.
3. Provide a list of tools for the model to use.
4. Provide a system prompt (instructions) to the language model used by the agent.

3. Configure an LLM Copy Chapter

Use initChatModel to configure an LLM with specific parameters, such as temperature:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

// highlight-next-line
const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest", {
  // highlight-next-line
  temperature: 0,
});

const agent = createReactAgent({
  // highlight-next-line
  llm,
  tools: [getWeather],
});

See the models page for more information on how to configure LLMs.

4. Add a custom prompt Copy Chapter

Prompts instruct the LLM how to behave. They can be:

• Static: A string is interpreted as a system message
• Dynamic: a list of messages generated at runtime based on input or configuration

=== "Static prompt"

Define a fixed prompt string or list of messages.

```ts
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // A static prompt that never changes
  // highlight-next-line
  prompt: "Never answer questions about the weather.",
});

await agent.invoke({
  messages: "what is the weather in sf",
});
```

=== "Dynamic prompt"

Define a function that returns a message list based on the agent's state and configuration:

```ts
import { BaseMessageLike } from "@langchain/core/messages";
import { RunnableConfig } from "@langchain/core/runnables";
import { initChatModel } from "langchain/chat_models/universal";
import { MessagesAnnotation } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const prompt = (
  state: typeof MessagesAnnotation.State,
  config: RunnableConfig
): BaseMessageLike[] => { // (1)!
  const userName = config.configurable?.userName;
  const systemMsg = `You are a helpful assistant. Address the user as ${userName}.`;
  return [{ role: "system", content: systemMsg }, ...state.messages];
};

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  prompt,
});

await agent.invoke(
  { messages: [{ role: "user", content: "what is the weather in sf" }] },
  // highlight-next-line
  { configurable: { userName: "John Smith" } }
);
```

1. Dynamic prompts allow including non-message [context](./context.md) when constructing an input to the LLM, such as:

  - Information passed at runtime, like a `userId` or API credentials (using `config`).
  - Internal agent state updated during a multi-step reasoning process (using `state`).

  Dynamic prompts can be defined as functions that take `state` and `config` and return a list of messages to send to the LLM.

For more information, see Context.

5. Add memory Copy Chapter

To allow multi-turn conversations with an agent, you need to enable persistence by providing a checkpointer when creating an agent. At runtime you need to provide a config containing thread_id — a unique identifier for the conversation (session):

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { MemorySaver } from "@langchain/langgraph-checkpoint";
import { initChatModel } from "langchain/chat_models/universal";

// highlight-next-line
const checkpointer = new MemorySaver();

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  checkpointer, // (1)!
});

// Run the agent
// highlight-next-line
const config = { configurable: { thread_id: "1" } };
const sfResponse = await agent.invoke(
  { messages: [{ role: "user", content: "what is the weather in sf" }] },
  config // (2)!
);
const nyResponse = await agent.invoke(
  { messages: [{ role: "user", content: "what about new york?" }] },
  config
);

1. checkpointer allows the agent to store its state at every step in the tool calling loop. This enables short-term memory and human-in-the-loop capabilities.
2. Pass configuration with thread_id to be able to resume the same conversation on future agent invocations.

When you enable the checkpointer, it stores agent state at every step in the provided checkpointer database (or in memory, if using InMemorySaver).

Note that in the above example, when the agent is invoked the second time with the same thread_id, the original message history from the first conversation is automatically included, together with the new user input.

For more information, see Memory.

6. Configure structured output Copy Chapter

To produce structured responses conforming to a schema, use the responseFormat parameter. The schema can be defined with a zod schema. The result will be accessible via the structuredResponse field.

import { z } from "zod";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const WeatherResponse = z.object({
  conditions: z.string(),
});

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  responseFormat: WeatherResponse, // (1)!
});

const response = await agent.invoke({
  messages: [{ role: "user", content: "what is the weather in sf" }],
});
// highlight-next-line
response.structuredResponse;

1. When responseFormat is provided, a separate step is added at the end of the agent loop: agent message history is passed to an LLM with structured output to generate a structured response.

   To provide a system prompt to this LLM, use an object { prompt, schema }, e.g., responseFormat: { prompt, schema: WeatherResponse }.

!!! Note "LLM post-processing"

Structured output requires an additional call to the LLM to format the response according to the schema.

Next steps Copy Chapter

• Deploy your agent locally
• Learn more about prebuilt agents
• LangGraph Platform quickstart

Docs Agents Context (`docs/docs/agents/context.md`) Copy Section

Context

Agents often require more than a list of messages to function effectively. They need context.

Context includes any data outside the message list that can shape agent behavior or tool execution. This can be:

• Information passed at runtime, like a user_id or API credentials.
• Internal state updated during a multi-step reasoning process.
• Persistent memory or facts from previous interactions.

LangGraph provides three primary ways to supply context:

You can use context to:

• Adjust the system prompt the model sees
• Feed tools with necessary inputs
• Track facts during an ongoing conversation

Providing Runtime Context Copy Chapter

Use this when you need to inject data into an agent at runtime.

Config (static context) Copy Section

Config is for immutable data like user metadata or API keys. Use
when you have values that don't change mid-run.

Specify configuration using a key called "configurable" which is reserved
for this purpose:

await agent.invoke(
  { messages: "hi!" },
  // highlight-next-line
  { configurable: { userId: "user_123" } }
)

State (mutable context) Copy Section

State acts as short-term memory during a run. It holds dynamic data that can evolve during execution, such as values derived from tools or LLM outputs.

const CustomState = Annotation.Root({
  ...MessagesAnnotation.spec,
  userName: Annotation<string>,
});

const agent = createReactAgent({
  // Other agent parameters...
  // highlight-next-line
  stateSchema: CustomState,
})

await agent.invoke(
  // highlight-next-line
  { messages: "hi!", userName: "Jane" }
)

!!! tip "Turning on memory"

Please see the [memory guide](./memory.md) for more details on how to enable memory. This is a powerful feature that allows you to persist the agent's state across multiple invocations.
Otherwise, the state is scoped only to a single agent run.

Long-Term Memory (cross-conversation context) Copy Section

For context that spans across conversations or sessions, LangGraph allows access to long-term memory via a store. This can be used to read or update persistent facts (e.g., user profiles, preferences, prior interactions). For more, see the Memory guide.

Customizing Prompts with Context Copy Chapter

Prompts define how the agent behaves. To incorporate runtime context, you can dynamically generate prompts based on the agent's state or config.

Common use cases:

• Personalization
• Role or goal customization
• Conditional behavior (e.g., user is admin)

=== "Using config"

```ts
import { BaseMessageLike } from "@langchain/core/messages";
import { RunnableConfig } from "@langchain/core/runnables";
import { initChatModel } from "langchain/chat_models/universal";
import { MessagesAnnotation } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const prompt = (
  state: typeof MessagesAnnotation.State,
  // highlight-next-line
  config: RunnableConfig
): BaseMessageLike[] => {
  // highlight-next-line
  const userName = config.configurable?.userName;
  const systemMsg = `You are a helpful assistant. Address the user as ${userName}.`;
  return [{ role: "system", content: systemMsg }, ...state.messages];
};

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  prompt
});

await agent.invoke(
  { messages: "hi!" },
  // highlight-next-line
  { configurable: { userName: "John Smith" } }
);
```

=== "Using state"

```ts
import { BaseMessageLike } from "@langchain/core/messages";
import { RunnableConfig } from "@langchain/core/runnables";
import { initChatModel } from "langchain/chat_models/universal";
import { Annotation, MessagesAnnotation } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const CustomState = Annotation.Root({
  ...MessagesAnnotation.spec,
  // highlight-next-line
  userName: Annotation<string>,
});

const prompt = (
  // highlight-next-line
  state: typeof CustomState.State,
): BaseMessageLike[] => {
  // highlight-next-line
  const userName = state.userName;
  const systemMsg = `You are a helpful assistant. Address the user as ${userName}.`;
  return [{ role: "system", content: systemMsg }, ...state.messages];
};

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  prompt,
  // highlight-next-line
  stateSchema: CustomState,
});

await agent.invoke(
  // highlight-next-line
  { messages: "hi!", userName: "John Smith" },
);
```

Tools Copy Chapter

Tools can access context through:

• Use RunnableConfig for config access
• Use runtime.state (the second argument, typed as ToolRuntime) for agent state

!!! tip "Browser / web environments"

When a tool runs inside a `ToolNode` (including in `createReactAgent`), the `ToolNode` forwards its input (the current graph state) to the tool via `runtime.state`. This works in every runtime, including web browsers.

An older alternative, `getCurrentTaskInput()`, relies on [`AsyncLocalStorage`](https://nodejs.org/api/async_hooks.html), which is available in Node.js, Deno, and Cloudflare Workers, but **not** in web browsers. Prefer `runtime.state` for portability.

=== "Using config"

```ts
import { RunnableConfig } from "@langchain/core/runnables";
import { initChatModel } from "langchain/chat_models/universal";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const getUserInfo = tool(
  async (input: Record<string, any>, config: RunnableConfig) => {
    // highlight-next-line
    const userId = config.configurable?.userId;
    return userId === "user_123" ? "User is John Smith" : "Unknown user";
  },
  {
    name: "get_user_info",
    description: "Look up user info.",
    schema: z.object({}),
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getUserInfo],
});

await agent.invoke(
  { messages: "look up user information" },
  // highlight-next-line
  { configurable: { userId: "user_123" } }
);
```

=== "Using state"

```ts
import { initChatModel } from "langchain/chat_models/universal";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { Annotation, MessagesAnnotation } from "@langchain/langgraph";
import { tool, type ToolRuntime } from "@langchain/core/tools";
import { z } from "zod";

const CustomState = Annotation.Root({
  ...MessagesAnnotation.spec,
  // highlight-next-line
  userId: Annotation<string>(),
});

const getUserInfo = tool(
  async (
    input: Record<string, any>,
    // highlight-next-line
    runtime: ToolRuntime<typeof CustomState.State>,
  ) => {
    // Read the graph state directly from the second argument.
    // This works in web browsers too (no AsyncLocalStorage required).
    // highlight-next-line
    const userId = runtime.state.userId;
    return userId === "user_123" ? "User is John Smith" : "Unknown user";
  },
  {
    name: "get_user_info",
    description: "Look up user info.",
    schema: z.object({})
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getUserInfo],
  // highlight-next-line
  stateSchema: CustomState,
});

await agent.invoke(
  // highlight-next-line
  { messages: "look up user information", userId: "user_123" }
);
```

Update context from tools Copy Chapter

Tools can modify the agent's state during execution. This is useful for persisting intermediate results or making information accessible to subsequent tools or prompts.

/* Detailed source-code truncated for AI context efficiency. */

For more details, see how to update state from tools.

Docs Agents Deployment (`docs/docs/agents/deployment.md`) Copy Section

Deployment

To deploy your LangGraph agent, create and configure a LangGraph app. This setup supports both local development and production deployments.

Features:

• 🖥️ Local server for development
• 🧩 Studio Web UI for visual debugging
• ☁️ Cloud and 🔧 self-hosted deployment options
• 📊 LangSmith integration for tracing and observability

!!! info "Requirements"

- ✅ You **must** have a [LangSmith account](https://www.langchain.com/langsmith). You can sign up for **free** and get started with the free tier.

Create a LangGraph app Copy Chapter

npm install create-langgraph
create-langgraph path/to/your/app

Follow the prompts and select New LangGraph Project. This will create an empty LangGraph project. You can modify it by replacing the code in src/agent/graph.ts with your agent code. For example:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const getWeather = tool(
  async (input: { city: string }) => {
    return `It's always sunny in ${input.city}!`;
  },
  {
    name: "getWeather",
    schema: z.object({
      city: z.string().describe("The city to get the weather for"),
    }),
    description: "Get weather for a given city.",
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
// make sure to export the graph that will be used in the LangGraph API server
// highlight-next-line
export const graph = createReactAgent({
  llm,
  tools: [getWeather],
  prompt: "You are a helpful assistant"
})

Install dependencies Copy Section

In the root of your new LangGraph app, install the dependencies:

yarn
# install these to use initChatModel with Anthropic
yarn add langchain
yarn add @langchain/anthropic

Create an `.env` file Copy Section

You will find a .env.example in the root of your new LangGraph app. Create
a .env file in the root of your new LangGraph app and copy the contents of the .env.example file into it, filling in the necessary API keys:

LANGSMITH_API_KEY=lsv2...
ANTHROPIC_API_KEY=sk-

Launch LangGraph server locally Copy Chapter

npx @langchain/langgraph-cli dev

This will start up the LangGraph API server locally. If this runs successfully, you should see something like:

Welcome to LangGraph.js!

• 🚀 API: http://localhost:2024

• 🎨 Studio UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024

LangGraph Studio Web UI Copy Chapter

LangGraph Studio Web is a specialized UI that you can connect to LangGraph API server to enable visualization, interaction, and debugging of your application locally. Test your graph in the LangGraph Studio Web UI by visiting the URL provided in the output of the npx @langchain/langgraph-cli dev command.

• LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024

Deployment Copy Chapter

Once your LangGraph app is running locally, you can deploy it using LangSmith Deployment or self-hosted options. Refer to the deployment options guide for detailed instructions on all supported deployment models.

Docs Agents Evals (`docs/docs/agents/evals.md`) Copy Section

Evals

To evaluate your agent's performance you can use LangSmith evaluations. You would need to first define an evaluator function to judge the results from an agent, such as final outputs or trajectory. Depending on your evaluation technique, this may or may not involve a reference output:

const evaluator = async (params: {
  inputs: Record<string, unknown>;
  outputs: Record<string, unknown>;
  referenceOutputs?: Record<string, unknown>;
}) => {
  // compare agent outputs against reference outputs
  const outputMessages = params.outputs.messages;
  const referenceMessages = params.referenceOutputs.messages;
  const score = compareMessages(outputMessages, referenceMessages);
  return { key: "evaluator_score", score: score };
};

To get started, you can use prebuilt evaluators from AgentEvals package:

npm install agentevals @langchain/core

Create evaluator Copy Chapter

A common way to evaluate agent performance is by comparing its trajectory (the order in which it calls its tools) against a reference trajectory:

// highlight-next-line
import { createTrajectoryMatchEvaluator } from "agentevals";

const outputs = [
  {
    role: "assistant",
    tool_calls: [
      {
        function: {
          name: "get_weather",
          arguments: JSON.stringify({ city: "san francisco" }),
        },
      },
      {
        function: {
          name: "get_directions",
          arguments: JSON.stringify({ destination: "presidio" }),
        },
      },
    ],
  },
];

const referenceOutputs = [
  {
    role: "assistant",
    tool_calls: [
      {
        function: {
          name: "get_weather",
          arguments: JSON.stringify({ city: "san francisco" }),
        },
      },
    ],
  },
];

// Create the evaluator
const evaluator = createTrajectoryMatchEvaluator({
  // highlight-next-line
  trajectoryMatchMode: "superset",  // (1)!
})

// Run the evaluator
const result = await evaluator({
  outputs,
  referenceOutputs,
});

1. Specify how the trajectories will be compared. superset will accept output trajectory as valid if it's a superset of the reference one. Other options include: strict, unordered and subset

As a next step, learn more about how to customize trajectory match evaluator.

LLM-as-a-judge Copy Section

You can use LLM-as-a-judge evaluator that uses an LLM to compare the trajectory against the reference outputs and output a score:

import {
  // highlight-next-line
  createTrajectoryLLMAsJudge,
  TRAJECTORY_ACCURACY_PROMPT_WITH_REFERENCE
} from "agentevals";

const evaluator = createTrajectoryLLMAsJudge({
  prompt: TRAJECTORY_ACCURACY_PROMPT_WITH_REFERENCE,
  model: "openai:o3-mini",
});

Run evaluator Copy Chapter

To run an evaluator, you will first need to create a LangSmith dataset. To use the prebuilt AgentEvals evaluators, you will need a dataset with the following schema:

• input: { messages: [...] } input messages to call the agent with.
• output: { messages": [...] } expected message history in the agent output. For trajectory evaluation, you can choose to keep only assistant messages.

import { evaluate } from "langsmith/evaluation";
import { createTrajectoryMatchEvaluator } from "agentevals";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const agent = createReactAgent({ ... })
const evaluator = createTrajectoryMatchEvaluator({ ... })
await evaluate(
  async (inputs) => await agent.invoke(inputs),
  {
    // replace with your dataset name
    data: "<Name of your dataset>",
    evaluators: [evaluator],
  }
);

Docs Agents Human In The Loop (`docs/docs/agents/human-in-the-loop.md`) Copy Section

Human-in-the-loop

To review, edit and approve tool calls in an agent you can use LangGraph's built-in human-in-the-loop features, specifically the interrupt() primitive.

LangGraph allows you to pause execution indefinitely — for minutes, hours, or even days—until human input is received.

This is possible because the agent state is checkpointed into a database, which allows the system to persist execution context and later resume the workflow, continuing from where it left off.

For a deeper dive into the human-in-the-loop concept, see the concept guide.

Review tool calls Copy Chapter

To add a human approval step to a tool:

1. Use interrupt() in the tool to pause execution.
2. Resume with a Command({ resume: ... }) to continue based on human input.

import { MemorySaver } from "@langchain/langgraph-checkpoint";
import { interrupt } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

// An example of a sensitive tool that requires human review / approval
const bookHotel = tool(
  async (input: { hotelName: string; }) => {
    let hotelName = input.hotelName;
    // highlight-next-line
    const response = interrupt(  // (1)!
      `Trying to call \`book_hotel\` with args {'hotel_name': ${hotelName}}. ` +
      `Please approve or suggest edits.`
    )
    if (response.type === "accept") {
      // proceed to execute the tool logic
    } else if (response.type === "edit") {
        hotelName = response.args["hotel_name"]
    } else {
        throw new Error(`Unknown response type: ${response.type}`)
    }
    return `Successfully booked a stay at ${hotelName}.`;
  },
  {
    name: "bookHotel",
    schema: z.object({
      hotelName: z.string().describe("Hotel to book"),
    }),
    description: "Book a hotel.",
  }
);

// highlight-next-line
const checkpointer = new MemorySaver();  // (2)!

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [bookHotel],
  // highlight-next-line
  checkpointer  // (3)!
});

1. The interrupt function pauses the agent graph at a specific node. In this case, we call interrupt() at the beginning of the tool function, which pauses the graph at the node that executes the tool. The information inside interrupt() (e.g., tool calls) can be presented to a human, and the graph can be resumed with the user input (tool call approval, edit or feedback).
2. The InMemorySaver is used to store the agent state at every step in the tool calling loop. This enables short-term memory and human-in-the-loop capabilities. In this example, we use InMemorySaver to store the agent state in memory. In a production application, the agent state will be stored in a database.
3. Initialize the agent with the checkpointer.

Run the agent with the stream() method, passing the config object to specify the thread ID. This allows the agent to resume the same conversation on future invocations.

const config = {
   configurable: {
      // highlight-next-line
      "thread_id": "1"
   }
}

for await (const chunk of await agent.stream(
  { messages: "book a stay at McKittrick hotel" },
  // highlight-next-line
  config
)) {
  console.log(chunk);
  console.log("\n");
};

You should see that the agent runs until it reaches the interrupt() call, at which point it pauses and waits for human input.

Resume the agent with a Command({ resume: ... }) to continue based on human input.

import { Command } from "@langchain/langgraph";

for await (const chunk of await agent.stream(
  new Command({ resume: { type: "accept" } }),  // (1)!
  // new Command({ resume: { type: "edit", args: { "hotel_name": "McKittrick Hotel" } } }),
  // highlight-next-line
  config
)) {
  console.log(chunk);
  console.log("\n");
};

1. The interrupt function is used in conjunction with the Command object to resume the graph with a value provided by the human.

Additional resources Copy Chapter

• Human-in-the-loop in LangGraph

Docs Agents Mcp (`docs/docs/agents/mcp.md`) Copy Section

MCP Integration

Model Context Protocol (MCP) is an open protocol that standardizes how applications provide tools and context to language models. LangGraph agents can use tools defined on MCP servers through the @langchain/mcp-adapters library.

Install the @langchain/mcp-adapters library to use MCP tools in LangGraph:

npm install @langchain/mcp-adapters

Use MCP tools Copy Chapter

The @langchain/mcp-adapters package enables agents to use tools defined across one or more MCP servers.

// highlight-next-line
import { MultiServerMCPClient } from "@langchain/mcp-adapters";
import { initChatModel } from "langchain/chat_models/universal";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

// highlight-next-line
const client = new MultiServerMCPClient({
  mcpServers: {
    "math": {
      command: "python",
      // Replace with absolute path to your math_server.py file
      args: ["/path/to/math_server.py"],
      transport: "stdio",
    },
    "weather": {
      // Ensure your start your weather server on port 8000
      url: "http://localhost:8000/sse",
      transport: "sse",
    }
  }
})

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  // highlight-next-line
  tools: await client.getTools()
});
 
const mathResponse = await agent.invoke(
  { messages: [ { role: "user", content: "what's (3 + 5) x 12?" } ] }
);
const weatherResponse = await agent.invoke(
  { messages: [ { role: "user", content: "what is the weather in nyc?" } ] }
);
await client.close();

Custom MCP servers Copy Chapter

To create your own MCP servers, you can use the mcp library in Python (or @modelcontextprotocol/sdk in TypeScript). These libraries provide a simple way to define tools and run them as servers.

Install the MCP library:

pip install mcp

Use the following reference implementations to test your agent with MCP tool servers.

from mcp.server.fastmcp import FastMCP

mcp = FastMCP("Math")

@mcp.tool()
def add(a: int, b: int) -> int:
    """Add two numbers"""
    return a + b

@mcp.tool()
def multiply(a: int, b: int) -> int:
    """Multiply two numbers"""
    return a * b

if __name__ == "__main__":
    mcp.run(transport="stdio")

from mcp.server.fastmcp import FastMCP

mcp = FastMCP("Weather")

@mcp.tool()
async def get_weather(location: str) -> str:
    """Get weather for location."""
    return "It's always sunny in New York"

if __name__ == "__main__":
    mcp.run(transport="sse")

Additional resources Copy Chapter

• MCP documentation
• MCP Transport documentation

Docs Agents Memory (`docs/docs/agents/memory.md`) Copy Section

Memory

LangGraph supports two types of memory essential for building conversational agents:

• Short-term memory: Tracks the ongoing conversation by maintaining message history within a session.
• Long-term memory: Stores user-specific or application-level data across sessions.

This guide demonstrates how to use both memory types with agents in LangGraph. For a deeper
understanding of memory concepts, refer to the LangGraph memory documentation.

!!! note "Terminology"

In LangGraph:

- *Short-term memory* is also referred to as **thread-level memory**.
- *Long-term memory* is also called **cross-thread memory**.

A [thread](../concepts/persistence.md#threads) represents a sequence of related runs
grouped by the same `thread_id`.

Short-term memory Copy Chapter

Short-term memory enables agents to track multi-turn conversations. To use it, you must:

1. Provide a checkpointer when creating the agent. The checkpointer enables persistence of the agent's state.
2. Supply a thread_id in the config when running the agent. The thread_id is a unique identifier for the conversation session.

// highlight-next-line
import { MemorySaver } from "@langchain/langgraph-checkpoint";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

// highlight-next-line
const checkpointer = new MemorySaver();  // (1)!

const getWeather = tool(
  async (input: { city: string }) => {
    return `It's always sunny in ${input.city}!`;
  },
  {
    name: "getWeather",
    schema: z.object({
      city: z.string().describe("The city to get the weather for"),
    }),
    description: "Get weather for a given city.",
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
  // highlight-next-line
  checkpointer  // (2)!
});

// Run the agent
// highlight-next-line
const config = { configurable: { thread_id: "1" } };  // (3)!
const sfResponse = await agent.invoke(
  { messages: [ { role: "user", content: "what is the weather in sf" } ] },
  config  // (4)!
);
const nyResponse = await agent.invoke(
  { messages: [ { role: "user", content: "what about new york?" } ] },
  config
);

1. The MemorySaver is a checkpointer that stores the agent's state in memory. In a production setting, you would typically use a database or other persistent storage. Please review the checkpointer documentation for more options. If you're deploying with LangGraph Platform, the platform will provide a production-ready checkpointer for you.
2. The checkpointer is passed to the agent. This enables the agent to persist its state across invocations. Please note that
3. A unique thread_id is provided in the config. This ID is used to identify the conversation session. The value is controlled by the user and can be any string.
4. The agent will continue the conversation using the same thread_id. This will allow the agent to infer that the user is asking specifically about the weather in New York.

When the agent is invoked the second time with the same thread_id, the original message history from the first conversation is automatically included, allowing the agent to infer that the user is asking specifically about the weather in New York.

!!! Note "LangGraph Platform providers a production-ready checkpointer"

If you're using [LangGraph Platform](./deployment.md), during deployment your checkpointer will be automatically configured to use a production-ready database.

Long-term memory Copy Chapter

Use long-term memory to store user-specific or application-specific data across conversations. This is useful for applications like chatbots, where you want to remember user preferences or other information.

To use long-term memory, you need to:

1. Configure a store to persist data across invocations.
2. Use the config.store to access the store from within tools or prompts.

Reading Copy Section

/* Detailed source-code truncated for AI context efficiency. */

1. The InMemoryStore is a store that stores data in memory. In a production setting, you would typically use a database or other persistent storage. Please review the documentation for more options. If you're deploying with LangGraph Platform, the platform will provide a production-ready store for you.
2. For this example, we write some sample data to the store using the put method. Please see the BaseStore.put API reference for more details.
3. The first argument is the namespace. This is used to group related data together. In this case, we are using the users namespace to group user data.
4. A key within the namespace. This example uses a user ID for the key.
5. The data that we want to store for the given user.
6. You can access the store via config.store from anywhere in your nodes, tools and prompts. It contains the store that was passed to the agent when it was created.
7. The get method is used to retrieve data from the store. The first argument is the namespace, and the second argument is the key. This will return a StoreValue object, which contains the value and metadata about the value.
8. The store is passed to the agent. This enables the agent to access the store when running tools.

Writing Copy Section

/* Detailed source-code truncated for AI context efficiency. */

1. The InMemoryStore is a store that stores data in memory. In a production setting, you would typically use a database or other persistent storage. Please review the store documentation for more options. If you're deploying with LangGraph Platform, the platform will provide a production-ready store for you.
2. The UserInfo class is an interface that defines the structure of the user information. We will specify the same schema below using a zod object, so that the LLM formats the response according to the schema.
3. The saveUserInfo is a tool that allows an agent to update user information. This could be useful for a chat application where the user wants to update their profile information.
4. You can access the store via config.store from anywhere in your nodes, tools and prompts. It contains the store that was passed to the agent when it was created.
5. The put method is used to store data in the store. The first argument is the namespace, and the second argument is the key. This will store the user information in the store.
6. The userId is passed in the config. This is used to identify the user whose information is being updated.

Additional resources Copy Chapter

• Memory in LangGraph

Docs Agents Models (`docs/docs/agents/models.md`) Copy Section

Models

This page describes how to configure the chat model used by an agent.

Tool calling support Copy Chapter

To enable tool-calling agents, the underlying LLM must support tool calling.

Compatible models can be found in the LangChain integrations directory.

Using `initChatModel` Copy Chapter

The initChatModel utility simplifies model initialization with configurable parameters:

import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel(
  "anthropic:claude-3-7-sonnet-latest",
  {
    temperature: 0,
    maxTokens: 2048
  }
);

Refer to the API reference for advanced options.

Using provider-specific LLMs Copy Chapter

If a model provider is not available via initChatModel, you can instantiate the provider's model class directly. The model must implement the BaseChatModel interface and support tool calling:

import { ChatAnthropic } from "@langchain/anthropic";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

// highlight-next-line
const llm = new ChatAnthropic({
  modelName: "claude-3-7-sonnet-latest",
  temperature: 0,
  maxTokens: 2048
});

const agent = createReactAgent({
  // highlight-next-line
  llm,
  // other parameters
});

!!! note "Illustrative example"

The example above uses `ChatAnthropic`, which is already supported by `initChatModel`. This pattern is shown to illustrate how to manually instantiate a model not available through `initChatModel`.

Additional resources Copy Chapter

• Model integration directory
• Universal initialization with initChatModel

Docs Agents Multi Agent (`docs/docs/agents/multi-agent.md`) Copy Section

Multi-agent

A single agent might struggle if it needs to specialize in multiple domains or manage many tools. To tackle this, you can break your agent into smaller, independent agents and composing them into a multi-agent system.

In multi-agent systems, agents need to communicate between each other. They do so via handoffs — a primitive that describes which agent to hand control to and the payload to send to that agent.

Two of the most popular multi-agent architectures are:

• supervisor — individual agents are coordinated by a central supervisor agent. The supervisor controls all communication flow and task delegation, making decisions about which agent to invoke based on the current context and task requirements.
• swarm — agents dynamically hand off control to one another based on their specializations. The system remembers which agent was last active, ensuring that on subsequent interactions, the conversation resumes with that agent.

Supervisor Copy Chapter

Use langgraph-supervisor library to create a supervisor multi-agent system:

npm install @langchain/langgraph-supervisor

/* Detailed source-code truncated for AI context efficiency. */

Swarm Copy Chapter

Use langgraph-swarm library to create a swarm multi-agent system:

npm install @langchain/langgraph-swarm

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatAnthropic } from "@langchain/anthropic";
// highlight-next-line
import { createSwarm, createHandoffTool } from "@langchain/langgraph-swarm";

const transferToHotelAssistant = createHandoffTool({
  agentName: "hotel_assistant",
  description: "Transfer user to the hotel-booking assistant.",
});

const transferToFlightAssistant = createHandoffTool({
  agentName: "flight_assistant",
  description: "Transfer user to the flight-booking assistant.",
});


const llm = new ChatAnthropic({ modelName: "claude-3-5-sonnet-latest" });

const flightAssistant = createReactAgent({
  llm,
  tools: [bookFlight, transferToHotelAssistant],
  prompt: "You are a flight booking assistant",
  name: "flight_assistant",
});

const hotelAssistant = createReactAgent({
  llm,
  tools: [bookHotel, transferToFlightAssistant],
  prompt: "You are a hotel booking assistant",
  name: "hotel_assistant",
});

// highlight-next-line
const swarm = createSwarm({
  agents: [flightAssistant, hotelAssistant],
  defaultActiveAgent: "flight_assistant",
}).compile();

const stream = await swarm.stream({
  messages: [{
    role: "user",
    content: "first book a flight from BOS to JFK and then book a stay at McKittrick Hotel"
  }]
});

for await (const chunk of stream) {
  console.log(chunk);
  console.log("\n");
}

Handoffs Copy Chapter

A common pattern in multi-agent interactions is handoffs, where one agent hands off control to another. Handoffs allow you to specify:

• destination: target agent to navigate to
• payload: information to pass to that agent

This is used both by langgraph-supervisor (supervisor hands off to individual agents) and langgraph-swarm (an individual agent can hand off to other agents).

To implement handoffs with createReactAgent, you need to:

1. Create a special tool that can transfer control to a different agent

   ts Copy

   const transferToBob = tool(
     async (_) => {
       return new Command({
         // name of the agent (node) to go to
         // highlight-next-line
         goto: "bob",
         // data to send to the agent
         // highlight-next-line
         update: { messages: ... },
         // indicate to LangGraph that we need to navigate to
         // agent node in a parent graph
         // highlight-next-line
         graph: Command.PARENT,
       });
     },
     {
       name: ...,
       schema: ...,
       description: ...
     }
   );

2. Create individual agents that have access to handoff tools:

   ts Copy

   const flightAssistant = createReactAgent(
     ..., tools: [bookFlight, transferToHotelAssistant]
   )
   const hotelAssistant = createReactAgent(
     ..., tools=[bookHotel, transferToFlightAssistant]
   )

3. Define a parent graph that contains individual agents as nodes:

   ts Copy

   import { StateGraph, MessagesAnnotation } from "@langchain/langgraph";
   
   const multiAgentGraph = new StateGraph(MessagesAnnotation)
     .addNode("flight_assistant", flightAssistant)
     .addNode("hotel_assistant", hotelAssistant)
     ...

Putting this together, here is how you can implement a simple multi-agent system with two agents — a flight booking assistant and a hotel booking assistant:

/* Detailed source-code truncated for AI context efficiency. */

1. Access agent's state
2. The Command primitive allows specifying a state update and a node transition as a single operation, making it useful for implementing handoffs.
3. Name of the agent or node to hand off to.
4. Take the agent's messages and add them to the parent's state as part of the handoff. The next agent will see the parent state.
5. Indicate to LangGraph that we need to navigate to agent node in a parent multi-agent graph.

!!! Note
This handoff implementation assumes that:

- each agent receives overall message history (across all agents) in the multi-agent system as its input
- each agent outputs its internal messages history to the overall message history of the multi-agent system

Check out LangGraph [supervisor](https://github.com/langchain-ai/langgraph-supervisor-py#customizing-handoff-tools) and [swarm](https://github.com/langchain-ai/langgraph-swarm-py#customizing-handoff-tools) documentation to learn how to customize handoffs.

Docs Agents Prebuilt (`docs/docs/agents/prebuilt.md`) Copy Section

Community Agents

To share your project, simply open a Pull Request adding an entry for your package in our packages.yml file.

Docs Agents Run Agents (`docs/docs/agents/run_agents.md`) Copy Section

Running agents

Agents support execution using either .invoke() for full responses, or .stream() for incremental streaming of the output. This section explains how to provide input, interpret output, enable streaming, and control execution limits.

Basic usage Copy Chapter

Agents can be executed using .invoke():

import { createReactAgent } from "@langchain/langgraph/prebuilt";

const agent = createReactAgent(...);

// highlight-next-line
const response = await agent.invoke(
  { messages: [ { role: "user", content: "what is the weather in sf" } ] }
);

Inputs and outputs Copy Chapter

Agents use a language model that expects a list of messages as an input. Therefore, agent inputs and outputs are stored as a list of messages under the messages key in the agent state.

Input format Copy Chapter

Agent input must be an object with a messages key. Supported formats are:

Messages are automatically converted into LangChain's internal message format. You can read
more about LangChain messages in the LangChain documentation.

!!! tip "Using custom agent state"

You can provide additional fields defined in your agent's state schema directly in the input dictionary. This allows dynamic behavior based on runtime data or prior tool outputs.  
See the [context guide](./context.md) for full details.

!!! note

A string input for `messages` is converted to a [HumanMessage](https://js.langchain.com/docs/concepts/messages/#humanmessage). This behavior differs from the `prompt` parameter in `createReactAgent`, which is interpreted as a [SystemMessage](https://js.langchain.com/docs/concepts/messages/#systemmessage) when passed as a string.

Output format Copy Chapter

Agent output is a dictionary containing:

• messages: A list of all messages exchanged during execution (user input, assistant replies, tool invocations).
• Optionally, structuredResponse if structured output is configured.
• If using a custom stateSchema, additional keys corresponding to your defined fields may also be present in the output. These can hold updated state values from tool execution or prompt logic.

See the context guide for more details on working with custom state schemas and accessing context.

Streaming output Copy Chapter

Agents support streaming responses for more responsive applications. This includes:

• Progress updates after each step
• LLM tokens as they're generated
• Custom tool messages during execution

Streaming is available in both sync and async modes:

for await (
  const chunk of await agent.stream(
    { messages: [ { role: "user", content: "what is the weather in sf" } ] },
    { streamMode: "updates" },
  )
) {
  console.log(chunk);
}

!!! tip

For full details, see the [streaming guide](./streaming.md).

Max iterations Copy Chapter

To control agent execution and avoid infinite loops, set a recursion limit. This defines the maximum number of steps the agent can take before raising a GraphRecursionError. You can configure recursionLimit at runtime or when defining agent via .withConfig():

=== "Runtime"

```ts
import { GraphRecursionError } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const maxIterations = 3;
// highlight-next-line
const recursionLimit = 2 * maxIterations + 1;
const llm = await initChatModel("anthropic:claude-3-5-haiku-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather]
});

try {
  const response = await agent.invoke(
    { messages: [ { role: "user", content: "what's the weather in sf" } ] },
    // highlight-next-line
    { recursionLimit }
  );
} catch (error) {
  if (error instanceof GraphRecursionError) {
    console.log("Agent stopped due to max iterations.");
  } else {
    throw error;
  }
}
```

=== ".withConfig()"

```ts
import { GraphRecursionError } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const maxIterations = 3;
// highlight-next-line
const recursionLimit = 2 * maxIterations + 1;
const llm = await initChatModel("anthropic:claude-3-5-haiku-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather]
});
// highlight-next-line
const agentWithRecursionLimit = agent.withConfig({ recursionLimit });

try {
  const response = await agentWithRecursionLimit.invoke(
    { messages: [ { role: "user", content: "what's the weather in sf" } ] }
  );
} catch (error) {
  if (error instanceof GraphRecursionError) {
    console.log("Agent stopped due to max iterations.");
  } else {
    throw error;
  }
}
```

Docs Agents Streaming (`docs/docs/agents/streaming.md`) Copy Section

Streaming

Streaming is key to building responsive applications. There are a few types of data you’ll want to stream:

1. Agent progress — get updates after each node in the agent graph is executed.
2. LLM tokens — stream tokens as they are generated by the language model.
3. Custom updates — emit custom data from tools during execution (e.g., "Fetched 10/100 records")

You can stream more than one type of data at a time.

Agent progress Copy Chapter

To stream agent progress, use the stream() method with streamMode: "updates". This emits an event after every agent step.

For example, if you have an agent that calls a tool once, you should see the following updates:

• LLM node: AI message with tool call requests
• Tool node: Tool message with execution result
• LLM node: Final AI response

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
});
// highlight-next-line
for await (const chunk of await agent.stream(
  { messages: "what is the weather in sf" },
  // highlight-next-line
  { streamMode: "updates" }
)) {
  console.log(chunk);
  console.log("\n");
}

LLM tokens Copy Chapter

To stream tokens as they are produced by the LLM, use streamMode: "messages":

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
});
// highlight-next-line
for await (const [token, metadata] of await agent.stream(
  { messages: "what is the weather in sf" },
  // highlight-next-line
  { streamMode: "messages" }
)) {
  console.log("Token", token);
  console.log("Metadata", metadata);
  console.log("\n");
}

Tool updates Copy Chapter

To stream updates from tools as they are executed, you can use writer object available via config.writer:

import { LangGraphRunnableConfig } from "@langchain/langgraph";
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const getWeather = tool(
  async (input: { city: string }, config: LangGraphRunnableConfig) => {
    // stream any arbitrary data
    // highlight-next-line
    config.writer?.(`Looking up data for city: ${input.city}`);
    return `It's always sunny in ${input.city}!`;
  },
  {
    name: "getWeather",
    schema: z.object({
      city: z.string().describe("The city to get the weather for"),
    }),
    description: "Get weather for a given city.",
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
});

for await (const chunk of await agent.stream(
  { messages: "what is the weather in sf" },
  // highlight-next-line
  { streamMode: "custom" }
)) {
  console.log(chunk);
  console.log("\n");
}

Stream multiple modes Copy Chapter

You can specify multiple streaming modes by passing stream mode as a list: streamMode: ["updates", "messages", "custom"]:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [getWeather],
});

for await (const [streamMode, chunk] of await agent.stream(
  { messages: "what is the weather in sf" },
  // highlight-next-line
  { streamMode: ["updates", "messages", "custom"] }
)) {
  console.log(streamMode, chunk);
  console.log("\n");
}

Additional resources Copy Chapter

• Streaming in LangGraph

Docs Agents Tools (`docs/docs/agents/tools.md`) Copy Section

Tools

Tools are a way to encapsulate a function and its input schema in a way that can be passed to a chat model that supports tool calling. This allows the model to request the execution of this function with specific inputs.

You can either define your own tools or use prebuilt integrations that LangChain provides.

Define tools Copy Chapter

You create tools using the tool function:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
// highlight-next-line
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const multiply = tool(
  async (input: { a: number; b: number }) => {
    return input.a * input.b;
  },
  {
    name: "multiply",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Multiply two numbers.",
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [multiply],
});

For additional customization, refer to the custom tools guide.

Hide arguments from the model Copy Chapter

Some tools require runtime-only arguments (e.g., user ID or session context) that should not be controllable by the model.

You can put these arguments in the state or config of the agent, and access
this information inside the tool:

import { z } from "zod";
import { tool, type ToolRuntime } from "@langchain/core/tools";
// highlight-next-line
import { MessagesAnnotation } from "@langchain/langgraph";

const myTool = tool(
  async (
    input: {
      // This will be populated by an LLM
      toolArg: string;
    },
    // access runtime values from the second argument
    // highlight-next-line
    runtime: ToolRuntime<typeof MessagesAnnotation.State>
  ) => {
    // Fetch the current agent state
    // highlight-next-line
    const state = runtime.state;
    doSomethingWithState(state.messages);
    doSomethingWithConfig(runtime.config);
    // ...
  },
  {
    name: "myTool",
    schema: z.object({
      myToolArg: z.number().describe("Tool arg"),
    }),
    description: "My tool.",
  }
);

Disable parallel tool calling Copy Chapter

Some model providers support executing multiple tools in parallel, but
allow users to disable this feature.

For supported providers, you can disable parallel tool calling by setting parallel_tool_calls: false via the model.bindTools() method:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { ChatOpenAI } from "@langchain/openai";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const add = tool(
  async (input: { a: number; b: number }) => {
    return input.a + input.b;
  },
  {
    name: "add",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Add two numbers.",
  }
);

const multiply = tool(
  async (input: { a: number; b: number }) => {
    return input.a * input.b;
  },
  {
    name: "multiply",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Multiply two numbers.",
  }
);

const llm = new ChatOpenAI({ model: "gpt-4.1" });

const tools = [add, multiply];
const agent = createReactAgent({
  // disable parallel tool calls
  // highlight-next-line
  llm: llm.bindTools(tools, { parallel_tool_calls: false }),
  tools,
});

const response = await agent.invoke({
  messages: [{ role: "user", content: "what's 3 + 5 and 4 * 7?" }],
});

Return tool results directly Copy Chapter

Use returnDirect: true to return tool results immediately and stop the agent loop:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const add = tool(
  async (input: { a: number; b: number }) => {
    return input.a + input.b;
  },
  {
    name: "add",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Add two numbers.",
    // highlight-next-line
    returnDirect: true,
  }
);

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [add],
});

const response = await agent.invoke({
  messages: [{ role: "user", content: "what's 3 + 5?" }],
});

Force tool use Copy Chapter

To force the agent to use specific tools, you can set the tool_choice option in model.bindTools():

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const greet = tool(
  async (input: { userName: string }) => {
    return `Hello ${input.userName}!`;
  },
  {
    name: "greet",
    schema: z.object({
      userName: z.string().describe("Name of the user to greet"),
    }),
    description: "Greet user.",
    // highlight-next-line
    returnDirect: true,
  }
);

const llm = new ChatAnthropic({ model: "claude-3-7-sonnet-latest" });
const tools = [greet];

const agent = createReactAgent({
  // highlight-next-line
  llm: llm.bindTools(tools, { tool_choice: { type: "tool", name: "greet" } }),
  tools,
});

const response = await agent.invoke({
  messages: "Hi, I am Bob",
});

!!! Warning "Avoid infinite loops"

Forcing tool usage without stopping conditions can create infinite loops. Use one of the following safeguards:

- Mark the tool with [`returnDirect: True`](#return-tool-results-directly) to end the loop after execution.
- Set [`recursionLimit`](../concepts/low_level.md#recursion-limit) to restrict the number of execution steps.

Handle tool errors Copy Chapter

By default, the agent will catch all exceptions raised during tool calls and will pass those as tool messages to the LLM. To control how the errors are handled, you can use the prebuilt ToolNode — the node that executes tools inside createReactAgent — via its handleToolErrors parameter:

=== "Enable error handling (default)"

```ts
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";

const multiply = tool(
  async (input: { a: number; b: number }) => {
    if (input.a === 42) {
      throw new Error("The ultimate error");
    }
    return input.a * input.b;
  },
  {
    name: "multiply",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Multiply two numbers.",
  }
);

// Run with error handling (default)
const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agent = createReactAgent({
  llm,
  tools: [multiply],
});

const response = await agent.invoke(
  { messages: [ { role: "user", content: "what's 42 x 7?" } ] }
);
```

=== "Disable error handling"

```ts
import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";
import { tool } from "@langchain/core/tools";
import { z } from "zod";
import { ToolNode } from "@langchain/langgraph/prebuilt";

const multiply = tool(
  async (input: { a: number; b: number }) => {
    if (input.a === 42) {
      throw new Error("The ultimate error");
    }
    return input.a * input.b;
  },
  {
    name: "multiply",
    schema: z.object({
      a: z.number().describe("First operand"),
      b: z.number().describe("Second operand"),
    }),
    description: "Multiply two numbers.",
  }
);

// highlight-next-line
const toolNode = new ToolNode({
  tools: [multiply],
  // highlight-next-line
  handleToolErrors: false, // (1)!
});

const llm = await initChatModel("anthropic:claude-3-7-sonnet-latest");
const agentNoErrorHandling = createReactAgent({
  llm,
  tools: toolNode,
});

const response = await agentNoErrorHandling.invoke(
  { messages: [ { role: "user", content: "what's 42 x 7?" } ] }
);
```

1. This disables error handling (enabled by default).

Prebuilt tools Copy Chapter

You can use prebuilt tools from model providers by passing a dictionary with tool specs to the tools parameter of createReactAgent. For example, to use the web_search_preview tool from OpenAI:

import { createReactAgent } from "@langchain/langgraph/prebuilt";
import { initChatModel } from "langchain/chat_models/universal";

const llm = await initChatModel("openai:gpt-4o-mini");

const agent = createReactAgent({
  llm,
  tools: [{ type: "web_search_preview" }],
});

const response = await agent.invoke({
  messages: ["What was a positive news story from today?"],
});

Additionally, LangChain supports a wide range of prebuilt tool integrations for interacting with APIs, databases, file systems, web data, and more. These tools extend the functionality of agents and enable rapid development.

You can browse the full list of available integrations in the LangChain integrations directory.

Some commonly used tool categories include:

• Search: Exa, SerpAPI, Tavily
• Code interpreters: Python REPL
• Databases: SQL, MongoDB, Redis
• Web data: Web scraping and browsing
• APIs: Discord, Gmail, and others

These integrations can be configured and added to your agents using the same tools parameter shown in the examples above.

Docs Agents Ui (`docs/docs/agents/ui.md`) Copy Section

UI

You can use a prebuilt chat UI for interacting with any LangGraph agent through the Agent Chat UI. Using the deployed version is the quickest way to get started, and allows you to interact with both local and deployed graphs.

Run agent in UI Copy Chapter

First, set up LangGraph API server locally or deploy your agent on LangSmith Deployment.

Then, navigate to Agent Chat UI, or clone the repository and run the dev server locally:

!!! Tip

UI has out-of-box support for rendering tool calls, and tool result messages. To customize what messages are shown, see the [Hiding Messages in the Chat](https://github.com/langchain-ai/agent-chat-ui?tab=readme-ov-file#hiding-messages-in-the-chat) section in the Agent Chat UI documentation.

Generative UI Copy Chapter

You can also use generative UI in the Agent Chat UI.

Generative UI allows you to define React components, and push them to the UI from the LangGraph server. For more documentation on building generative UI LangGraph agents, read these docs.

Docs Concepts .Meta.Yml (`docs/docs/concepts/.meta.yml`) Copy Section

tags:

• concepts
• conceptual guide
• explanation

Docs Concepts Agentic Concepts (`docs/docs/concepts/agentic_concepts.md`) Copy Section

Agent architectures

Many LLM applications implement a particular control flow of steps before and / or after LLM calls. As an example, RAG performs retrieval of relevant documents to a question, and passes those documents to an LLM in order to ground the model's response.

Instead of hard-coding a fixed control flow, we sometimes want LLM systems that can pick its own control flow to solve more complex problems! This is one definition of an agent: an agent is a system that uses an LLM to decide the control flow of an application. There are many ways that an LLM can control application:

• An LLM can route between two potential paths
• An LLM can decide which of many tools to call
• An LLM can decide whether the generated answer is sufficient or more work is needed

As a result, there are many different types of agent architectures, which given an LLM varying levels of control.

Router Copy Chapter

A router allows an LLM to select a single step from a specified set of options. This is an agent architecture that exhibits a relatively limited level of control because the LLM usually governs a single decision and can return a narrow set of outputs. Routers typically employ a few different concepts to achieve this.

Structured Output Copy Section

Structured outputs with LLMs work by providing a specific format or schema that the LLM should follow in its response. This is similar to tool calling, but more general. While tool calling typically involves selecting and using predefined functions, structured outputs can be used for any type of formatted response. Common methods to achieve structured outputs include:

1. Prompt engineering: Instructing the LLM to respond in a specific format.
2. Output parsers: Using post-processing to extract structured data from LLM responses.
3. Tool calling: Leveraging built-in tool calling capabilities of some LLMs to generate structured outputs.

Structured outputs are crucial for routing as they ensure the LLM's decision can be reliably interpreted and acted upon by the system. Learn more about structured outputs in this how-to guide.

Tool calling agent Copy Chapter

While a router allows an LLM to make a single decision, more complex agent architectures expand the LLM's control in two key ways:

1. Multi-step decision making: The LLM can control a sequence of decisions rather than just one.
2. Tool access: The LLM can choose from and use a variety of tools to accomplish tasks.

ReAct is a popular general purpose agent architecture that combines these expansions, integrating three core concepts.

1. Tool calling: Allowing the LLM to select and use various tools as needed.
2. Memory: Enabling the agent to retain and use information from previous steps.
3. Planning: Empowering the LLM to create and follow multi-step plans to achieve goals.

This architecture allows for more complex and flexible agent behaviors, going beyond simple routing to enable dynamic problem-solving across multiple steps. You can use it with createReactAgent.

Tool calling Copy Section

Tools are useful whenever you want an agent to interact with external systems. External systems (e.g., APIs) often require a particular input schema or payload, rather than natural language. When we bind an API, for example, as a tool we given the model awareness of the required input schema. The model will choose to call a tool based upon the natural language input from the user and it will return an output that adheres to the tool's schema.

Many LLM providers support tool calling and tool calling interface in LangChain is simple: you can define a tool schema, and pass it into ChatModel.bindTools([tool]).

Memory Copy Section

Memory is crucial for agents, enabling them to retain and utilize information across multiple steps of problem-solving. It operates on different scales:

1. Short-term memory: Allows the agent to access information acquired during earlier steps in a sequence.
2. Long-term memory: Enables the agent to recall information from previous interactions, such as past messages in a conversation.

LangGraph provides full control over memory implementation:

• State: User-defined schema specifying the exact structure of memory to retain.
• Checkpointers: Mechanism to store state at every step across different interactions.

This flexible approach allows you to tailor the memory system to your specific agent architecture needs. For a practical guide on adding memory to your graph, see this tutorial.

Effective memory management enhances an agent's ability to maintain context, learn from past experiences, and make more informed decisions over time.

Planning Copy Section

In the ReAct architecture, an LLM is called repeatedly in a while-loop. At each step the agent decides which tools to call, and what the inputs to those tools should be. Those tools are then executed, and the outputs are fed back into the LLM as observations. The while-loop terminates when the agent decides it is not worth calling any more tools.

ReAct implementation Copy Section

There are several differences between this paper and the pre-built createReactAgent implementation: