@assistant-ui/mcp-docs-server 0.1.29 → 0.1.30

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -1447,7 +1447,7 @@ The main interface for connecting your state to assistant-ui.
       name: "isRunning",
       type: "boolean",
       description:
-        "Whether the assistant is currently generating a response. When true, shows optimistic assistant message",
+        "Whether the assistant is currently generating a response. When true, shows an optimistic assistant message and flows directly to `thread.isRunning`, so the thread stays in a running state even after the last assistant message has completed (e.g. while suggestions or metadata chunks are still arriving). When omitted, `thread.isRunning` falls back to the last-message-status heuristic.",
       default: "false",
     },
     {

package/.docs/raw/docs/runtimes/langchain/comparison.mdx

@@ -0,0 +1,60 @@
+---
+title: Comparison with `react-langgraph`
+description: How `@assistant-ui/react-langchain` differs from `@assistant-ui/react-langgraph`.
+---
+
+Both packages connect assistant-ui to LangGraph backends. They are **independent adapters for different upstream libraries** — one is not a successor to the other.
+
+| Aspect                         | `@assistant-ui/react-langgraph`                              | `@assistant-ui/react-langchain`                       |
+| ------------------------------ | ------------------------------------------------------------ | ----------------------------------------------------- |
+| Wraps                          | `@langchain/langgraph-sdk` (raw SDK)                         | `@langchain/react` (`useStream` hook)                 |
+| Age                            | Sept 2024 onward                                             | April 2026 onward                                     |
+| Version                        | `0.13.x`                                                     | `0.0.x`                                               |
+| Lines of source                | ~7,500                                                       | ~600                                                  |
+| Built on                       | `useExternalStoreRuntime`                                    | `useExternalStoreRuntime`                             |
+| `create-assistant-ui` template | `-t langgraph` ships this package                            | No template yet                                       |
+
+## Feature coverage
+
+| Feature                                 | `react-langgraph`                | `react-langchain`                   |
+| --------------------------------------- | -------------------------------- | ----------------------------------- |
+| Stream messages                         | ✅ `useLangGraphRuntime`          | ✅ `useStreamRuntime`                |
+| Interrupt state                         | ✅ `useLangGraphInterruptState`   | ✅ `useLangChainInterruptState`      |
+| Send raw state update / resume command  | ✅ `useLangGraphSendCommand`      | ✅ `useLangChainSubmit`              |
+| Read arbitrary custom state key         | ❌                                | ✅ `useLangChainState<T>(key)`       |
+| Per-message metadata (`messages-tuple`) | ✅ `useLangGraphMessageMetadata`  | ❌ not exposed                       |
+| Generative UI messages (LangSmith)      | ✅ `useLangGraphUIMessages`       | ❌ not exposed                       |
+| Subgraph / namespaced stream events     | ✅ via `eventHandlers`            | ❌ not exposed                       |
+| End-to-end cancellation primitive       | ✅ `unstable_createLangGraphStream` | ❌ not exposed                     |
+| Message accumulator utility             | ✅ `LangGraphMessageAccumulator`  | ❌ not exposed                       |
+| Cloud thread persistence                | ✅ `cloud` option                 | ✅ `cloud` option                    |
+
+`react-langchain` is the newer, thinner wrapper — it delegates to the upstream `useStream` hook rather than re-implementing the stream plumbing. That is why its footprint is smaller and its surface area is narrower today. Features that exist in `react-langgraph` but not `react-langchain` are absent because they have not yet been ported, not because they are deprecated.
+
+## Choosing between them
+
+Use `@assistant-ui/react-langgraph` when:
+
+- You are scaffolding via `npx create-assistant-ui -t langgraph`.
+- You want the broader feature set today (subgraph events, UI messages, message metadata, cancellation).
+- You prefer integrating with `@langchain/langgraph-sdk` directly.
+
+Use `@assistant-ui/react-langchain` when:
+
+- Your app already depends on `@langchain/react` and uses `useStream` elsewhere.
+- You want to read custom state keys (`todos`, `files`, plans, ...) with `useLangChainState<T>(key)` without reconstructing them from tool-call streams.
+- You prefer a thin wrapper that stays pinned to upstream behavior.
+
+## Hook name mapping
+
+If you are moving code between the two adapters, most hooks have a counterpart — but note the feature gaps above.
+
+| `react-langgraph`                  | `react-langchain`                   | Notes                                                       |
+| ---------------------------------- | ----------------------------------- | ----------------------------------------------------------- |
+| `useLangGraphRuntime`              | `useStreamRuntime`                  | Options extend upstream `UseStreamOptions`; no `stream` / `create` / `load` to write. |
+| `useLangGraphInterruptState`       | `useLangChainInterruptState`        | Same return shape: `{ value?: unknown } \| undefined`.      |
+| `useLangGraphSendCommand`          | `useLangChainSubmit`                | `submit(values, { command })` replaces the dedicated hook.  |
+| `useLangGraphSend`                 | _(use `runtime.thread.append`)_     | No direct equivalent; send turns through the runtime.       |
+| `useLangGraphMessageMetadata`      | _(not available)_                   | Open an issue if you rely on this.                          |
+| `useLangGraphUIMessages`           | _(not available)_                   | Open an issue if you rely on this.                          |
+| _(none)_                           | `useLangChainState<T>(key)`         | New — reads any custom state key reactively.                |

package/.docs/raw/docs/runtimes/langchain/index.mdx

@@ -0,0 +1,210 @@
+---
+title: Getting Started
+description: Adapter for LangChain's `useStream` hook, exposed as an assistant-ui runtime.
+---
+
+`@assistant-ui/react-langchain` wraps [`useStream`](https://docs.langchain.com/oss/javascript/langgraph-sdk/react-stream) from `@langchain/react` and exposes it as an assistant-ui runtime. Use this package if you are already integrating your app with `@langchain/react` and want assistant-ui on top of the upstream hook.
+
+<Callout type="info">
+  assistant-ui ships two adapters for LangGraph backends:
+  - **[`@assistant-ui/react-langgraph`](/docs/runtimes/langgraph)** integrates with `@langchain/langgraph-sdk` directly and exposes features like subgraph events, UI messages, message metadata, and end-to-end cancellation.
+  - **`@assistant-ui/react-langchain`** (this page) wraps `@langchain/react`'s `useStream`. It is lighter-weight and stays aligned with upstream, but currently does not expose every `react-langgraph` feature.
+
+  See [the comparison doc](/docs/runtimes/langchain/comparison) for a feature gap table.
+</Callout>
+
+## Requirements
+
+You need a LangGraph Cloud API server. You can start a server locally via [LangGraph Studio](https://github.com/langchain-ai/langgraph-studio) or use [LangSmith](https://www.langchain.com/langsmith) for a hosted version.
+
+The state of the graph you are using must have a `messages` key with a list of LangChain-alike messages (or pass a custom `messagesKey`).
+
+## Installation
+
+<Steps>
+  <Step>
+
+### Install dependencies
+
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-langchain", "@langchain/react", "@langchain/langgraph-sdk"]} />
+
+  </Step>
+  <Step>
+
+### Define a `MyAssistant` component
+
+```tsx title="@/components/MyAssistant.tsx"
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useStreamRuntime } from "@assistant-ui/react-langchain";
+
+export function MyAssistant() {
+  const runtime = useStreamRuntime({
+    assistantId: process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
+    apiUrl: process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"],
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+  <Step>
+
+### Use the `MyAssistant` component
+
+```tsx title="@/app/page.tsx"
+import { MyAssistant } from "@/components/MyAssistant";
+
+export default function Home() {
+  return (
+    <main className="h-dvh">
+      <MyAssistant />
+    </main>
+  );
+}
+```
+
+  </Step>
+  <Step>
+
+### Set environment variables
+
+Create a `.env.local` file in your project with the following variables:
+
+```sh
+NEXT_PUBLIC_LANGGRAPH_API_URL=http://localhost:2024
+NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
+```
+
+  </Step>
+  <Step>
+
+### Set up UI components
+
+Follow the [UI Components](/docs/ui/thread) guide to set up the UI components.
+
+  </Step>
+</Steps>
+
+## `useStreamRuntime` options
+
+`useStreamRuntime` accepts every option [`useStream`](https://docs.langchain.com/oss/javascript/langgraph-sdk/react-stream) from `@langchain/react` does, plus three assistant-ui-specific fields:
+
+| Option        | Type                                           | Description                                                              |
+| ------------- | ---------------------------------------------- | ------------------------------------------------------------------------ |
+| `cloud`       | `AssistantCloud`                               | Optional — persists threads via assistant-cloud.                         |
+| `adapters`    | `{ attachments?, speech?, feedback? }`         | Optional — attachment, speech, and feedback adapters.                    |
+| `messagesKey` | `string`                                       | The state key that holds messages. Defaults to `"messages"`.             |
+
+## Reading custom state keys
+
+LangGraph agents often expose structured state beyond messages (plans, todos, scratch files, generative-UI artifacts). Read them directly with `useLangChainState`. It mirrors `useStream().values[key]` upstream and updates when the stream emits new state.
+
+```tsx
+import { useLangChainState } from "@assistant-ui/react-langchain";
+
+type Todo = { id: string; title: string; done: boolean };
+
+function TodoList() {
+  const todos = useLangChainState<Todo[]>("todos", []);
+
+  return (
+    <ul>
+      {todos.map((t) => (
+        <li key={t.id}>
+          {t.done ? "✓" : "○"} {t.title}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+Signatures:
+
+```ts
+useLangChainState<T>(key: string): T | undefined;
+useLangChainState<T>(key: string, defaultValue: T): T;
+```
+
+This hook is especially useful with the [`deepagents`](https://docs.langchain.com/oss/python/deepagents) middleware, whose `write_todos` step updates `state.todos` alongside the tool-call stream. Reading the state key directly avoids reconstructing the list from partial tool-call args.
+
+<Callout type="info">
+  Added in v0.0.2 — see issue [#3862](https://github.com/assistant-ui/assistant-ui/issues/3862) for motivation.
+</Callout>
+
+## Interrupts
+
+LangGraph interrupts pause the graph and wait for client input. `useLangChainInterruptState` exposes the current interrupt; `useLangChainSubmit` resumes the graph with a raw state update.
+
+```tsx
+import {
+  useLangChainInterruptState,
+  useLangChainSubmit,
+} from "@assistant-ui/react-langchain";
+import { Command } from "@langchain/langgraph-sdk";
+
+function InterruptPrompt() {
+  const interrupt = useLangChainInterruptState();
+  const submit = useLangChainSubmit();
+
+  if (!interrupt) return null;
+
+  return (
+    <div>
+      <pre>{JSON.stringify(interrupt.value, null, 2)}</pre>
+      <button
+        onClick={() =>
+          submit(null, { command: new Command({ resume: "approved" }) })
+        }
+      >
+        Approve
+      </button>
+    </div>
+  );
+}
+```
+
+## Message conversion
+
+`convertLangChainBaseMessage` transforms a LangChain `BaseMessage` into an assistant-ui message. Use it when building a custom `ExternalStoreAdapter` that needs to consume LangChain messages outside of `useStreamRuntime`.
+
+```ts
+import { convertLangChainBaseMessage } from "@assistant-ui/react-langchain";
+```
+
+## Cloud persistence
+
+Pass an `AssistantCloud` instance to persist threads across sessions. The runtime automatically wires thread list management and resumes state from the cloud.
+
+```tsx
+import { AssistantCloud } from "assistant-cloud";
+import { useStreamRuntime } from "@assistant-ui/react-langchain";
+
+const cloud = new AssistantCloud({ baseUrl: "/api/cloud" });
+
+const runtime = useStreamRuntime({
+  cloud,
+  assistantId: "agent",
+  apiUrl: "http://localhost:2024",
+});
+```
+
+## Custom `messagesKey`
+
+If your graph stores messages under a non-default key, pass `messagesKey` so the runtime submits tool results and human turns to the correct state slot:
+
+```tsx
+const runtime = useStreamRuntime({
+  assistantId: "agent",
+  apiUrl: "http://localhost:2024",
+  messagesKey: "chat_messages",
+});
+```

package/.docs/raw/docs/runtimes/langgraph/index.mdx

@@ -3,6 +3,10 @@ title: Getting Started
 description: Connect to LangGraph Cloud API for agent workflows with streaming.
 ---
 
+<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. `@assistant-ui/react-langgraph` (this page) integrates with `@langchain/langgraph-sdk` directly and has the broader feature set — subgraph events, UI messages, message metadata, end-to-end cancellation. See the [comparison](/docs/runtimes/langchain/comparison).
+</Callout>
+
 ## Requirements
 
 You need a LangGraph Cloud API server. You can start a server locally via [LangGraph Studio](https://github.com/langchain-ai/langgraph-studio) or use [LangSmith](https://www.langchain.com/langsmith) for a hosted version.
@@ -60,6 +64,8 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
 ```tsx twoslash title="@/app/api/[...path]/route.ts"
 import { NextRequest, NextResponse } from "next/server";
 
+export const runtime = "edge";
+
 function getCorsHeaders() {
   return {
     "Access-Control-Allow-Origin": "*",
@@ -84,6 +90,7 @@ async function handleRequest(req: NextRequest, method: string) {
       headers: {
         "x-api-key": process.env["LANGCHAIN_API_KEY"] || "",
       },
+      signal: req.signal,
     };
 
     if (["POST", "PUT", "PATCH"].includes(method)) {
@@ -142,48 +149,15 @@ export const OPTIONS = () =>
 // @filename: /lib/chatApi.ts
 
 // ---cut---
-import { Client, type ThreadState } from "@langchain/langgraph-sdk";
-import { LangChainMessage, LangGraphCommand } from "@assistant-ui/react-langgraph";
-
-const createClient = () => {
-  const apiUrl = process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] || "/api";
-  return new Client({
-    apiUrl,
-  });
-};
-
-export const createThread = async () => {
-  const client = createClient();
-  return client.threads.create();
-};
-
-export const getThreadState = async (
-  threadId: string,
-): Promise<ThreadState<{ messages: LangChainMessage[] }>> => {
-  const client = createClient();
-  return client.threads.getState(threadId);
-};
-
-export const sendMessage = async (params: {
-  threadId: string;
-  messages?: LangChainMessage[];
-  command?: LangGraphCommand;
-}) => {
-  const client = createClient();
-  return client.runs.stream(
-    params.threadId,
-    process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!,
-    {
-      input: params.messages?.length
-        ? { messages: params.messages }
-        : null,
-      command: params.command,
-      // Include "custom" if you use LangSmith Generative UI
-      // (`push_ui_message` / `typedUi().push()`). See the Generative UI
-      // section below for details.
-      streamMode: ["messages", "updates", "custom"],
-    },
-  );
+import { Client } from "@langchain/langgraph-sdk";
+
+export const createClient = () => {
+  const apiUrl =
+    process.env["NEXT_PUBLIC_LANGGRAPH_API_URL"] ||
+    (typeof window !== "undefined"
+      ? new URL("/api", window.location.href).href
+      : "/api");
+  return new Client({ apiUrl });
 };
 ```
 
@@ -199,32 +173,41 @@ export const sendMessage = async (params: {
 // ---cut---
 "use client";
 
+import { useMemo } from "react";
 import { Thread } from "@/components/assistant-ui/thread";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
+import {
+  unstable_createLangGraphStream,
+  useLangGraphRuntime,
+  type LangChainMessage,
+} from "@assistant-ui/react-langgraph";
 
-import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
+import { createClient } from "@/lib/chatApi";
 
-export function MyAssistant() {
-  const runtime = useLangGraphRuntime({
-    stream: async function* (messages, { initialize, command }) {
-      const { externalId } = await initialize();
-      if (!externalId) throw new Error("Thread not found");
+const ASSISTANT_ID = process.env["NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID"]!;
 
-      const generator = await sendMessage({
-        threadId: externalId,
-        messages,
-        command,
-      });
+export function MyAssistant() {
+  const client = useMemo(() => createClient(), []);
+  const stream = useMemo(
+    () =>
+      unstable_createLangGraphStream({
+        client,
+        assistantId: ASSISTANT_ID,
+      }),
+    [client],
+  );
 
-      yield* generator;
-    },
+  const runtime = useLangGraphRuntime({
+    unstable_allowCancellation: true,
+    stream,
     create: async () => {
-      const { thread_id } = await createThread();
+      const { thread_id } = await client.threads.create();
       return { externalId: thread_id };
     },
     load: async (externalId) => {
-      const state = await getThreadState(externalId);
+      const state = await client.threads.getState<{
+        messages: LangChainMessage[];
+      }>(externalId);
       return {
         messages: state.values.messages,
         interrupts: state.tasks[0]?.interrupts,
@@ -323,18 +306,38 @@ const runtime = useLangGraphRuntime({
   stream: async (messages, { initialize, ...config }) => { /* ... */ },
   eventHandlers: {
     onMessageChunk: (chunk, metadata) => {
-      // Fired for each chunk in messages-tuple mode
-      // metadata contains langgraph_step, langgraph_node, ls_model_name, etc.
+      // Fired for each chunk in messages-tuple mode.
+      // `metadata` contains langgraph_step, langgraph_node, ls_model_name, etc.
+      // For pipe-namespaced events emitted by subgraphs (e.g. `messages|tools:call_abc`),
+      // `metadata.namespace` holds the suffix ("tools:call_abc"). Use it to attribute
+      // a chunk to a specific subgraph.
     },
     onValues: (values) => {
-      // Fired when a "values" event is received
+      // Fired when a top-level `values` event is received.
+      // Subgraph `values` events are routed to `onSubgraphValues` instead.
     },
     onUpdates: (updates) => {
-      // Fired when an "updates" event is received
+      // Fired when a top-level `updates` event is received.
+      // Subgraph `updates` events are routed to `onSubgraphUpdates` instead.
+    },
+    onSubgraphValues: (namespace, values) => {
+      // Fired when a subgraph `values|<namespace>` event is received
+      // (e.g. `namespace === "tools:call_abc"`). Use this to observe
+      // subgraph-internal state without mixing it into `onValues`.
+    },
+    onSubgraphUpdates: (namespace, updates) => {
+      // Fired when a subgraph `updates|<namespace>` event is received.
     },
     onMetadata: (metadata) => { /* thread metadata */ },
     onInfo: (info) => { /* informational messages */ },
-    onError: (error) => { /* stream errors */ },
+    onError: (error) => {
+      // Fired for both top-level and subgraph errors.
+    },
+    onSubgraphError: (namespace, error) => {
+      // Additionally fired for subgraph errors with the namespace.
+      // Use to attribute a subgraph failure to its source without marking
+      // the parent message as incomplete (that only happens for top-level errors).
+    },
     onCustomEvent: (type, data) => { /* custom events */ },
   },
 });
@@ -399,6 +402,51 @@ const runtime = useLangGraphRuntime({
 
 See the [Cloud Persistence guide](/docs/cloud/langgraph) for detailed setup instructions.
 
+### Custom Thread List
+
+To surface pre-existing LangGraph `thread_id`s in the thread picker without running assistant-cloud, pass a `RemoteThreadListAdapter` via `unstable_threadListAdapter`. A common implementation backs `list()` with `client.threads.search()` and `initialize()` with `client.threads.create()`.
+
+```typescript
+import type { RemoteThreadListAdapter } from "@assistant-ui/react";
+import { Client } from "@langchain/langgraph-sdk";
+
+const client = new Client({ apiUrl: process.env.NEXT_PUBLIC_LANGGRAPH_API_URL });
+
+const threadListAdapter: RemoteThreadListAdapter = {
+  async list() {
+    const threads = await client.threads.search({ limit: 50 });
+    return {
+      threads: threads.map((t) => ({
+        status: "regular",
+        remoteId: t.thread_id,
+        externalId: t.thread_id,
+        title: (t.metadata as { title?: string } | undefined)?.title,
+      })),
+    };
+  },
+  async initialize() {
+    const t = await client.threads.create();
+    return { remoteId: t.thread_id, externalId: t.thread_id };
+  },
+  async delete(remoteId) {
+    await client.threads.delete(remoteId);
+  },
+  // rename, archive, unarchive, fetch, generateTitle — see link below
+};
+
+const runtime = useLangGraphRuntime({
+  stream: async function* (messages, { initialize }) { /* ... */ },
+  load: async (externalId) => { /* ... */ },
+  unstable_threadListAdapter: threadListAdapter,
+});
+```
+
+Setting `remoteId === externalId` keeps the ids assistant-ui stores aligned with the LangGraph thread ids your `load` and `stream` callbacks receive. See the [Custom Thread List guide](/docs/runtimes/custom/custom-thread-list) for the full adapter contract.
+
+<Callout type="info">
+  When `unstable_threadListAdapter` is provided, the `cloud`, `create`, and `delete` options are ignored — the adapter owns the full thread-list lifecycle.
+</Callout>
+
 ## Message Editing & Regeneration
 
 LangGraph uses server-side checkpoints for state management. To support message editing (branching) and regeneration, you need to provide a `getCheckpointId` callback that resolves the appropriate checkpoint for server-side forking.
@@ -565,6 +613,50 @@ Mount the component once somewhere inside the `AssistantRuntimeProvider` tree. I
 
 When a matching UI message arrives, the adapter appends a `{ type: "data", name: "chart", data: { series, title } }` part to the parent assistant message and the registered component renders inline.
 
+### Register renderers via `uiComponents`
+
+Instead of mounting separate `makeAssistantDataUI` components, you can register renderers directly on the runtime hook via the `uiComponents` option:
+
+```tsx title="@/components/MyAssistant.tsx"
+const runtime = useLangGraphRuntime({
+  stream: async function* (messages, { initialize }) { /* ... */ },
+  uiComponents: {
+    renderers: {
+      chart: ({ data }) => <Chart series={data.series} title={data.title} />,
+      table: ({ data }) => <DataTable rows={data.rows} />,
+    },
+  },
+});
+```
+
+Static `renderers` are matched by `ui_message` name. If no match is found, the part renders nothing unless a `fallback` is provided.
+
+### Dynamic loading with `fallback`
+
+LangSmith's [Generative UI](https://docs.langchain.com/langsmith/generative-ui-react) supports colocating UI code with your graph and loading it at runtime via `LoadExternalComponent`. The `fallback` option handles any `ui_message` name that has no static renderer:
+
+```tsx title="@/components/MyAssistant.tsx"
+import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
+
+const runtime = useLangGraphRuntime({
+  stream: async function* (messages, { initialize }) { /* ... */ },
+  uiComponents: {
+    fallback: ({ name, data }) => (
+      <LoadExternalComponent name={name} props={data} />
+    ),
+    renderers: {
+      chart: ({ data }) => <Chart {...data} />,
+    },
+  },
+});
+```
+
+With this setup:
+- A `ui_message` with `name: "chart"` renders the static `Chart` component
+- Any other name (e.g. `"dashboard"`, `"form"`) is handled by `fallback`, which fetches the component from LangSmith at runtime
+
+The `fallback` component receives the same props as any data renderer: `name`, `data`, and part state metadata. This lets you pass the component name and props straight through to `LoadExternalComponent`.
+
 ### Semantics
 
 The adapter mirrors the reducer in `@langchain/langgraph-sdk/react-ui` exactly:

package/.docs/raw/docs/runtimes/pick-a-runtime.mdx

@@ -11,7 +11,8 @@ Choosing the right runtime is crucial for your assistant-ui implementation. This
 graph TD
     A[What's your starting point?] --> B{Existing Framework?}
     B -->|Vercel AI SDK| C[Use AI SDK Integration]
-    B -->|LangGraph| D[Use LangGraph Runtime]
+    B -->|LangGraph via langgraph-sdk| D1[Use react-langgraph]
+    B -->|LangChain via @langchain/react useStream| D2[Use react-langchain]
     B -->|LangServe| E[Use LangServe Runtime]
     B -->|Mastra| F[Use Mastra Runtime]
     B -->|AG-UI Protocol| J[Use AG-UI Runtime]
@@ -55,9 +56,14 @@ For popular frameworks, we provide ready-to-use integrations built on top of our
   />
   <Card
     title="LangGraph"
-    description="For complex agent workflows with LangChain's graph framework"
+    description="Integrates with `@langchain/langgraph-sdk` directly. Broader feature set: subgraph events, UI messages, message metadata, cancellation."
     href="/docs/runtimes/langgraph"
   />
+  <Card
+    title="LangChain useStream"
+    description="Wraps `useStream` from `@langchain/react`. Lighter-weight, stays aligned with upstream. Fewer features today."
+    href="/docs/runtimes/langchain"
+  />
   <Card
     title="LangServe"
     description="For LangChain applications deployed with LangServe"
@@ -87,13 +93,14 @@ For popular frameworks, we provide ready-to-use integrations built on top of our
 The pre-built integrations (AI SDK, LangGraph, etc.) are **not separate runtime types**. They're convenient wrappers built on top of our core runtimes:
 
 - **AI SDK Integration** → Built on `LocalRuntime` with streaming adapter
-- **LangGraph Runtime** → Built on `LocalRuntime` with graph execution adapter
+- **LangGraph Runtime** → Built on `ExternalStoreRuntime`, integrates with `@langchain/langgraph-sdk`
+- **LangChain useStream Runtime** → Built on `ExternalStoreRuntime`, wraps `useStream` from `@langchain/react`
 - **LangServe Runtime** → Built on `LocalRuntime` with LangServe client adapter
 - **Mastra Runtime** → Built on `LocalRuntime` with workflow adapter
 - **AG-UI Runtime** → Built on `LocalRuntime` with AG-UI protocol adapter
 - **A2A Runtime** → Built on `LocalRuntime` with Agent-to-Agent protocol adapter
 
-This means you get all the benefits of `LocalRuntime` (automatic state management, built-in features) with zero configuration for your specific framework.
+This means pre-built integrations give you assistant-ui's features — state management, streaming, UI primitives — with zero configuration for your specific framework, regardless of whether the adapter happens to build on `LocalRuntime` or `ExternalStoreRuntime` internally. The list above tells you which core runtime each adapter uses.
 
 ### When to Use Pre-Built vs Core Runtimes
 
@@ -228,6 +235,7 @@ Explore our implementation examples:
    - [`LocalRuntime` Guide](/docs/runtimes/custom/local)
    - [`ExternalStoreRuntime` Guide](/docs/runtimes/custom/external-store)
    - [LangGraph Integration](/docs/runtimes/langgraph)
+   - [LangChain useStream Integration](/docs/runtimes/langchain)
 3. **Start with an example** from our [examples repository](https://github.com/assistant-ui/assistant-ui/tree/main/examples)
 4. **Add features progressively** using adapters
 5. **Consider Assistant Cloud** for production persistence