@langgraph-js/sdk 2.2.0 → 3.0.2

package/README.md

@@ -97,40 +97,10 @@ First, install the nanostores React integration:
 pnpm i @nanostores/react
 ```
 
-Then create a context provider for your chat:
+Then use the ChatProvider in your components:
 
 ```tsx
-import React, { createContext, useContext, useEffect } from "react";
-import { globalChatStore } from "../store"; // Import your store
-import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
-import { useStore } from "@nanostores/react";
-
-type ChatContextType = UnionStore<typeof globalChatStore>;
-
-const ChatContext = createContext<ChatContextType | undefined>(undefined);
-
-export const useChat = () => {
-    const context = useContext(ChatContext);
-    if (!context) {
-        throw new Error("useChat must be used within a ChatProvider");
-    }
-    return context;
-};
-
-export const ChatProvider = ({ children }) => {
-    // Use store to ensure React gets reactive state updates
-    const store = useUnionStore(globalChatStore, useStore);
-    
-    useEffect(() => {
-        // Initialize client
-        store.initClient().then(() => {
-            // Initialize conversation history
-            store.refreshHistoryList();
-        });
-    }, [store.currentAgent]);
-
-    return <ChatContext.Provider value={store}>{children}</ChatContext.Provider>;
-};
+import { ChatProvider, useChat } from "@langgraph-js/sdk/react";
 ```
 
 Use it in your components:
@@ -138,8 +108,19 @@ Use it in your components:
 ```tsx
 export const MyChat = () => {
     return (
-        <ChatProvider>
-            <ChatComp></ChatComp>
+        <ChatProvider
+            defaultAgent="agent"
+            apiUrl="http://localhost:8123"
+            defaultHeaders={{}}
+            withCredentials={false}
+            showHistory={true}
+            showGraph={false}
+            onInitError={(error, currentAgent) => {
+                console.error(`Failed to initialize ${currentAgent}:`, error);
+                // Handle initialization error
+            }}
+        >
+            <ChatComp />
         </ChatProvider>
     );
 };
