@langchain/react 0.1.3 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @langchain/react
 
-React SDK for building AI-powered applications with [LangChain](https://js.langchain.com/) and [LangGraph](https://langchain-ai.github.io/langgraphjs/). Provides a `useStream` hook that manages streaming, state, branching, and interrupts out of the box.
+React SDK for building AI-powered applications with [Deep Agents](https://docs.langchain.com/oss/javascript/deepagents/overview), [LangChain](https://docs.langchain.com/oss/javascript/langchain/overview) and [LangGraph](https://docs.langchain.com/oss/javascript/langgraph/overview). It provides a `useStream` hook that manages streaming, state, branching, and interrupts out of the box.
 
 ## Installation
 
@@ -8,7 +8,7 @@ React SDK for building AI-powered applications with [LangChain](https://js.langc
 npm install @langchain/react @langchain/core
 ```
 
-**Peer dependencies:** `react` (^18 || ^19), `react-dom` (^18 || ^19), `@langchain/core` (^1.0.1)
+**Peer dependencies:** `react` (^18 || ^19), `@langchain/core` (^1.1.27)
 
 ## Quick Start
 
@@ -80,6 +80,159 @@ function Chat() {
 | `queue.cancel(id)` | `(id: string) => Promise<boolean>` | Cancel a pending run on the server by its run ID. |
 | `queue.clear()` | `() => Promise<void>` | Cancel all pending runs on the server. |
 
+## `useSuspenseStream`
+
+`useSuspenseStream` is a companion hook to `useStream` that integrates with React's [Suspense](https://react.dev/reference/react/Suspense) and [Error Boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) protocols. Instead of handling loading and error states inside your component, you declare them in parent boundaries:
+
+```tsx
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { useSuspenseStream } from "@langchain/react";
+
+function App() {
+  return (
+    <ErrorBoundary
+      fallback={({ error, resetErrorBoundary }) => (
+        <div>
+          <p>{error.message}</p>
+          <button onClick={resetErrorBoundary}>Retry</button>
+        </div>
+      )}
+    >
+      <Suspense fallback={<Spinner />}>
+        <Chat />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+function Chat() {
+  // No isLoading/error checks needed — Suspense and ErrorBoundary handle them.
+  const { messages, submit, isStreaming } = useSuspenseStream({
+    assistantId: "agent",
+    apiUrl: "http://localhost:2024",
+  });
+
+  return (
+    <div>
+      {messages.map((msg, i) => (
+        <div key={msg.id ?? i}>{msg.content}</div>
+      ))}
+      {isStreaming && <TypingIndicator />}
+
+      <button
+        onClick={() =>
+          void submit({
+            messages: [{ type: "human", content: "Hello!" }],
+          })
+        }
+      >
+        Send
+      </button>
+    </div>
+  );
+}
+```
+
+### How it works
+
+- **Suspends** while the initial thread history is loading (e.g. when a `threadId` is provided and the thread data is being fetched). The nearest `<Suspense>` boundary renders its fallback during this time.
+- **Throws errors** to the nearest Error Boundary when the stream encounters an error outside of active streaming.
+- **Does not suspend during streaming.** Streaming is incremental — messages arrive progressively and the UI must update in real time. The `isStreaming` flag indicates whether tokens are currently arriving.
+
+### Options
+
+`useSuspenseStream` accepts the same options as `useStream` (LangGraph Platform mode), plus:
+
+| Option | Type | Description |
+|---|---|---|
+| `suspenseCache` | `SuspenseCache` | Optional cache instance for Suspense history prefetching. Useful in tests to avoid cross-test cache sharing. |
+
+### Return Values
+
+The return type is identical to `useStream` except:
+
+| Removed | Reason |
+|---|---|
+| `isLoading` | Replaced by `isStreaming`; initial loading is handled by Suspense. |
+| `error` | Thrown to the nearest Error Boundary instead. |
+| `isThreadLoading` | Handled by Suspense (the component suspends until the thread is ready). |
+
+| Added | Type | Description |
+|---|---|---|
+| `isStreaming` | `boolean` | `true` while the stream is receiving data. The component is never suspended during streaming. |
+
+All other properties (`messages`, `submit`, `stop`, `interrupt`, `branch`, `switchThread`, `queue`, etc.) are unchanged.
+
+### Thread-switching with Suspense
+
+`useSuspenseStream` works naturally with thread switching. When the `threadId` changes, the component suspends while the new thread's history loads, and `<Suspense>` shows a smooth skeleton/fallback transition:
+
+```tsx
+function App() {
+  const [threadId, setThreadId] = useState<string | null>(null);
+
+  return (
+    <div className="flex">
+      <ThreadSidebar onSelect={setThreadId} />
+
+      <Suspense fallback={<ThreadSkeleton />}>
+        <ChatPanel threadId={threadId} />
+      </Suspense>
+    </div>
+  );
+}
+
+function ChatPanel({ threadId }: { threadId: string | null }) {
+  const { messages, submit, isStreaming } = useSuspenseStream({
+    assistantId: "agent",
+    apiUrl: "http://localhost:2024",
+    threadId,
+  });
+
+  return <MessageList messages={messages} />;
+}
+```
+
+### Error recovery
+
+When an error is thrown to an Error Boundary, call `invalidateSuspenseCache()` in the boundary's reset handler so the retry triggers a fresh data fetch:
+
+```tsx
+import { invalidateSuspenseCache } from "@langchain/react";
+
+<ErrorBoundary
+  onReset={() => invalidateSuspenseCache()}
+  fallbackRender={({ error, resetErrorBoundary }) => (
+    <div>
+      <p>{error.message}</p>
+      <button onClick={resetErrorBoundary}>Retry</button>
+    </div>
+  )}
+>
+  <Suspense fallback={<Spinner />}>
+    <Chat />
+  </Suspense>
+</ErrorBoundary>
+```
+
+For test isolation, you can create and pass a dedicated cache instance:
+
+```tsx
+import { createSuspenseCache, useSuspenseStream } from "@langchain/react";
+
+const suspenseCache = createSuspenseCache();
+
+function Chat() {
+  const stream = useSuspenseStream({
+    assistantId: "agent",
+    apiUrl: "http://localhost:2024",
+    suspenseCache,
+  });
+  // ...
+}
+```
+
 ## Type Safety
 
 ### With `createAgent`
@@ -327,31 +480,110 @@ function Chat() {
 }
 ```
 
-The custom transport interface returns the same properties as the standard `useStream` hook, including `getMessagesMetadata`, `branch`, `setBranch`, `switchThread`, and all message/interrupt/subagent helpers. When using a custom transport, `getMessagesMetadata` returns stream metadata sent alongside messages during streaming; `branch` and `setBranch` provide local branch state management.
+The custom transport interface returns the same properties as the standard `useStream` hook, including `getMessagesMetadata`, `branch`, `setBranch`, `switchThread`, and all message/interrupt/subagent helpers. When using a custom transport, `getMessagesMetadata` returns stream metadata sent alongside messages during streaming; `branch` and `setBranch` provide local branch state management. `onFinish` is also supported and receives a synthetic `ThreadState` built from the final locally streamed values; the run metadata argument is `undefined`.
 
-## React UI (Advanced)
+## Sharing State with `StreamProvider`
 
-The `@langchain/react/react-ui` sub-package provides utilities for rendering server-defined UI components:
+When multiple components in a tree need access to the same stream (a message list, a header with loading status, an input bar), use `StreamProvider` and `useStreamContext` to avoid prop drilling:
 
 ```tsx
-import { useStreamContext, LoadExternalComponent } from "@langchain/react/react-ui";
-import { uiMessageReducer } from "@langchain/react/react-ui";
-import type { UIMessage } from "@langchain/react/react-ui";
+import { StreamProvider, useStreamContext } from "@langchain/react";
+
+function App() {
+  return (
+    <StreamProvider assistantId="agent" apiUrl="http://localhost:2024">
+      <ChatHeader />
+      <MessageList />
+      <MessageInput />
+    </StreamProvider>
+  );
+}
+
+function ChatHeader() {
+  const { isLoading, error } = useStreamContext();
+  return (
+    <header>
+      <h1>Chat</h1>
+      {isLoading && <span>Thinking...</span>}
+      {error != null && <span>Error occurred</span>}
+    </header>
+  );
+}
+
+function MessageList() {
+  const { messages, getMessagesMetadata } = useStreamContext();
+  return (
+    <div>
+      {messages.map((msg, i) => (
+        <div key={msg.id ?? i}>{msg.content}</div>
+      ))}
+    </div>
+  );
+}
+
+function MessageInput() {
+  const { submit, isLoading } = useStreamContext();
+  return (
+    <button
+      disabled={isLoading}
+      onClick={() =>
+        void submit({
+          messages: [{ type: "human", content: "Hello!" }],
+        })
+      }
+    >
+      Send
+    </button>
+  );
+}
+```
+
+### Type Safety with `StreamProvider`
+
+Pass agent or state types to both `StreamProvider` and `useStreamContext`:
+
+```tsx
+import type { agent } from "./agent";
+
+function App() {
+  return (
+    <StreamProvider<typeof agent>
+      assistantId="agent"
+      apiUrl="http://localhost:2024"
+    >
+      <Chat />
+    </StreamProvider>
+  );
+}
+
+function Chat() {
+  const { toolCalls } = useStreamContext<typeof agent>();
+  // toolCalls are fully typed from the agent's tools
+}
 ```
 
-- **`useStreamContext`** - Access the stream context from deeply nested components
-- **`LoadExternalComponent`** - Render UI components defined by the server
-- **`uiMessageReducer`** - Reducer for managing UI message state
+### Multiple Agents
 
-A server-side helper is also available:
+Nest providers for multi-agent scenarios — each subtree gets its own isolated stream:
 
 ```tsx
-import { typedUi } from "@langchain/react/react-ui/server";
+function MultiAgentApp() {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
+      <StreamProvider assistantId="researcher" apiUrl="http://localhost:2024">
+        <ResearchPanel />
+      </StreamProvider>
+      <StreamProvider assistantId="writer" apiUrl="http://localhost:2024">
+        <WriterPanel />
+      </StreamProvider>
+    </div>
+  );
+}
 ```
 
 ## Playground
 
-For complete end-to-end examples with full agentic UIs, visit the [LangGraph Playground](https://github.com/langchain-ai/langgraphjs).
+For complete end-to-end examples with full agentic UIs, visit the [LangChain UI Playground](https://docs.langchain.com/playground).
 
 ## License
 

package/dist/context.cjs

@@ -0,0 +1,108 @@
+"use client";
+const require_stream = require("./stream.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/context.tsx
+const StreamContext = (0, react.createContext)(null);
+/**
+* Provides a shared `useStream` instance to all descendants via React Context.
+*
+* Use `StreamProvider` when multiple components in a subtree need access to the
+* same stream state (messages, loading status, errors, interrupts, etc.) without
+* prop drilling.
+*
+* @example
+* ```tsx
+* import { StreamProvider, useStreamContext } from "@langchain/react";
+*
+* function App() {
+*   return (
+*     <StreamProvider assistantId="agent" apiUrl="http://localhost:2024">
+*       <ChatHeader />
+*       <MessageList />
+*       <MessageInput />
+*     </StreamProvider>
+*   );
+* }
+*
+* function ChatHeader() {
+*   const { isLoading, error } = useStreamContext();
+*   return (
+*     <header>
+*       {isLoading && <span>Thinking...</span>}
+*       {error && <span>Error</span>}
+*     </header>
+*   );
+* }
+*
+* function MessageList() {
+*   const { messages } = useStreamContext();
+*   return messages.map((msg, i) => <div key={msg.id ?? i}>{msg.content}</div>);
+* }
+*
+* function MessageInput() {
+*   const { submit } = useStreamContext();
+*   return (
+*     <button onClick={() => submit({ messages: [{ type: "human", content: "Hi" }] })}>
+*       Send
+*     </button>
+*   );
+* }
+* ```
+*
+* Multiple providers can be nested for multi-agent scenarios:
+*
+* @example
+* ```tsx
+* <StreamProvider assistantId="researcher" apiUrl="http://localhost:2024">
+*   <ResearchPanel />
+* </StreamProvider>
+* <StreamProvider assistantId="writer" apiUrl="http://localhost:2024">
+*   <WriterPanel />
+* </StreamProvider>
+* ```
+*/
+function StreamProvider(props) {
+	const { children, ...options } = props;
+	const stream = require_stream.useStream(options);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StreamContext.Provider, {
+		value: stream,
+		children
+	});
+}
+/**
+* Accesses the shared stream instance from the nearest `StreamProvider`.
+*
+* Throws if called outside of a `StreamProvider`.
+*
+* @example
+* ```tsx
+* function MessageList() {
+*   const { messages, getMessagesMetadata } = useStreamContext();
+*   return messages.map((msg, i) => {
+*     const metadata = getMessagesMetadata(msg, i);
+*     return <div key={msg.id ?? i}>{msg.content}</div>;
+*   });
+* }
+* ```
+*
+* @example With type parameters for full type safety:
+* ```tsx
+* import type { agent } from "./agent";
+*
+* function Chat() {
+*   const { toolCalls } = useStreamContext<typeof agent>();
+*   // toolCalls are fully typed from the agent's tools
+* }
+* ```
+*/
+function useStreamContext() {
+	const context = (0, react.useContext)(StreamContext);
+	if (context === null) throw new Error("useStreamContext must be used within a <StreamProvider>. Wrap your component tree with <StreamProvider> or use useStream() directly.");
+	return context;
+}
+//#endregion
+exports.StreamProvider = StreamProvider;
+exports.useStreamContext = useStreamContext;
+
+//# sourceMappingURL=context.cjs.map

package/dist/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.cjs","names":["useStream"],"sources":["../src/context.tsx"],"sourcesContent":["/* __LC_ALLOW_ENTRYPOINT_SIDE_EFFECTS__ */\n\n\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { BagTemplate } from \"@langchain/langgraph-sdk\";\nimport type {\n  ResolveStreamOptions,\n  InferBag,\n  InferStateType,\n  UseStreamCustomOptions,\n} from \"@langchain/langgraph-sdk/ui\";\nimport { useStream } from \"./stream.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst StreamContext = createContext<any | null>(null);\n\n/**\n * Props for the StreamProvider component.\n * Accepts all `useStream` options plus `children`.\n */\nexport type StreamProviderProps<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n> = ResolveStreamOptions<T, InferBag<T, Bag>> & { children: ReactNode };\n\n/**\n * Props for the StreamProvider component when using a custom transport.\n * Accepts all `useStream` custom options plus `children`.\n */\nexport type StreamProviderCustomProps<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n> = UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>> & {\n  children: ReactNode;\n};\n\n/**\n * Provides a shared `useStream` instance to all descendants via React Context.\n *\n * Use `StreamProvider` when multiple components in a subtree need access to the\n * same stream state (messages, loading status, errors, interrupts, etc.) without\n * prop drilling.\n *\n * @example\n * ```tsx\n * import { StreamProvider, useStreamContext } from \"@langchain/react\";\n *\n * function App() {\n *   return (\n *     <StreamProvider assistantId=\"agent\" apiUrl=\"http://localhost:2024\">\n *       <ChatHeader />\n *       <MessageList />\n *       <MessageInput />\n *     </StreamProvider>\n *   );\n * }\n *\n * function ChatHeader() {\n *   const { isLoading, error } = useStreamContext();\n *   return (\n *     <header>\n *       {isLoading && <span>Thinking...</span>}\n *       {error && <span>Error</span>}\n *     </header>\n *   );\n * }\n *\n * function MessageList() {\n *   const { messages } = useStreamContext();\n *   return messages.map((msg, i) => <div key={msg.id ?? i}>{msg.content}</div>);\n * }\n *\n * function MessageInput() {\n *   const { submit } = useStreamContext();\n *   return (\n *     <button onClick={() => submit({ messages: [{ type: \"human\", content: \"Hi\" }] })}>\n *       Send\n *     </button>\n *   );\n * }\n * ```\n *\n * Multiple providers can be nested for multi-agent scenarios:\n *\n * @example\n * ```tsx\n * <StreamProvider assistantId=\"researcher\" apiUrl=\"http://localhost:2024\">\n *   <ResearchPanel />\n * </StreamProvider>\n * <StreamProvider assistantId=\"writer\" apiUrl=\"http://localhost:2024\">\n *   <WriterPanel />\n * </StreamProvider>\n * ```\n */\nexport function StreamProvider<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n>(\n  props: StreamProviderProps<T, Bag> | StreamProviderCustomProps<T, Bag>,\n): ReactNode {\n  const { children, ...options } = props;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const stream = useStream<T, Bag>(options as any);\n\n  return (\n    <StreamContext.Provider value={stream}>{children}</StreamContext.Provider>\n  );\n}\n\n/**\n * Accesses the shared stream instance from the nearest `StreamProvider`.\n *\n * Throws if called outside of a `StreamProvider`.\n *\n * @example\n * ```tsx\n * function MessageList() {\n *   const { messages, getMessagesMetadata } = useStreamContext();\n *   return messages.map((msg, i) => {\n *     const metadata = getMessagesMetadata(msg, i);\n *     return <div key={msg.id ?? i}>{msg.content}</div>;\n *   });\n * }\n * ```\n *\n * @example With type parameters for full type safety:\n * ```tsx\n * import type { agent } from \"./agent\";\n *\n * function Chat() {\n *   const { toolCalls } = useStreamContext<typeof agent>();\n *   // toolCalls are fully typed from the agent's tools\n * }\n * ```\n */\nexport function useStreamContext<\n  T = Record<string, unknown>,\n  Bag extends BagTemplate = BagTemplate,\n>(): ReturnType<typeof useStream<T, Bag>> {\n  const context = useContext(StreamContext);\n  if (context === null) {\n    throw new Error(\n      \"useStreamContext must be used within a <StreamProvider>. \" +\n        \"Wrap your component tree with <StreamProvider> or use useStream() directly.\",\n    );\n  }\n  return context;\n}\n"],"mappings":";;;;;AAeA,MAAM,iBAAA,GAAA,MAAA,eAA0C,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFrD,SAAgB,eAId,OACW;CACX,MAAM,EAAE,UAAU,GAAG,YAAY;CAEjC,MAAM,SAASA,eAAAA,UAAkB,QAAe;AAEhD,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAc,UAAf;EAAwB,OAAO;EAAS;EAAkC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8B9E,SAAgB,mBAG0B;CACxC,MAAM,WAAA,GAAA,MAAA,YAAqB,cAAc;AACzC,KAAI,YAAY,KACd,OAAM,IAAI,MACR,uIAED;AAEH,QAAO"}

package/dist/context.d.cts

@@ -0,0 +1,109 @@
+import { useStream } from "./stream.cjs";
+import { BagTemplate } from "@langchain/langgraph-sdk";
+import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
+import { ReactNode } from "react";
+
+//#region src/context.d.ts
+/**
+ * Props for the StreamProvider component.
+ * Accepts all `useStream` options plus `children`.
+ */
+type StreamProviderProps<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate> = ResolveStreamOptions<T, InferBag<T, Bag>> & {
+  children: ReactNode;
+};
+/**
+ * Props for the StreamProvider component when using a custom transport.
+ * Accepts all `useStream` custom options plus `children`.
+ */
+type StreamProviderCustomProps<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate> = UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>> & {
+  children: ReactNode;
+};
+/**
+ * Provides a shared `useStream` instance to all descendants via React Context.
+ *
+ * Use `StreamProvider` when multiple components in a subtree need access to the
+ * same stream state (messages, loading status, errors, interrupts, etc.) without
+ * prop drilling.
+ *
+ * @example
+ * ```tsx
+ * import { StreamProvider, useStreamContext } from "@langchain/react";
+ *
+ * function App() {
+ *   return (
+ *     <StreamProvider assistantId="agent" apiUrl="http://localhost:2024">
+ *       <ChatHeader />
+ *       <MessageList />
+ *       <MessageInput />
+ *     </StreamProvider>
+ *   );
+ * }
+ *
+ * function ChatHeader() {
+ *   const { isLoading, error } = useStreamContext();
+ *   return (
+ *     <header>
+ *       {isLoading && <span>Thinking...</span>}
+ *       {error && <span>Error</span>}
+ *     </header>
+ *   );
+ * }
+ *
+ * function MessageList() {
+ *   const { messages } = useStreamContext();
+ *   return messages.map((msg, i) => <div key={msg.id ?? i}>{msg.content}</div>);
+ * }
+ *
+ * function MessageInput() {
+ *   const { submit } = useStreamContext();
+ *   return (
+ *     <button onClick={() => submit({ messages: [{ type: "human", content: "Hi" }] })}>
+ *       Send
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * Multiple providers can be nested for multi-agent scenarios:
+ *
+ * @example
+ * ```tsx
+ * <StreamProvider assistantId="researcher" apiUrl="http://localhost:2024">
+ *   <ResearchPanel />
+ * </StreamProvider>
+ * <StreamProvider assistantId="writer" apiUrl="http://localhost:2024">
+ *   <WriterPanel />
+ * </StreamProvider>
+ * ```
+ */
+declare function StreamProvider<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(props: StreamProviderProps<T, Bag> | StreamProviderCustomProps<T, Bag>): ReactNode;
+/**
+ * Accesses the shared stream instance from the nearest `StreamProvider`.
+ *
+ * Throws if called outside of a `StreamProvider`.
+ *
+ * @example
+ * ```tsx
+ * function MessageList() {
+ *   const { messages, getMessagesMetadata } = useStreamContext();
+ *   return messages.map((msg, i) => {
+ *     const metadata = getMessagesMetadata(msg, i);
+ *     return <div key={msg.id ?? i}>{msg.content}</div>;
+ *   });
+ * }
+ * ```
+ *
+ * @example With type parameters for full type safety:
+ * ```tsx
+ * import type { agent } from "./agent";
+ *
+ * function Chat() {
+ *   const { toolCalls } = useStreamContext<typeof agent>();
+ *   // toolCalls are fully typed from the agent's tools
+ * }
+ * ```
+ */
+declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
+//#endregion
+export { StreamProvider, StreamProviderCustomProps, StreamProviderProps, useStreamContext };
+//# sourceMappingURL=context.d.cts.map

package/dist/context.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.cts","names":[],"sources":["../src/context.tsx"],"mappings":";;;;;;;;AAqBA;;KAAY,mBAAA,KACN,MAAA,+BACQ,WAAA,GAAc,WAAA,IACxB,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA;EAAU,QAAA,EAAU,SAAA;AAAA;;;;;KAMhD,yBAAA,KACN,MAAA,+BACQ,WAAA,GAAc,WAAA,IACxB,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA;EACxD,QAAA,EAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;AAJZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;iBAAgB,cAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,KAAA,EAAO,mBAAA,CAAoB,CAAA,EAAG,GAAA,IAAO,yBAAA,CAA0B,CAAA,EAAG,GAAA,IACjE,SAAA;;;;;;;;;;;;;;;;;;AAoCH;;;;;;;;;iBAAgB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}

package/dist/context.d.ts

@@ -0,0 +1,109 @@
+import { useStream } from "./stream.js";
+import { ReactNode } from "react";
+import { InferBag, InferStateType, ResolveStreamOptions, UseStreamCustomOptions } from "@langchain/langgraph-sdk/ui";
+import { BagTemplate } from "@langchain/langgraph-sdk";
+
+//#region src/context.d.ts
+/**
+ * Props for the StreamProvider component.
+ * Accepts all `useStream` options plus `children`.
+ */
+type StreamProviderProps<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate> = ResolveStreamOptions<T, InferBag<T, Bag>> & {
+  children: ReactNode;
+};
+/**
+ * Props for the StreamProvider component when using a custom transport.
+ * Accepts all `useStream` custom options plus `children`.
+ */
+type StreamProviderCustomProps<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate> = UseStreamCustomOptions<InferStateType<T>, InferBag<T, Bag>> & {
+  children: ReactNode;
+};
+/**
+ * Provides a shared `useStream` instance to all descendants via React Context.
+ *
+ * Use `StreamProvider` when multiple components in a subtree need access to the
+ * same stream state (messages, loading status, errors, interrupts, etc.) without
+ * prop drilling.
+ *
+ * @example
+ * ```tsx
+ * import { StreamProvider, useStreamContext } from "@langchain/react";
+ *
+ * function App() {
+ *   return (
+ *     <StreamProvider assistantId="agent" apiUrl="http://localhost:2024">
+ *       <ChatHeader />
+ *       <MessageList />
+ *       <MessageInput />
+ *     </StreamProvider>
+ *   );
+ * }
+ *
+ * function ChatHeader() {
+ *   const { isLoading, error } = useStreamContext();
+ *   return (
+ *     <header>
+ *       {isLoading && <span>Thinking...</span>}
+ *       {error && <span>Error</span>}
+ *     </header>
+ *   );
+ * }
+ *
+ * function MessageList() {
+ *   const { messages } = useStreamContext();
+ *   return messages.map((msg, i) => <div key={msg.id ?? i}>{msg.content}</div>);
+ * }
+ *
+ * function MessageInput() {
+ *   const { submit } = useStreamContext();
+ *   return (
+ *     <button onClick={() => submit({ messages: [{ type: "human", content: "Hi" }] })}>
+ *       Send
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * Multiple providers can be nested for multi-agent scenarios:
+ *
+ * @example
+ * ```tsx
+ * <StreamProvider assistantId="researcher" apiUrl="http://localhost:2024">
+ *   <ResearchPanel />
+ * </StreamProvider>
+ * <StreamProvider assistantId="writer" apiUrl="http://localhost:2024">
+ *   <WriterPanel />
+ * </StreamProvider>
+ * ```
+ */
+declare function StreamProvider<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(props: StreamProviderProps<T, Bag> | StreamProviderCustomProps<T, Bag>): ReactNode;
+/**
+ * Accesses the shared stream instance from the nearest `StreamProvider`.
+ *
+ * Throws if called outside of a `StreamProvider`.
+ *
+ * @example
+ * ```tsx
+ * function MessageList() {
+ *   const { messages, getMessagesMetadata } = useStreamContext();
+ *   return messages.map((msg, i) => {
+ *     const metadata = getMessagesMetadata(msg, i);
+ *     return <div key={msg.id ?? i}>{msg.content}</div>;
+ *   });
+ * }
+ * ```
+ *
+ * @example With type parameters for full type safety:
+ * ```tsx
+ * import type { agent } from "./agent";
+ *
+ * function Chat() {
+ *   const { toolCalls } = useStreamContext<typeof agent>();
+ *   // toolCalls are fully typed from the agent's tools
+ * }
+ * ```
+ */
+declare function useStreamContext<T = Record<string, unknown>, Bag extends BagTemplate = BagTemplate>(): ReturnType<typeof useStream<T, Bag>>;
+//#endregion
+export { StreamProvider, StreamProviderCustomProps, StreamProviderProps, useStreamContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../src/context.tsx"],"mappings":";;;;;;;;AAqBA;;KAAY,mBAAA,KACN,MAAA,+BACQ,WAAA,GAAc,WAAA,IACxB,oBAAA,CAAqB,CAAA,EAAG,QAAA,CAAS,CAAA,EAAG,GAAA;EAAU,QAAA,EAAU,SAAA;AAAA;;;;;KAMhD,yBAAA,KACN,MAAA,+BACQ,WAAA,GAAc,WAAA,IACxB,sBAAA,CAAuB,cAAA,CAAe,CAAA,GAAI,QAAA,CAAS,CAAA,EAAG,GAAA;EACxD,QAAA,EAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;AAJZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA;;;;;;;;;;;;iBAAgB,cAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAE1B,KAAA,EAAO,mBAAA,CAAoB,CAAA,EAAG,GAAA,IAAO,yBAAA,CAA0B,CAAA,EAAG,GAAA,IACjE,SAAA;;;;;;;;;;;;;;;;;;AAoCH;;;;;;;;;iBAAgB,gBAAA,KACV,MAAA,+BACQ,WAAA,GAAc,WAAA,CAAA,CAAA,GACvB,UAAA,QAAkB,SAAA,CAAU,CAAA,EAAG,GAAA"}