@langchain/langgraph-sdk 0.0.51 → 0.0.53

package/dist/client.cjs

@@ -907,6 +907,35 @@ class StoreClient extends BaseClient {
     }
 }
 exports.StoreClient = StoreClient;
+class UiClient extends BaseClient {
+    static getOrCached(key, fn) {
+        if (UiClient.promiseCache[key] != null) {
+            return UiClient.promiseCache[key];
+        }
+        const promise = fn();
+        UiClient.promiseCache[key] = promise;
+        return promise;
+    }
+    async getComponent(assistantId, agentName) {
+        return UiClient["getOrCached"](`${this.apiUrl}-${assistantId}-${agentName}`, async () => {
+            const response = await this.asyncCaller.fetch(...this.prepareFetchOptions(`/ui/${assistantId}`, {
+                headers: {
+                    Accept: "text/html",
+                    "Content-Type": "application/json",
+                },
+                method: "POST",
+                json: { name: agentName },
+            }));
+            return response.text();
+        });
+    }
+}
+Object.defineProperty(UiClient, "promiseCache", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {}
+});
 class Client {
     constructor(config) {
         /**
@@ -954,11 +983,22 @@ class Client {
             writable: true,
             value: void 0
         });
+        /**
+         * The client for interacting with the UI.
+         * @internal Used by LoadExternalComponent and the API might change in the future.
+         */
+        Object.defineProperty(this, "~ui", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.assistants = new AssistantsClient(config);
         this.threads = new ThreadsClient(config);
         this.runs = new RunsClient(config);
         this.crons = new CronsClient(config);
         this.store = new StoreClient(config);
+        this["~ui"] = new UiClient(config);
     }
 }
 exports.Client = Client;

package/dist/client.d.ts

@@ -504,6 +504,11 @@ export declare class StoreClient extends BaseClient {
         offset?: number;
     }): Promise<ListNamespaceResponse>;
 }
+declare class UiClient extends BaseClient {
+    private static promiseCache;
+    private static getOrCached;
+    getComponent(assistantId: string, agentName: string): Promise<string>;
+}
 export declare class Client<TStateType = DefaultValues, TUpdateType = TStateType, TCustomEventType = unknown> {
     /**
      * The client for interacting with assistants.
@@ -525,6 +530,11 @@ export declare class Client<TStateType = DefaultValues, TUpdateType = TStateType
      * The client for interacting with the KV store.
      */
     store: StoreClient;
+    /**
+     * The client for interacting with the UI.
+     * @internal Used by LoadExternalComponent and the API might change in the future.
+     */
+    "~ui": UiClient;
     constructor(config?: ClientConfig);
 }
 export {};

package/dist/client.js

@@ -898,6 +898,35 @@ export class StoreClient extends BaseClient {
         });
     }
 }
