# Overview
URL: /docs/runtimes/langgraph/overview

Connect to LangGraph Cloud for agent workflows with streaming.

`@assistant-ui/react-langgraph` integrates with [`@langchain/langgraph-sdk`](https://docs.langchain.com/oss/javascript/langgraph-sdk) directly, exposing the full LangGraph Cloud feature set in assistant-ui: streaming, subgraph events, UI messages, message metadata, interrupts, and end-to-end cancellation.

<Callout type="info">
  **Migrating from LangServe?** LangChain has deprecated `RemoteRunnable` upstream and consolidated the chain and agent execution stories under LangGraph. Rebuild your chain as a LangGraph graph (LangChain's [LangServe → LangGraph migration guide](https://github.com/langchain-ai/langserve/blob/main/MIGRATION.md) covers the shape change), deploy via LangGraph Cloud or self-host LangGraph Studio, and use this runtime on the frontend. The runtime ships streaming, interrupts, generative UI, message metadata, and end-to-end cancellation out of the box.
</Callout>

## When to use it \[#when-to-use-it]

Pick the LangGraph runtime when:

* You have (or want) a LangGraph Cloud server, locally via [LangGraph Studio](https://github.com/langchain-ai/langgraph-studio) or hosted via [LangSmith](https://www.langchain.com/langsmith).
* Your graph state has a `messages` key with LangChain-alike messages.
* You want generative UI (`ui_message`), per-message metadata, subgraph events, or checkpoint-based message editing.

<Callout type="info">
  If you are already using `@langchain/react`'s `useStream` hook, the alternative [`@assistant-ui/react-langchain`](/docs/runtimes/langchain) adapter may fit better. It delegates the stream plumbing to the upstream hook; the feature surface differs, see [LangChain useStream](/docs/runtimes/langchain) for the comparison table.
</Callout>

## Architecture \[#architecture]

`@assistant-ui/react-langgraph` is layered on `ExternalStoreRuntime` (see [architecture](/docs/runtimes/concepts/architecture)). Graph state is the source of truth; the runtime renders messages from `state.values.messages` and submits user input back to the graph.

Shared adapters (attachments, speech, feedback, history) work the same way described in [adapters](/docs/runtimes/concepts/adapters).

## Requirements \[#requirements]

* A LangGraph Cloud API server.
* React 18 or 19.
* The graph state must include a `messages` key with LangChain-alike messages.

## Install \[#install]

<InstallCommand npm="[&#x22;@assistant-ui/react&#x22;, &#x22;@assistant-ui/react-langgraph&#x22;, &#x22;@langchain/langgraph-sdk&#x22;]" />

## Next \[#next]

<Cards>
  <Card title="Quickstart" description="From-template and manual setup paths to a working LangGraph chat." href="/docs/runtimes/langgraph/quickstart" />

  <Card title="Streaming" description="Event handlers, message metadata, generative UI." href="/docs/runtimes/langgraph/streaming" />

  <Card title="Interrupts" description="Interrupt persistence and checkpoint-based message editing." href="/docs/runtimes/langgraph/interrupts" />

  <Card title="Threads" description="Basic thread support, AssistantCloud, custom thread list adapter." href="/docs/runtimes/langgraph/threads" />

  <Card title="Tutorial: Stockbroker" description="End-to-end stockbroker assistant with generative UI and approval flows." href="/docs/runtimes/langgraph/tutorial/introduction" />
</Cards>