assistant-ui logo/Docs
LangGraph Cloud

Overview

Connect to LangGraph Cloud for agent workflows with streaming.

@assistant-ui/react-langgraph integrates with @langchain/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.

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 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.

When to use it

Pick the LangGraph runtime when:

  • You have (or want) a LangGraph Cloud server, locally via LangGraph Studio or hosted via 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.

If you are already using @langchain/react's useStream hook, the alternative @assistant-ui/react-langchain adapter may fit better. It delegates the stream plumbing to the upstream hook; the feature surface differs, see LangChain useStream for the comparison table.

Architecture

@assistant-ui/react-langgraph is layered on ExternalStoreRuntime (see 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.

Requirements

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

Install

npm install @assistant-ui/react @assistant-ui/react-langgraph @langchain/langgraph-sdk

Next

QuickstartFrom-template and manual setup paths to a working LangGraph chat.StreamingEvent handlers, message metadata, generative UI.InterruptsInterrupt persistence and checkpoint-based message editing.ThreadsBasic thread support, AssistantCloud, custom thread list adapter.Tutorial: StockbrokerEnd-to-end stockbroker assistant with generative UI and approval flows.