@langgraph-js/sdk 1.1.9 → 1.3.0

package/README.md

@@ -1,163 +1,163 @@
-# @langgraph-js/sdk
-
-![npm version](https://img.shields.io/npm/v/@langgraph-js/sdk)
-![license](https://img.shields.io/npm/l/@langgraph-js/sdk)
-
-> The missing UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
-
-## Why @langgraph-js/sdk?
-
-Building AI agent applications is complex, especially when you need to bridge the gap between LangGraph agents and interactive user interfaces. This SDK solves the critical challenges of frontend integration:
-
-- **Provides a complete UI integration layer** - no more complex custom code to handle tools, streaming, and state management
-- **Simplifies human-in-the-loop interactions** - easily incorporate user feedback within agent workflows
-- **Handles edge cases automatically** - interruptions, errors, token management and more
-- **Offers a rich set of UI components** - ready-to-use elements to display agent interactions
-
-[DOCS](https://langgraph-js.netlify.app)
-
-## Installation
-
-```bash
-# Using npm
-npm install @langgraph-js/sdk
-
-# Using yarn
-yarn add @langgraph-js/sdk
-
-# Using pnpm
-pnpm add @langgraph-js/sdk
-```
-
-## Key Features
-
-### Generative UI
-
-- ✅ Custom Tool Messages
-- ✅ Token Counter
-- ✅ Stop Graph Progress
-- ✅ Interrupt Handling
-- ✅ Error Handling
-- ✅ Spend Time Tracking
-- ✅ Time Persistence
-
-### Frontend Actions
-
-- ✅ Definition of Union Tools
-- ✅ Frontend Functions As Tools
-- ✅ Human-in-the-Loop Interaction
-- ✅ Interrupt Mode
-
-### Authorization
-
-- ✅ Cookie-Based Authentication
-- ✅ Custom Token Authentication
-
-### Persistence
-
-- ✅ Read History from LangGraph
-
-## Advanced Usage
-
-### Creating a Chat Store
-
-You can easily create a reactive store for your LangGraph client:
-
-```typescript
-import { createChatStore } from "@langgraph-js/sdk";
-
-export const globalChatStore = createChatStore(
-    "agent",
-    {
-        // Custom LangGraph backend interaction
-        apiUrl: "http://localhost:8123",
-        // Custom headers for authentication
-        defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
-        callerOptions: {
-            // Example for including cookies
-            // fetch(url: string, options: RequestInit) {
-            //     options.credentials = "include";
-            //     return fetch(url, options);
-            // },
-        },
-    },
-    {
-        onInit(client) {
-            client.tools.bindTools([]);
-        },
-    }
-);
-```
-
-### React Integration
-
-First, install the nanostores React integration:
-
-```bash
-pnpm i @nanostores/react
-```
-
-Then create a context provider for your chat:
-
-```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>;
-};
-```
-
-Use it in your components:
-
-```tsx
-export const MyChat = () => {
-    return (
-        <ChatProvider>
-            <ChatComp></ChatComp>
-        </ChatProvider>
-    );
-};
-
-function ChatComp() {
-    const chat = useChat();
-    // Use chat store methods and state here
-}
-```
-
-## Documentation
-
-For complete documentation, visit our [official docs](https://langgraph-js.netlify.app).
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## License
-
-This project is licensed under the Apache-2.0 License.
+# @langgraph-js/sdk
+
+![npm version](https://img.shields.io/npm/v/@langgraph-js/sdk)
+![license](https://img.shields.io/npm/l/@langgraph-js/sdk)
+
+> The missing UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces
+
+## Why @langgraph-js/sdk?
+
+Building AI agent applications is complex, especially when you need to bridge the gap between LangGraph agents and interactive user interfaces. This SDK solves the critical challenges of frontend integration:
+
+- **Provides a complete UI integration layer** - no more complex custom code to handle tools, streaming, and state management
+- **Simplifies human-in-the-loop interactions** - easily incorporate user feedback within agent workflows
+- **Handles edge cases automatically** - interruptions, errors, token management and more
+- **Offers a rich set of UI components** - ready-to-use elements to display agent interactions
+
+[DOCS](https://langgraph-js.netlify.app)
+
+## Installation
+
+```bash
+# Using npm
+npm install @langgraph-js/sdk
+
+# Using yarn
+yarn add @langgraph-js/sdk
+
+# Using pnpm
+pnpm add @langgraph-js/sdk
+```
+
+## Key Features
+
+### Generative UI
+
+- ✅ Custom Tool Messages
+- ✅ Token Counter
+- ✅ Stop Graph Progress
+- ✅ Interrupt Handling
+- ✅ Error Handling
+- ✅ Spend Time Tracking
+- ✅ Time Persistence
+
+### Frontend Actions
+
+- ✅ Definition of Union Tools
+- ✅ Frontend Functions As Tools
+- ✅ Human-in-the-Loop Interaction
+- ✅ Interrupt Mode
+
+### Authorization
+
+- ✅ Cookie-Based Authentication
+- ✅ Custom Token Authentication
+
+### Persistence
+
+- ✅ Read History from LangGraph
+
+## Advanced Usage
+
+### Creating a Chat Store
+
+You can easily create a reactive store for your LangGraph client:
+
+```typescript
+import { createChatStore } from "@langgraph-js/sdk";
+
+export const globalChatStore = createChatStore(
+    "agent",
+    {
+        // Custom LangGraph backend interaction
+        apiUrl: "http://localhost:8123",
+        // Custom headers for authentication
+        defaultHeaders: JSON.parse(localStorage.getItem("code") || "{}"),
+        callerOptions: {
+            // Example for including cookies
+            // fetch(url: string, options: RequestInit) {
+            //     options.credentials = "include";
+            //     return fetch(url, options);
+            // },
+        },
+    },
+    {
+        onInit(client) {
+            client.tools.bindTools([]);
+        },
+    }
+);
+```
+
+### React Integration
+
+First, install the nanostores React integration:
+
+```bash
+pnpm i @nanostores/react
+```
+
+Then create a context provider for your chat:
+
+```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>;
+};
+```
+
+Use it in your components:
+
+```tsx
+export const MyChat = () => {
+    return (
+        <ChatProvider>
+            <ChatComp></ChatComp>
+        </ChatProvider>
+    );
+};
+
+function ChatComp() {
+    const chat = useChat();
+    // Use chat store methods and state here
+}
+```
+
+## Documentation
+
+For complete documentation, visit our [official docs](https://langgraph-js.netlify.app).
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the Apache-2.0 License.

package/dist/LangGraphClient.d.ts

@@ -21,6 +21,10 @@ interface AsyncCallerParams {
     fetch?: typeof fetch | ((...args: any[]) => any);
 }
 export type RenderMessage = Message & {
+    /** 对于 AIMessage 来说是节点名称，对于工具节点来说是工具名称 */
+    name?: string;
+    /** 工具节点的触发节点名称 */
+    node_name?: string;
     /** 工具入参 ，聚合而来*/
     tool_input?: string;
     additional_kwargs?: {
@@ -100,6 +104,7 @@ export declare class LangGraphClient extends Client {
     createThread({ threadId, }?: {
         threadId?: string;
     }): Promise<Thread<import("@langchain/langgraph-sdk").DefaultValues>>;
+    graphVisualize(): Promise<import("@langchain/langgraph-sdk").AssistantGraph>;
     /**
      * @zh 列出所有的 Thread。
      * @en Lists all Threads.

package/dist/LangGraphClient.js

@@ -55,7 +55,6 @@ export class LangGraphClient extends Client {
             this.availableAssistants = assistants;
             if (assistants.length > 0) {
                 if (agentName) {
-                    console.log("agentName", agentName);
                     this.currentAssistant = assistants.find((assistant) => assistant.graph_id === agentName) || null;
                     if (!this.currentAssistant) {
                         throw new Error("Agent not found: " + agentName);
@@ -90,6 +89,12 @@ export class LangGraphClient extends Client {
             throw error;
         }
     }
+    graphVisualize() {
+        var _a;
+        return this.assistants.getGraph((_a = this.currentAssistant) === null || _a === void 0 ? void 0 : _a.assistant_id, {
+            xray: true,
+        });
+    }
     /**
      * @zh 列出所有的 Thread。
      * @en Lists all Threads.
@@ -255,6 +260,7 @@ export class LangGraphClient extends Client {
                 }
                 if (parentMessage) {
                     message.usage_metadata = parentMessage.usage_metadata;
+                    message.node_name = parentMessage.name;
                 }
             }
             result.push(message);
@@ -466,12 +472,13 @@ export class LangGraphClient extends Client {
      */
     async reset() {
         var _a;
-        await this.initAssistant((_a = this.currentAssistant) === null || _a === void 0 ? void 0 : _a.name);
+        await this.initAssistant((_a = this.currentAssistant) === null || _a === void 0 ? void 0 : _a.graph_id);
         this.currentThread = null;
         this.graphState = {};
         this.graphMessages = [];
         this.streamingMessage = [];
         this.currentRun = undefined;
+        this.tools.reset();
         this.emitStreamingUpdate({
             type: "value",
             data: {

package/dist/ToolManager.d.ts

@@ -7,6 +7,7 @@ import { CallToolResult, UnionTool } from "./tool/createTool.js";
  */
 export declare class ToolManager {
     private tools;
+    private waitingMap;
     /**
      * @zh 注册一个工具。
      * @en Registers a tool.
@@ -37,6 +38,7 @@ export declare class ToolManager {
      * @en Clears all tools.
      */
     clearTools(): void;
+    reset(): void;
     /**
      * @zh 调用指定名称的工具。
      * @en Calls the tool with the specified name.
@@ -59,7 +61,6 @@ export declare class ToolManager {
             } | undefined;
         };
     }[];
-    private waitingMap;
     /**
      * @zh 标记指定 ID 的工具等待已完成，并传递结果。
      * @en Marks the tool waiting with the specified ID as completed and passes the result.

package/dist/ToolManager.js

@@ -54,6 +54,10 @@ export class ToolManager {
     clearTools() {
         this.tools.clear();
     }
+    reset() {
+        this.clearTools();
+        this.waitingMap.clear();
+    }
     /**
      * @zh 调用指定名称的工具。
      * @en Calls the tool with the specified name.

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

@@ -1,5 +1,5 @@
 import { LangGraphClient, LangGraphClientConfig, RenderMessage, SendMessageOptions } from "../LangGraphClient.js";
-import { Message, Thread } from "@langchain/langgraph-sdk";
+import { AssistantGraph, Message, Thread } from "@langchain/langgraph-sdk";
 /**
  * @zh 格式化日期对象为时间字符串。
  * @en Formats a Date object into a time string.
@@ -25,6 +25,8 @@ export declare const getHistoryContent: (thread: Thread) => string | any[];
  * @en Creates a state manager (store) for the chat interface.
  */
 export declare const createChatStore: (initClientName: string, config: LangGraphClientConfig, context?: {
+    showHistory?: boolean;
+    showGraph?: boolean;
     onInit?: (client: LangGraphClient) => void;
 }) => {
     data: {
@@ -40,9 +42,12 @@ export declare const createChatStore: (initClientName: string, config: LangGraph
             messages: Message[];
         }>[]> & object;
         currentChatId: import("nanostores").PreinitializedWritableAtom<string | null> & object;
+        showGraph: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+        graphVisualize: import("nanostores").PreinitializedWritableAtom<AssistantGraph | null> & object;
+        currentNodeName: import("nanostores").PreinitializedWritableAtom<string> & object;
     };
     mutations: {
-        initClient: () => Promise<void>;
+        initClient: () => Promise<LangGraphClient>;
         sendMessage: (message?: Message[], extraData?: SendMessageOptions) => Promise<void>;
         stopGeneration: () => void;
         toggleToolCollapse: (toolId: string) => void;
@@ -61,6 +66,8 @@ export declare const createChatStore: (initClientName: string, config: LangGraph
          * @en Sets the current Agent and reinitializes the client.
          */
         setCurrentAgent(agent: string): Promise<void>;
+        toggleGraphVisible(): void;
+        refreshGraph: () => Promise<void>;
         /**
          * @zh 创建一个新的聊天会话。
          * @en Creates a new chat session.

package/dist/ui-store/createChatStore.js

@@ -63,17 +63,30 @@ export const getHistoryContent = (thread) => {
  * @en Creates a state manager (store) for the chat interface.
  */
 export const createChatStore = (initClientName, config, context = {}) => {
+    var _a, _b;
     const client = atom(null);
     const renderMessages = atom([]);
     const userInput = atom("");
     const loading = atom(false);
     const collapsedTools = atom([]);
     const inChatError = atom(null);
-    const showHistory = atom(true);
+    const showHistory = atom((_a = context.showHistory) !== null && _a !== void 0 ? _a : false);
     const currentAgent = atom(initClientName);
     const currentChatId = atom(null);
+    const currentNodeName = atom("__start__");
+    // 显示 langgraph 可视化图
+    const showGraph = atom((_b = context.showGraph) !== null && _b !== void 0 ? _b : false);
+    const graphVisualize = atom(null);
+    const refreshGraph = async () => {
+        var _a;
+        if (showGraph.get())
+            graphVisualize.set((await ((_a = client.get()) === null || _a === void 0 ? void 0 : _a.graphVisualize())) || null);
+    };
     const updateUI = rafDebounce((newClient) => {
-        renderMessages.set(newClient.renderMessage);
+        const messages = newClient.renderMessage;
+        const lastMessage = messages[messages.length - 1];
+        currentNodeName.set((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.node_name) || (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.name) || "__start__");
+        renderMessages.set(messages);
     });
     /**
      * @zh 初始化 LangGraph 客户端。
@@ -90,6 +103,8 @@ export const createChatStore = (initClientName, config, context = {}) => {
         newClient.onStreamingUpdate((event) => {
             if (event.type === "thread" || event.type === "done") {
                 // console.log(event.data);
+                // 创建新流程时，默认为 __start__
+                currentNodeName.set("__start__");
                 // 创建新会话时，需要自动刷新历史面板
                 return refreshHistoryList();
             }
@@ -103,6 +118,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
         (_a = context.onInit) === null || _a === void 0 ? void 0 : _a.call(context, newClient);
         newClient.graphState = {};
         client.set(newClient);
+        if (showGraph.get())
+            refreshGraph();
+        return newClient;
     }
     /**
      * @zh 发送消息。
@@ -140,6 +158,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
      */
     const toggleHistoryVisible = () => {
         showHistory.set(!showHistory.get());
+        if (showHistory.get()) {
+            refreshHistoryList();
+        }
     };
     const historyList = atom([]);
     /**
@@ -178,6 +199,9 @@ export const createChatStore = (initClientName, config, context = {}) => {
             showHistory,
             historyList,
             currentChatId,
+            showGraph,
+            graphVisualize,
+            currentNodeName,
         },
         mutations: {
             initClient,
@@ -204,8 +228,18 @@ export const createChatStore = (initClientName, config, context = {}) => {
                     if (showHistory.get()) {
                         refreshHistoryList();
                     }
+                    if (showGraph.get()) {
+                        refreshGraph();
+                    }
                 });
             },
+            toggleGraphVisible() {
+                showGraph.set(!showGraph.get());
+                if (showGraph.get()) {
+                    refreshGraph();
+                }
+            },
+            refreshGraph,
             /**
              * @zh 创建一个新的聊天会话。
              * @en Creates a new chat session.
@@ -214,6 +248,7 @@ export const createChatStore = (initClientName, config, context = {}) => {
                 var _a;
                 (_a = client.get()) === null || _a === void 0 ? void 0 : _a.reset();
                 inChatError.set(null);
+                loading.set(false);
             },
             /**
              * @zh 切换到指定的历史聊天会话。
@@ -221,6 +256,8 @@ export const createChatStore = (initClientName, config, context = {}) => {
              */
             toHistoryChat(thread) {
                 var _a, _b;
+                inChatError.set(null);
+                loading.set(false);
                 (_a = client.get()) === null || _a === void 0 ? void 0 : _a.resetThread((_b = thread.metadata) === null || _b === void 0 ? void 0 : _b.graph_id, thread.thread_id);
             },
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "1.1.9",
+  "version": "1.3.0",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -29,12 +29,11 @@
     "url": "https://github.com/KonghaYao/YaoAgent/issues"
   },
   "dependencies": {
-    "@langchain/langgraph-sdk": "^0.0.76",
+    "@langchain/langgraph-sdk": "^0.0.77",
     "nanostores": "^1.0.1",
-    "zod": "^3.24.3",
-    "zod-to-json-schema": "^3.24.3"
+    "zod": "^3.25.17",
+    "zod-to-json-schema": "^3.24.5"
   },
-  "devDependencies": {},
   "scripts": {
     "build": "tsc",
     "prepublish": "pnpm build"