+class UiClient extends BaseClient {
+    static getOrCached(key, fn) {
+        if (UiClient.promiseCache[key] != null) {
+            return UiClient.promiseCache[key];
+        }
+        const promise = fn();
+        UiClient.promiseCache[key] = promise;
+        return promise;
+    }
+    async getComponent(assistantId, agentName) {
+        return UiClient["getOrCached"](`${this.apiUrl}-${assistantId}-${agentName}`, async () => {
+            const response = await this.asyncCaller.fetch(...this.prepareFetchOptions(`/ui/${assistantId}`, {
+                headers: {
+                    Accept: "text/html",
+                    "Content-Type": "application/json",
+                },
+                method: "POST",
+                json: { name: agentName },
+            }));
+            return response.text();
+        });
+    }
+}
+Object.defineProperty(UiClient, "promiseCache", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: {}
+});
 export class Client {
     constructor(config) {
         /**
@@ -945,10 +974,21 @@ export class Client {
             writable: true,
             value: void 0
         });
+        /**
+         * The client for interacting with the UI.
+         * @internal Used by LoadExternalComponent and the API might change in the future.
+         */
+        Object.defineProperty(this, "~ui", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.assistants = new AssistantsClient(config);
         this.threads = new ThreadsClient(config);
         this.runs = new RunsClient(config);
         this.crons = new CronsClient(config);
         this.store = new StoreClient(config);
+        this["~ui"] = new UiClient(config);
     }
 }

package/dist/react/stream.cjs

@@ -444,6 +444,8 @@ function useStream(options) {
             trackStreamMode("values");
             return values;
         },
+        client,
+        assistantId,
         error,
         isLoading,
         stop,

package/dist/react/stream.d.ts

@@ -1,4 +1,4 @@
-import { type ClientConfig } from "../client.js";
+import { Client, type ClientConfig } from "../client.js";
 import type { Command, DisconnectMode, MultitaskStrategy, OnCompletionBehavior } from "../types.js";
 import type { Message } from "../types.messages.js";
 import type { Checkpoint, Config, Interrupt, Metadata, ThreadState } from "../schema.js";
@@ -168,6 +168,14 @@ export interface UseStream<StateType extends Record<string, unknown> = Record<st
      * @returns The metadata for the message.
      */
     getMessagesMetadata: (message: Message, index?: number) => MessageMetadata<StateType> | undefined;
+    /**
+     * LangGraph SDK client used to send request and receive responses.
+     */
+    client: Client;
+    /**
+     * The ID of the assistant to use.
+     */
+    assistantId: string;
 }
 type ConfigWithConfigurable<ConfigurableType extends Record<string, unknown>> = Config & {
     configurable?: ConfigurableType;

package/dist/react/stream.js

@@ -441,6 +441,8 @@ export function useStream(options) {
             trackStreamMode("values");
             return values;
         },
+        client,
+        assistantId,
         error,
         isLoading,
         stop,

package/dist/react-ui/client.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -84,23 +85,9 @@ class ComponentStore {
     }
 }
 const COMPONENT_STORE = new ComponentStore();
-const COMPONENT_PROMISE_CACHE = {};
 const EXT_STORE_SYMBOL = Symbol.for("LGUI_EXT_STORE");
 const REQUIRE_SYMBOL = Symbol.for("LGUI_REQUIRE");