@@ -150,6 +131,84 @@ function ChatComp() {
 }
 ```
 
+### Vue Integration
+
+First, install the nanostores Vue integration:
+
+```bash
+pnpm i @nanostores/vue
+```
+
+Then use the ChatProvider in your components:
+
+```typescript
+import { ChatProvider, useChat, useChatProvider } from "@langgraph-js/sdk/vue";
+```
+
+#### Option 1: Using ChatProvider Component
+
+Use it in your components:
+
+```vue
+<template>
+    <ChatProvider
+        :default-agent="'agent'"
+        :api-url="'http://localhost:8123'"
+        :default-headers="{}"
+        :with-credentials="false"
+        :show-history="true"
+        :show-graph="false"
+        :on-init-error="
+            (error, currentAgent) => {
+                console.error(`Failed to initialize ${currentAgent}:`, error);
+                // Handle initialization error
+            }
+        "
+    >
+        <ChatComp />
+    </ChatProvider>
+</template>
+
+<script setup lang="ts">
+import { ChatProvider } from "@langgraph-js/sdk/vue";
+
+function ChatComp() {
+    const chat = useChat();
+    // Use chat store methods and state here
+}
+</script>
+```
+
+#### Option 2: Using useChatProvider Hook Directly
+
+For more flexibility, you can use the hook directly in your setup:
+
+```vue
+<script setup lang="ts">
+import { useChatProvider } from "@langgraph-js/sdk/vue";
+
+const props = {
+    defaultAgent: "agent",
+    apiUrl: "http://localhost:8123",
+    defaultHeaders: {},
+    withCredentials: false,
+    showHistory: true,
+    showGraph: false,
+    onInitError: (error: any, currentAgent: string) => {
+        console.error(`Failed to initialize ${currentAgent}:`, error);
+        // Handle initialization error
+    },
+};
+
+const { unionStore } = useChatProvider(props);
+// Use unionStore methods and state here
+</script>
+
+<template>
+    <ChatComp />
+</template>
+```
+
 ## Documentation
 
 For complete documentation, visit our [official docs](https://langgraph-js.netlify.app).

package/dist/LangGraphClient.d.ts

@@ -2,7 +2,7 @@ import type { Thread, Message, Assistant, Command } from "@langchain/langgraph-s
 import { EventEmitter } from "eventemitter3";
 import { ToolManager } from "./ToolManager.js";
 import { CallToolResult } from "./tool/createTool.js";
-import { ILangGraphClient } from "./types.js";
+import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 export type RenderMessage = Message & {
     /** 对于 AIMessage 来说是节点名称，对于工具节点来说是工具名称 */
     name?: string;
@@ -68,7 +68,7 @@ export interface LangGraphClientConfig {
     timeoutMs?: number;
     defaultHeaders?: Record<string, string | null | undefined>;
     /** 自定义客户端实现，如果不提供则使用官方 Client */
-    client: ILangGraphClient<any, any>;
+    client: ILangGraphClient<any>;
 }
 export interface LangGraphEvents {
     /** 流开始事件 */
@@ -108,7 +108,7 @@ export interface LangGraphEvents {
  * @zh LangGraphClient 类是与 LangGraph 后端交互的主要客户端。
  * @en The LangGraphClient class is the main client for interacting with the LangGraph backend.
  */
-export declare class LangGraphClient<TStateType = unknown, TUpdateType = TStateType> extends EventEmitter<LangGraphEvents> {
+export declare class LangGraphClient<TStateType = unknown> extends EventEmitter<LangGraphEvents> {
     private client;
     private currentAssistant;
     private currentThread;
@@ -128,11 +128,15 @@ export declare class LangGraphClient<TStateType = unknown, TUpdateType = TStateT
     get assistants(): {
         search(query?: {
             graphId?: string;
-            metadata?: import("@langchain/langgraph-sdk").Metadata;
+            metadata? /**
+             * Specify a custom fetch implementation.
+             *
+             * By default we expect the `fetch` is available in the global scope.
+             */: import("@langchain/langgraph-sdk").Metadata;
             limit?: number;
             offset?: number;
-            sortBy?: import("./types.js").AssistantSortBy;
-            sortOrder?: import("./types.js").SortOrder;
+            sortBy?: import("@langgraph-js/pure-graph/dist/types.js").AssistantSortBy;
+            sortOrder?: import("@langgraph-js/pure-graph/dist/types.js").SortOrder;
         }): Promise<Assistant[]>;
         getGraph(assistantId: string, options?: {
             xray?: boolean | number;
@@ -145,70 +149,21 @@ export declare class LangGraphClient<TStateType = unknown, TUpdateType = TStateT
             threadId?: string;
             ifExists?: import("@langchain/langgraph-sdk").OnConflictBehavior;
             graphId?: string;
-            supersteps?: Array<{
-                updates: Array<{
-                    values: unknown;
-                    command?: Command;
-                    asNode: string;
-                }>;
-            }>;
         }): Promise<Thread<TStateType>>;
         search(query?: {
             metadata?: import("@langchain/langgraph-sdk").Metadata;
             limit?: number;
             offset?: number;
             status?: import("@langchain/langgraph-sdk").ThreadStatus;
-            sortBy?: import("./types.js").ThreadSortBy;
-            sortOrder?: import("./types.js").SortOrder;
+            sortBy?: import("@langgraph-js/pure-graph/dist/types.js").ThreadSortBy;
+            sortOrder?: import("@langgraph-js/pure-graph/dist/types.js").SortOrder;
         }): Promise<Thread<TStateType>[]>;
         get(threadId: string): Promise<Thread<TStateType>>;
         delete(threadId: string): Promise<void>;
+        updateState(threadId: string, thread: Partial<Thread<TStateType>>): Promise<Pick<import("@langchain/langgraph-sdk").Config, "configurable">>;
     };
     /** 代理 runs 属性到内部 client */
-    get runs(): {
-        list(threadId: string, options?: {
-            limit?: number;
-            offset?: number;
-            status?: import("./types.js").RunStatus;
-        }): Promise<import("@langchain/langgraph-sdk").Run[]>;
-        stream<TSubgraphs extends boolean = false>(threadId: string, assistantId: string, payload?: {
-            input?: Record<string, unknown> | null;
-            metadata?: import("@langchain/langgraph-sdk").Metadata;
-            config?: import("@langchain/langgraph-sdk").Config;
-            checkpointId?: string;
-            checkpoint?: Omit<import("@langchain/langgraph-sdk").Checkpoint, "thread_id">;
-            checkpointDuring?: boolean;
-            interruptBefore?: "*" | string[];
-            interruptAfter?: "*" | string[];
-            multitaskStrategy?: import("./types.js").MultitaskStrategy;
-            onCompletion?: import("./types.js").OnCompletionBehavior;
-            signal?: AbortController["signal"];
-            webhook?: string;
-            onDisconnect?: import("./types.js").DisconnectMode;
-            afterSeconds?: number;
-            ifNotExists?: "create" | "reject";
-            command?: Command;
-            onRunCreated?: (params: {
-                run_id: string;
-                thread_id?: string;
-            }) => void;
-            streamMode?: import("@langchain/langgraph-sdk").StreamMode[];
-            streamSubgraphs?: TSubgraphs | undefined;
-            streamResumable?: boolean;
-            feedbackKeys?: string[];
-        } | undefined): import("./types.js").TypedAsyncGenerator<TSubgraphs, TStateType, TUpdateType>;
-        joinStream(threadId: string, runId: string, options?: {
-            signal?: AbortSignal;
-            cancelOnDisconnect?: boolean;
-            lastEventId?: string;
-            streamMode?: import("@langchain/langgraph-sdk").StreamMode | import("@langchain/langgraph-sdk").StreamMode[];
-        } | AbortSignal): AsyncGenerator<{
-            id?: string;
-            event: import("@langchain/core/tracers/log_stream").StreamEvent;
-            data: any;
-        }>;
-        cancel(threadId: string, runId: string, wait?: boolean, action?: import("./types.js").CancelAction): Promise<void>;
-    };
+    get runs(): ILangGraphClient["runs"];
     private listAssistants;
     /**
      * @zh 初始化 Assistant。
@@ -219,7 +174,7 @@ export declare class LangGraphClient<TStateType = unknown, TUpdateType = TStateT
      * @zh 创建一个新的 Thread。
      * @en Creates a new Thread.
      */
-    createThread({ threadId, graphId, }?: {
+    createThread({ threadId, graphId }?: {
         threadId?: string;
         graphId?: string;
     }): Promise<Thread<TStateType>>;

package/dist/LangGraphClient.js

@@ -74,7 +74,7 @@ export class LangGraphClient extends EventEmitter {
      * @zh 创建一个新的 Thread。
      * @en Creates a new Thread.
      */
-    async createThread({ threadId, graphId, } = {}) {
+    async createThread({ threadId, graphId } = {}) {
         try {
             this.currentThread = await this.threads.create({
                 threadId,
@@ -254,7 +254,7 @@ export class LangGraphClient extends EventEmitter {
             if (chunk.event === "metadata") {
                 this.currentRun = chunk.data;
             }
-            else if (chunk.event === "error") {
+            else if (chunk.event === "error" || chunk.event === "Error" || chunk.event === "__stream_error__") {
                 this.emit("error", chunk);
             }
             else if (chunk.event === "messages/partial") {

package/dist/TestKit.d.ts

@@ -89,7 +89,7 @@ export declare class TestLangGraphChat {
      * @zh 准备测试环境，初始化客户端连接
      * @en Prepare test environment, initialize client connection
      */
-    ready(): Promise<import("./LangGraphClient.js").LangGraphClient<unknown, unknown>> | undefined;
+    ready(): Promise<import("./LangGraphClient.js").LangGraphClient<unknown>> | undefined;
     /**
      * @zh 模拟人类输入消息并等待测试任务完成，这是测试的核心方法
      * @en Simulate human input and wait for test tasks to complete, this is the core test method
@@ -146,7 +146,27 @@ export declare class TestLangGraphChat {
      */
     findLast(type: "human" | "ai" | "tool", options?: {
         before?: (item: RenderMessage) => boolean;
-    }): (import("@langchain/langgraph-sdk").HumanMessage & {
+    }): ({
+        additional_kwargs?: {
+            [x: string]: unknown;
+        } | undefined;
+        content: string | ({
+            type: "text";
+            text: string;
+        } | {
+            type: "image_url";
+            image_url: string | {
+                url: string;
+                detail?: ("auto" | "low" | "high") | undefined;
+            };
+        })[];
+        id?: string | undefined;
+        name?: string | undefined;
+        response_metadata?: Record<string, unknown> | undefined;
+    } & {
+        type: "human";
+        example?: boolean | undefined;
+    } & {
         name?: string;
         node_name?: string;
         tool_input?: string;
@@ -171,7 +191,56 @@ export declare class TestLangGraphChat {
         spend_time?: number;
         unique_id?: string;
         done?: boolean;
-    }) | (import("@langchain/langgraph-sdk").AIMessage & {
+    }) | ({
+        additional_kwargs?: {
+            [x: string]: unknown;
+        } | undefined;
+        content: string | ({
+            type: "text";
+            text: string;
+        } | {
+            type: "image_url";
+            image_url: string | {
+                url: string;
+                detail?: ("auto" | "low" | "high") | undefined;
+            };
+        })[];
+        id?: string | undefined;
+        name?: string | undefined;
+        response_metadata?: Record<string, unknown> | undefined;
+    } & {
+        type: "ai";
+        example?: boolean | undefined;
+        tool_calls?: {
+            name: string;
+            args: {
+                [x: string]: any;
+            };
+            id?: string | undefined;
+            type?: "tool_call" | undefined;
+        }[] | undefined;
+        invalid_tool_calls?: {
+            name?: string | undefined;
+            args?: string | undefined;
+            id?: string | undefined;
+            error?: string | undefined;
+            type?: "invalid_tool_call" | undefined;
+        }[] | undefined;
+        usage_metadata?: {
+            input_tokens: number;
+            output_tokens: number;
+            total_tokens: number;
+            input_token_details?: {
+                audio?: number | undefined;
+                cache_read?: number | undefined;
+                cache_creation?: number | undefined;
+            } | undefined;
+            output_token_details?: {
+                audio?: number | undefined;
+                reasoning?: number | undefined;
+            } | undefined;
+        } | undefined;
+    } & {
         name?: string;
         node_name?: string;
         tool_input?: string;
@@ -196,7 +265,29 @@ export declare class TestLangGraphChat {
         spend_time?: number;
         unique_id?: string;
         done?: boolean;
-    }) | (import("@langchain/langgraph-sdk").ToolMessage & {
+    }) | ({
+        additional_kwargs?: {
+            [x: string]: unknown;
+        } | undefined;
+        content: string | ({
+            type: "text";
+            text: string;
+        } | {
+            type: "image_url";
+            image_url: string | {
+                url: string;
+                detail?: ("auto" | "low" | "high") | undefined;
+            };
+        })[];
+        id?: string | undefined;
+        name?: string | undefined;
+        response_metadata?: Record<string, unknown> | undefined;
+    } & {
+        type: "tool";
+        status?: "error" | "success" | undefined;
+        tool_call_id: string;
+        artifact?: any;
+    } & {
         name?: string;
         node_name?: string;
         tool_input?: string;

package/dist/client/LanggraphServer.d.ts

@@ -1,3 +1,3 @@
 import { LangGraphClientConfig } from "../LangGraphClient.js";
-import { ILangGraphClient } from "../types.js";
+import { type ILangGraphClient } from "@langgraph-js/pure-graph/dist/types.js";
 export declare const createLangGraphServerClient: (config: LangGraphClientConfig) => Promise<ILangGraphClient>;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./LangGraphClient.js";
 export * from "./MessageProcessor.js";
-export * from "./types.js";
 export * from "./tool/index.js";
 export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";

package/dist/index.js

@@ -1,6 +1,5 @@
 export * from "./LangGraphClient.js";
 export * from "./MessageProcessor.js";
-export * from "./types.js";
 export * from "./tool/index.js";
 export * from "@langchain/langgraph-sdk";
 export * from "./ui-store/index.js";

package/dist/react/ChatContext.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+import { UnionStore } from "../ui-store/index.js";
+export declare const useChat: () => UnionStore<{
+    data: {
+        client: import("nanostores").PreinitializedWritableAtom<import("../LangGraphClient.js").LangGraphClient<unknown> | null> & object;
+        renderMessages: import("nanostores").PreinitializedWritableAtom<import("../LangGraphClient.js").RenderMessage[]> & object;
+        userInput: import("nanostores").PreinitializedWritableAtom<string> & object;
+        loading: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+        inChatError: import("nanostores").PreinitializedWritableAtom<string | null> & object;
+        currentAgent: import("nanostores").PreinitializedWritableAtom<string> & object;
+        collapsedTools: import("nanostores").PreinitializedWritableAtom<string[]> & object;
+        showHistory: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+        historyList: import("nanostores").PreinitializedWritableAtom<import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>[]> & object;
+        currentChatId: import("nanostores").PreinitializedWritableAtom<string | null> & object;
+        showGraph: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+        graphVisualize: import("nanostores").PreinitializedWritableAtom<import("@langchain/langgraph-sdk").AssistantGraph | null> & object;
+        currentNodeName: import("nanostores").PreinitializedWritableAtom<string> & object;
+        tools: import("nanostores").PreinitializedWritableAtom<import("../index.js").UnionTool<any, Object, any>[]> & object;
+    };
+    mutations: {
+        refreshTools: () => Promise<void>;
+        setTools(new_tools: import("../index.js").UnionTool<any>[]): void;
+        isFELocking(): boolean | undefined;
+        initClient: () => Promise<import("../LangGraphClient.js").LangGraphClient<unknown>>;
+        sendMessage: (message?: import("@langchain/langgraph-sdk").Message[], extraData?: import("../LangGraphClient.js").SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
+        stopGeneration: () => void;
+        toggleToolCollapse: (toolId: string) => void;
+        toggleHistoryVisible: () => void;
+        refreshHistoryList: () => Promise<void>;
+        addToHistory: (thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>) => void;
+        revertChatTo(messageId: string, resend?: boolean, sendOptions?: import("../LangGraphClient.js").SendMessageOptions): Promise<void>;
+        setUserInput(input: string): void;
+        setCurrentAgent(agent: string): Promise<void>;
+        toggleGraphVisible(): void;
+        refreshGraph: () => Promise<void>;
+        createNewChat(): void;
+        toHistoryChat(thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>): Promise<import("@langchain/langgraph-sdk").Thread<unknown> | undefined>;
+        deleteHistoryChat(thread: import("@langchain/langgraph-sdk").Thread<{
+            messages: import("@langchain/langgraph-sdk").Message[];
+        }>): Promise<void>;
+        getToolUIRender: (tool_name: string) => ((message: import("../LangGraphClient.js").RenderMessage) => Object) | null;
+    };
+}>;
+interface ChatProviderProps {
+    children: ReactNode;
+    defaultAgent?: string;
+    apiUrl?: string;
+    defaultHeaders?: Record<string, string>;
+    withCredentials?: boolean;
+    showHistory?: boolean;
+    showGraph?: boolean;
+    onInitError?: (error: any, currentAgent: string) => void;
+}
+export declare const ChatProvider: React.FC<ChatProviderProps>;
+export {};

package/dist/react/ChatContext.js

@@ -0,0 +1,62 @@
+import { createElement, createContext, useContext, useMemo, useEffect, useRef } from "react";
+import { createChatStore, useUnionStore } from "../ui-store/index.js";
+import { useStore } from "@nanostores/react";
+const ChatContext = createContext(undefined);
+export const useChat = () => {
+    const context = useContext(ChatContext);
+    if (!context) {
+        throw new Error("useChat must be used within a ChatProvider");
+    }
+    return context;
+};
+export const ChatProvider = ({ children, defaultAgent = "", apiUrl = "http://localhost:8123", defaultHeaders, withCredentials = false, showHistory = false, showGraph = false, onInitError, }) => {
+    // 使用 useMemo 稳定 defaultHeaders 的引用
+    const stableHeaders = useMemo(() => defaultHeaders || {}, [defaultHeaders]);
+    // 使用 useRef 保存 onInitError 的最新引用
+    const onInitErrorRef = useRef(onInitError);
+    useEffect(() => {
+        onInitErrorRef.current = onInitError;
+    }, [onInitError]);
+    const store = useMemo(() => {
+        const F = withCredentials
+            ? (url, options) => {
+                options.credentials = "include";
+                return fetch(url, options);
+            }
+            : fetch;
+        return createChatStore(defaultAgent, {
+            apiUrl,
+            defaultHeaders: stableHeaders,
+            callerOptions: {
+                fetch: F,
+                maxRetries: 1,
+            },
+        }, {
+            showHistory,
+            showGraph,
+        });
+    }, [defaultAgent, apiUrl, stableHeaders, withCredentials, showHistory, showGraph]);
+    const unionStore = useUnionStore(store, useStore);
+    // 使用 ref 标记是否已初始化
+    const initializedRef = useRef(false);
+    useEffect(() => {
+        if (initializedRef.current) {
+            return;
+        }
+        initializedRef.current = true;
+        unionStore
+            .initClient()
+            .then((res) => {
+            if (unionStore.showHistory) {
+                unionStore.refreshHistoryList();
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            if (onInitErrorRef.current) {
+                onInitErrorRef.current(err, unionStore.currentAgent);
+            }
+        });
+    }, [unionStore]);
+    return createElement(ChatContext.Provider, { value: unionStore }, children);
+};

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/dist/react/index.js

@@ -0,0 +1 @@
+export * from "./ChatContext.js";

package/dist/ui-store/createChatStore.d.ts

@@ -31,7 +31,7 @@ export declare const createChatStore: (initClientName: string, config: Partial<L
     onInit?: (client: LangGraphClient) => void;
 }) => {
     data: {
-        client: import("nanostores").PreinitializedWritableAtom<LangGraphClient<unknown, unknown> | null> & object;
+        client: import("nanostores").PreinitializedWritableAtom<LangGraphClient<unknown> | null> & object;
         renderMessages: import("nanostores").PreinitializedWritableAtom<RenderMessage[]> & object;
         userInput: import("nanostores").PreinitializedWritableAtom<string> & object;
         loading: import("nanostores").PreinitializedWritableAtom<boolean> & object;
@@ -52,7 +52,7 @@ export declare const createChatStore: (initClientName: string, config: Partial<L
         refreshTools: () => Promise<void>;
         setTools(new_tools: UnionTool<any>[]): void;
         isFELocking(): boolean | undefined;
-        initClient: () => Promise<LangGraphClient<unknown, unknown>>;
+        initClient: () => Promise<LangGraphClient<unknown>>;
         sendMessage: (message?: Message[], extraData?: SendMessageOptions, withoutCheck?: boolean) => Promise<void>;
         stopGeneration: () => void;
         toggleToolCollapse: (toolId: string) => void;

package/dist/ui-store/createChatStore.js

@@ -172,6 +172,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
             if (isThreadRunning) {
                 await ((_b = client.get()) === null || _b === void 0 ? void 0 : _b.resetStream());
             }
+            else {
+                throw e;
+            }
         }
         finally {
             userInput.set("");