@langgraph-js/sdk 1.7.5 → 1.7.9

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

@@ -40,7 +40,6 @@ export type RenderMessage = Message & {
         input_tokens: number;
         output_tokens: number;
     };
-    tool_call_id?: string;
     response_metadata?: {
         create_time: string;
     };

package/dist/LangGraphClient.js

@@ -162,7 +162,7 @@ export class LangGraphClient extends Client {
         const closedToolCallIds = new Set();
         const result = [];
         const inputMessages = this.combineGraphMessagesWithStreamingMessages();
-        // console.log(inputMessages);
+        console.log(inputMessages);
         // 从后往前遍历，这样可以保证最新的消息在前面
         for (let i = inputMessages.length - 1; i >= 0; i--) {
             const message = this.cloneMessage(inputMessages[i]);
@@ -226,13 +226,17 @@ export class LangGraphClient extends Client {
         let lastMessage = null;
         for (const message of result) {
             const createTime = ((_a = message.response_metadata) === null || _a === void 0 ? void 0 : _a.create_time) || "";
-            // 工具必须要使用 tool_call_id 来保证一致性
-            message.unique_id = message.tool_call_id || message.id;
+            try {
+                // 用长度作为渲染 id，长度变了就要重新渲染
+                message.unique_id = message.id + JSON.stringify(message.content).length;
+            }
+            catch (e) {
+                message.unique_id = message.id;
+            }
             message.spend_time = new Date(createTime).getTime() - new Date(((_b = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.response_metadata) === null || _b === void 0 ? void 0 : _b.create_time) || createTime).getTime();
             if (!message.usage_metadata && ((_c = message.response_metadata) === null || _c === void 0 ? void 0 : _c.usage)) {
                 const usage = message.response_metadata.usage;
                 message.usage_metadata = {
-                    ...usage,
                     input_tokens: usage.prompt_tokens,
                     output_tokens: usage.completion_tokens,
                     total_tokens: usage.total_tokens,
@@ -384,7 +388,7 @@ export class LangGraphClient extends Client {
                     ...this.extraParams,
                     ...(extraParams || {}),
                     messages: messagesToSend,
-                    fe_tools: this.tools.toJSON(),
+                    fe_tools: this.tools.toJSON(this.currentAssistant.graph_id),
                 },
                 streamMode: ["messages", "values"],
                 streamSubgraphs: true,

package/dist/ToolManager.d.ts

@@ -52,7 +52,7 @@ export declare class ToolManager {
      * @zh 将所有工具转换为 JSON 定义格式。
      * @en Converts all tools to JSON definition format.
      */
-    toJSON(remote?: boolean): {
+    toJSON(graphId: string, remote?: boolean): {
         name: string;
         description: string;
         parameters: import("zod-to-json-schema").JsonSchema7Type & {

package/dist/ToolManager.js

@@ -76,9 +76,10 @@ export class ToolManager {
      * @zh 将所有工具转换为 JSON 定义格式。
      * @en Converts all tools to JSON definition format.
      */
-    toJSON(remote = true) {
+    toJSON(graphId, remote = true) {
         return Array.from(this.tools.values())
             .filter((i) => (remote ? !i.onlyRender : true))
+            .filter((i) => !i.allowGraph || i.allowGraph.includes(graphId))
             .map((i) => createJSONDefineTool(i));
     }
     /**

package/dist/tool/ToolUI.d.ts

@@ -1,15 +1,14 @@
 import { RenderMessage } from "../LangGraphClient.js";
 import { LangGraphClient } from "../LangGraphClient.js";
-export declare class ToolRenderData<I, D> {
+export declare class ToolRenderData<D> {
     message: RenderMessage;
     client: LangGraphClient;
     constructor(message: RenderMessage, client: LangGraphClient);
-    get state(): "idle" | "done" | "loading";
-    get input(): I | null;
+    get state(): "idle" | "done";
+    get input(): any;
     get output(): string;
-    getJSONOutput(): D;
+    getJSONOutput(): any;
     /** 如果解析失败，则返回 null */
-    getJSONOutputSafe(): D | null;
-    getInputRepaired(): I | null;
+    getJSONOutputSafe(): any;
     response(data: D): void;
 }

package/dist/tool/ToolUI.js

@@ -1,5 +1,4 @@
 import { getMessageContent } from "../ui-store/createChatStore.js";
-import { jsonrepair } from "jsonrepair";
 export class ToolRenderData {
     constructor(message, client) {
         this.message = message;
@@ -10,9 +9,6 @@ export class ToolRenderData {
         if (this.message.type === "tool" && ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.additional_kwargs) === null || _b === void 0 ? void 0 : _b.done)) {
             return "done";
         }
-        if (this.message.tool_input) {
-            return "loading";
-        }
         return "idle";
     }
     get input() {
@@ -38,14 +34,6 @@ export class ToolRenderData {
             return null;
         }
     }
-    getInputRepaired() {
-        try {
-            return JSON.parse(jsonrepair(this.message.tool_input || ""));
-        }
-        catch (e) {
-            return null;
-        }
-    }
     response(data) {
         this.client.doneFEToolWaiting(this.message.id, JSON.stringify(data));
     }

package/dist/tool/createTool.d.ts

@@ -11,10 +11,12 @@ export interface UnionTool<Args extends ZodRawShape, Child extends Object = Obje
     execute: ToolCallback<Args>;
     /** 工具执行成功后触发的附加消息 */
     callbackMessage?: (result: CallToolResult) => Message[];
-    render?: <D>(tool: ToolRenderData<z.objectOutputType<Args, ZodTypeAny>, D>) => Child;
+    render?: <D>(tool: ToolRenderData<D>) => Child;
     onlyRender?: boolean;
     /** 只允许指定的 agent 使用该工具，如果未指定，则所有 agent 都可以使用 */
     allowAgent?: string[];
+    /** 只允许指定的 Graph 使用该工具 */
+    allowGraph?: string[];
 }
 export type ToolCallback<Args extends ZodRawShape> = (args: z.objectOutputType<Args, ZodTypeAny>, context?: any) => CallToolResult | Promise<CallToolResult>;
 export type CallToolResult = string | {
@@ -54,10 +56,10 @@ export declare const createMCPTool: <Args extends ZodRawShape>(tool: UnionTool<A
 }>))[];
 export declare const createToolUI: <Args extends Parameter[] | [] = [], Child extends Object = {}>(tool: Action<Args> & {
     allowAgent?: string[];
-    render?: (tool: ToolRenderData<any, any>) => Child;
+    render?: (tool: ToolRenderData<any>) => Child;
     onlyRender?: boolean;
 }) => {
-    render: ((tool: ToolRenderData<any, any>) => Child) | undefined;
+    render: ((tool: ToolRenderData<any>) => Child) | undefined;
     onlyRender: boolean | undefined;
     name: string;
     description: string;
@@ -69,4 +71,6 @@ export declare const createToolUI: <Args extends Parameter[] | [] = [], Child ex
     callbackMessage?: (result: CallToolResult) => Message[];
     /** 只允许指定的 agent 使用该工具，如果未指定，则所有 agent 都可以使用 */
     allowAgent?: string[];
+    /** 只允许指定的 Graph 使用该工具 */
+    allowGraph?: string[];
 };

package/dist/ui-store/createChatStore.js

@@ -243,9 +243,6 @@ export const createChatStore = (initClientName, config, context = {}) => {
                     if (showHistory.get()) {
                         refreshHistoryList();
                     }
-                    if (showGraph.get()) {
-                        refreshGraph();
-                    }
                 });
             },
             toggleGraphVisible() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "1.7.5",
+  "version": "1.7.9",
   "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
   "main": "dist/index.js",
   "type": "module",
@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@langchain/langgraph-sdk": "^0.0.77",
-    "jsonrepair": "^3.12.0",
     "nanostores": "^1.0.1",
     "zod": "^3.25.17",
     "zod-to-json-schema": "^3.24.5"