-function fetchComponent(apiUrl, assistantId, agentName) {
-    const cacheKey = `${apiUrl}-${assistantId}-${agentName}`;
-    if (COMPONENT_PROMISE_CACHE[cacheKey] != null) {
-        return COMPONENT_PROMISE_CACHE[cacheKey];
-    }
-    const request = fetch(`${apiUrl}/ui/${assistantId}`, {
-        headers: { Accept: "text/html", "Content-Type": "application/json" },
-        method: "POST",
-        body: JSON.stringify({ name: agentName }),
-    }).then((a) => a.text());
-    COMPONENT_PROMISE_CACHE[cacheKey] = request;
-    return request;
-}
-function LoadExternalComponent({ apiUrl = "http://localhost:2024", assistantId, stream, message, meta, fallback, components, ...props }) {
+function LoadExternalComponent({ stream, message, meta, fallback, components, ...props }) {
     const ref = React.useRef(null);
     const id = React.useId();
     const shadowRootId = `child-shadow-${id}`;
@@ -108,10 +95,11 @@ function LoadExternalComponent({ apiUrl = "http://localhost:2024", assistantId,
     const state = React.useSyncExternalStore(store.subscribe, store.getSnapshot);
     const clientComponent = components?.[message.name];
     const hasClientComponent = clientComponent != null;
+    const uiClient = stream.client["~ui"];
     React.useEffect(() => {
         if (hasClientComponent)
             return;
-        fetchComponent(apiUrl, assistantId, message.name).then((html) => {
+        uiClient.getComponent(stream.assistantId, message.name).then((html) => {
             const dom = ref.current;
             if (!dom)
                 return;
@@ -121,12 +109,18 @@ function LoadExternalComponent({ apiUrl = "http://localhost:2024", assistantId,
                 .createContextualFragment(html.replace("{{shadowRootId}}", shadowRootId));
             root.appendChild(fragment);
         });
-    }, [apiUrl, assistantId, message.name, shadowRootId, hasClientComponent]);
+    }, [
+        uiClient,
+        stream.assistantId,
+        message.name,
+        shadowRootId,
+        hasClientComponent,
+    ]);
     if (hasClientComponent) {
-        return React.createElement(clientComponent, message.content);
+        return React.createElement(clientComponent, message.props);
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { id: shadowRootId, ref: ref, ...props }), (0, jsx_runtime_1.jsx)(UseStreamContext.Provider, { value: { stream, meta }, children: state?.target != null
-                    ? ReactDOM.createPortal(React.createElement(state.comp, message.content), state.target)
+                    ? ReactDOM.createPortal(React.createElement(state.comp, message.props), state.target)
                     : fallback })] }));
 }
 exports.LoadExternalComponent = LoadExternalComponent;

package/dist/react-ui/client.d.ts

@@ -49,10 +49,6 @@ declare class ComponentStore {
 declare const EXT_STORE_SYMBOL: unique symbol;
 declare const REQUIRE_SYMBOL: unique symbol;
 interface LoadExternalComponentProps extends Pick<React.HTMLAttributes<HTMLDivElement>, "style" | "className"> {
-    /** API URL of the LangGraph Platform */
-    apiUrl?: string;
-    /** ID of the assistant */
-    assistantId: string;
     /** Stream of the assistant */
     stream: ReturnType<typeof useStream>;
     /** UI message to be rendered */
@@ -67,7 +63,7 @@ interface LoadExternalComponentProps extends Pick<React.HTMLAttributes<HTMLDivEl
      */
     components?: Record<string, React.FunctionComponent | React.ComponentClass>;
 }
-export declare function LoadExternalComponent({ apiUrl, assistantId, stream, message, meta, fallback, components, ...props }: LoadExternalComponentProps): JsxRuntime.JSX.Element;
+export declare function LoadExternalComponent({ stream, message, meta, fallback, components, ...props }: LoadExternalComponentProps): JsxRuntime.JSX.Element;
 declare global {
     interface Window {
         [EXT_STORE_SYMBOL]: ComponentStore;

package/dist/react-ui/client.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStream } from "../react/index.js";
 import * as React from "react";
@@ -57,23 +58,9 @@ class ComponentStore {
     }
 }
 const COMPONENT_STORE = new ComponentStore();
-const COMPONENT_PROMISE_CACHE = {};
 const EXT_STORE_SYMBOL = Symbol.for("LGUI_EXT_STORE");
 const REQUIRE_SYMBOL = Symbol.for("LGUI_REQUIRE");
-function fetchComponent(apiUrl, assistantId, agentName) {
-    const cacheKey = `${apiUrl}-${assistantId}-${agentName}`;
-    if (COMPONENT_PROMISE_CACHE[cacheKey] != null) {
-        return COMPONENT_PROMISE_CACHE[cacheKey];
-    }
-    const request = fetch(`${apiUrl}/ui/${assistantId}`, {
-        headers: { Accept: "text/html", "Content-Type": "application/json" },
-        method: "POST",
-        body: JSON.stringify({ name: agentName }),
-    }).then((a) => a.text());
-    COMPONENT_PROMISE_CACHE[cacheKey] = request;
-    return request;
-}
-export function LoadExternalComponent({ apiUrl = "http://localhost:2024", assistantId, stream, message, meta, fallback, components, ...props }) {
+export function LoadExternalComponent({ stream, message, meta, fallback, components, ...props }) {
     const ref = React.useRef(null);
     const id = React.useId();
     const shadowRootId = `child-shadow-${id}`;
@@ -81,10 +68,11 @@ export function LoadExternalComponent({ apiUrl = "http://localhost:2024", assist
     const state = React.useSyncExternalStore(store.subscribe, store.getSnapshot);
     const clientComponent = components?.[message.name];
     const hasClientComponent = clientComponent != null;
+    const uiClient = stream.client["~ui"];
     React.useEffect(() => {
         if (hasClientComponent)
             return;
-        fetchComponent(apiUrl, assistantId, message.name).then((html) => {
+        uiClient.getComponent(stream.assistantId, message.name).then((html) => {
             const dom = ref.current;
             if (!dom)
                 return;
@@ -94,12 +82,18 @@ export function LoadExternalComponent({ apiUrl = "http://localhost:2024", assist
                 .createContextualFragment(html.replace("{{shadowRootId}}", shadowRootId));
             root.appendChild(fragment);
         });
-    }, [apiUrl, assistantId, message.name, shadowRootId, hasClientComponent]);
+    }, [
+        uiClient,
+        stream.assistantId,
+        message.name,
+        shadowRootId,
+        hasClientComponent,
+    ]);
     if (hasClientComponent) {
-        return React.createElement(clientComponent, message.content);
+        return React.createElement(clientComponent, message.props);
     }
     return (_jsxs(_Fragment, { children: [_jsx("div", { id: shadowRootId, ref: ref, ...props }), _jsx(UseStreamContext.Provider, { value: { stream, meta }, children: state?.target != null
-                    ? ReactDOM.createPortal(React.createElement(state.comp, message.content), state.target)
+                    ? ReactDOM.createPortal(React.createElement(state.comp, message.props), state.target)
                     : fallback })] }));
 }
 export function bootstrapUiContext() {

package/dist/react-ui/server/server.cjs

@@ -18,10 +18,10 @@ const typedUi = (config) => {
             type: "ui",
             id: message?.id ?? (0, uuid_1.v4)(),
             name: message?.name,
-            content: message?.content,
-            additional_kwargs: {
+            props: message?.props,
+            metadata: {
                 ...metadata,
-                ...message?.additional_kwargs,
+                ...message?.metadata,
                 ...(options?.message ? { message_id: options.message.id } : null),
             },
         };

package/dist/react-ui/server/server.d.ts

@@ -13,8 +13,8 @@ export declare const typedUi: <Decl extends Record<string, ElementType>>(config:
     push: <K extends keyof Decl & string>(message: {
         id?: string | undefined;
         name: K;
-        content: { [K_1 in keyof Decl]: ComponentPropsWithoutRef<Decl[K_1]>; }[K];
-        additional_kwargs?: Record<string, unknown> | undefined;
+        props: { [K_1 in keyof Decl]: ComponentPropsWithoutRef<Decl[K_1]>; }[K];
+        metadata?: Record<string, unknown> | undefined;
     }, options?: {
         message?: MessageLike;
     }) => UIMessage;

package/dist/react-ui/server/server.js

@@ -15,10 +15,10 @@ export const typedUi = (config) => {
             type: "ui",
             id: message?.id ?? uuidv4(),
             name: message?.name,
-            content: message?.content,
-            additional_kwargs: {
+            props: message?.props,
+            metadata: {
                 ...metadata,
-                ...message?.additional_kwargs,
+                ...message?.metadata,
                 ...(options?.message ? { message_id: options.message.id } : null),
             },
         };

package/dist/react-ui/types.d.ts

@@ -2,8 +2,8 @@ export interface UIMessage {
     type: "ui";
     id: string;
     name: string;
-    content: Record<string, unknown>;
-    additional_kwargs: {
+    props: Record<string, unknown>;
+    metadata: {
         run_id: string;
         message_id?: string;
         [key: string]: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-sdk",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Client library for interacting with the LangGraph API",
   "type": "module",
   "packageManager": "yarn@1.22.19",