assistant-ui--assistant-ui/examples/with-langchain

LangChain useStream Example

Demonstrates @assistant-ui/react-langchain, which wraps useStream from @langchain/react and exposes it as an assistant-ui runtime.

assistant-ui also ships @assistant-ui/react-langgraph, which integrates with @langchain/langgraph-sdk directly and currently has a broader feature set. Pick the adapter that matches your upstream choice. See the comparison.

Quick Start

pnpm install

Environment Variables

Create .env.local:

NEXT_PUBLIC_LANGGRAPH_API_URL=http://localhost:2024
NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id

Start a local LangGraph server via LangGraph Studio pointing at your graph, or use LangSmith for a hosted deployment.

Run

pnpm dev

Open http://localhost:3000.

Key Features

• useStreamRuntime — thin wrapper around useStream from @langchain/react.
• useLangChainState<T>(key) — reads arbitrary custom state keys (demo uses state.todos in TodosPanel).
• No hand-written stream generator, no create / load / getCheckpointId glue.

Files of interest

• app/MyRuntimeProvider.tsx — entire runtime setup in ~15 lines.
• components/TodosPanel.tsx — demonstrates useLangChainState<Todo[]>("todos", []).

Related Documentation

• assistant-ui Documentation
• LangChain useStream Integration
• react-langgraph vs react-langchain