@langgraph-js/sdk 1.0.0 → 1.1.0

package/dist/tool/createTool.js

@@ -0,0 +1,60 @@
+import { actionParametersToJsonSchema, convertJsonSchemaToZodRawShape } from "./utils";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+/** 用于格式校验 */
+export const createTool = (tool) => {
+    return tool;
+};
+/** 提供一种兼容 copilotkit 的定义方式，简化定义形式
+ * 来自 copilotkit 的 frontend action
+ */
+export const createFETool = (tool) => {
+    return {
+        name: tool.name,
+        description: tool.description || "",
+        parameters: convertJsonSchemaToZodRawShape(actionParametersToJsonSchema(tool.parameters || [])),
+        returnDirect: tool.returnDirect,
+        callbackMessage: tool.callbackMessage,
+        async execute(args, context) {
+            try {
+                const result = await tool.handler?.(args, context);
+                if (typeof result === "string") {
+                    return [{ type: "text", text: result }];
+                }
+                return [{ type: "text", text: JSON.stringify(result) }];
+            }
+            catch (error) {
+                return [{ type: "text", text: `Error: ${error}` }];
+            }
+        },
+    };
+};
+///======= UnionTool 到 各种工具的辅助函数
+export const createJSONDefineTool = (tool) => {
+    return {
+        name: tool.name,
+        description: tool.description,
+        parameters: zodToJsonSchema(z.object(tool.parameters)),
+    };
+};
+export const createMCPTool = (tool) => {
+    return [
+        tool.name,
+        tool.description,
+        tool.parameters,
+        async (args) => {
+            try {
+                const result = await tool.execute(args);
+                if (typeof result === "string") {
+                    return { content: [{ type: "text", text: result }] };
+                }
+                return {
+                    content: result,
+                };
+            }
+            catch (error) {
+                return { content: [{ type: "text", text: `Error: ${error}` }], isError: true };
+            }
+        },
+    ];
+};

package/dist/tool/index.js

@@ -0,0 +1,2 @@
+export * from "./createTool";
+export * from "./copilotkit-actions";

package/dist/tool/utils.js

@@ -0,0 +1,119 @@
+/**
+ * copy and modify from copilotkit
+ * https://github.com/copilotkit/copilotkit
+ *
+ * MIT License
+ */
+import { z } from "zod";
+export function actionParametersToJsonSchema(actionParameters) {
+    // Create the parameters object based on the argumentAnnotations
+    let parameters = {};
+    for (let parameter of actionParameters || []) {
+        parameters[parameter.name] = convertAttribute(parameter);
+    }
+    let requiredParameterNames = [];
+    for (let arg of actionParameters || []) {
+        if (arg.required !== false) {
+            requiredParameterNames.push(arg.name);
+        }
+    }
+    // Create the ChatCompletionFunctions object
+    return {
+        type: "object",
+        properties: parameters,
+        required: requiredParameterNames,
+    };
+}
+function convertAttribute(attribute) {
+    switch (attribute.type) {
+        case "string":
+            return {
+                type: "string",
+                description: attribute.description,
+                ...(attribute.enum && { enum: attribute.enum }),
+            };
+        case "number":
+        case "boolean":
+            return {
+                type: attribute.type,
+                description: attribute.description,
+            };
+        case "object":
+        case "object[]":
+            const properties = attribute.attributes?.reduce((acc, attr) => {
+                acc[attr.name] = convertAttribute(attr);
+                return acc;
+            }, {});
+            const required = attribute.attributes?.filter((attr) => attr.required !== false).map((attr) => attr.name);
+            if (attribute.type === "object[]") {
+                return {
+                    type: "array",
+                    items: {
+                        type: "object",
+                        ...(properties && { properties }),
+                        ...(required && required.length > 0 && { required }),
+                    },
+                    description: attribute.description,
+                };
+            }
+            return {
+                type: "object",
+                description: attribute.description,
+                ...(properties && { properties }),
+                ...(required && required.length > 0 && { required }),
+            };
+        default:
+            // Handle arrays of primitive types and undefined attribute.type
+            if (attribute.type?.endsWith("[]")) {
+                const itemType = attribute.type.slice(0, -2);
+                return {
+                    type: "array",
+                    items: { type: itemType },
+                    description: attribute.description,
+                };
+            }
+            // Fallback for undefined type or any other unexpected type
+            return {
+                type: "string",
+                description: attribute.description,
+            };
+    }
+}
+export function convertJsonSchemaToZodRawShape(jsonSchema) {
+    const spec = {};
+    for (const [key, value] of Object.entries(jsonSchema.properties)) {
+        spec[key] = convertJsonSchemaToZodSchema(value, jsonSchema.required ? jsonSchema.required.includes(key) : false);
+    }
+    return spec;
+}
+export function convertJsonSchemaToZodSchema(jsonSchema, required) {
+    if (jsonSchema.type === "object") {
+        const spec = {};
+        if (!jsonSchema.properties || !Object.keys(jsonSchema.properties).length) {
+            return !required ? z.object(spec).optional() : z.object(spec);
+        }
+        for (const [key, value] of Object.entries(jsonSchema.properties)) {
+            spec[key] = convertJsonSchemaToZodSchema(value, jsonSchema.required ? jsonSchema.required.includes(key) : false);
+        }
+        let schema = z.object(spec).describe(jsonSchema.description);
+        return required ? schema : schema.optional();
+    }
+    else if (jsonSchema.type === "string") {
+        let schema = z.string().describe(jsonSchema.description);
+        return required ? schema : schema.optional();
+    }
+    else if (jsonSchema.type === "number") {
+        let schema = z.number().describe(jsonSchema.description);
+        return required ? schema : schema.optional();
+    }
+    else if (jsonSchema.type === "boolean") {
+        let schema = z.boolean().describe(jsonSchema.description);
+        return required ? schema : schema.optional();
+    }
+    else if (jsonSchema.type === "array") {
+        let itemSchema = convertJsonSchemaToZodSchema(jsonSchema.items, true);
+        let schema = z.array(itemSchema).describe(jsonSchema.description);
+        return required ? schema : schema.optional();
+    }
+    throw new Error("Invalid JSON schema");
+}

package/dist/ui-store/UnionStore.js

@@ -0,0 +1,9 @@
+export const useUnionStore = (store, useStore) => {
+    const data = Object.fromEntries(Object.entries(store.data).map(([key, value]) => {
+        return [key, useStore(value)];
+    }));
+    return {
+        ...data,
+        ...store.mutations,
+    };
+};

package/dist/ui-store/createChatStore.js

@@ -0,0 +1,137 @@
+import { atom } from "nanostores";
+import { LangGraphClient } from "../LangGraphClient";
+export const formatTime = (date) => {
+    return date.toLocaleTimeString("en-US");
+};
+export const formatTokens = (tokens) => {
+    return tokens.toLocaleString("en");
+};
+export const getMessageContent = (content) => {
+    if (typeof content === "string")
+        return content;
+    if (Array.isArray(content)) {
+        return content
+            .map((item) => {
+            if (typeof item === "string")
+                return item;
+            if (item.type === "text")
+                return item.text;
+            if (item.type === "image_url")
+                return `[图片]`;
+            return JSON.stringify(item);
+        })
+            .join("");
+    }
+    return JSON.stringify(content);
+};
+export const createChatStore = (initClientName, config, context = {}) => {
+    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 currentAgent = atom(initClientName);
+    const currentChatId = atom(null);
+    const initClient = async () => {
+        const newClient = new LangGraphClient(config);
+        await newClient.initAssistant(currentAgent.get());
+        // 不再需要创建，sendMessage 会自动创建
+        // await newClient.createThread();
+        newClient.onStreamingUpdate((event) => {
+            if (event.type === "thread" || event.type === "done") {
+                // console.log(event.data);
+                // 创建新会话时，需要自动刷新历史面板
+                return refreshHistoryList();
+            }
+            if (event.type === "error") {
+                loading.set(false);
+                inChatError.set(event.data?.message || "发生错误");
+            }
+            console.log(newClient.renderMessage);
+            renderMessages.set(newClient.renderMessage);
+        });
+        context.onInit?.(newClient);
+        // newClient.tools.bindTools([fileTool, askUserTool]);
+        newClient.graphState = {};
+        client.set(newClient);
+    };
+    const sendMessage = async () => {
+        if (!userInput.get().trim() || loading.get() || !client.get())
+            return;
+        loading.set(true);
+        inChatError.set(null);
+        await client.get()?.sendMessage(userInput.get());
+        userInput.set("");
+        loading.set(false);
+    };
+    const interruptMessage = () => {
+        client.get()?.cancelRun();
+    };
+    const toggleToolCollapse = (toolId) => {
+        const prev = collapsedTools.get();
+        collapsedTools.set(prev.includes(toolId) ? prev.filter((id) => id !== toolId) : [...prev, toolId]);
+    };
+    const toggleHistoryVisible = () => {
+        showHistory.set(!showHistory.get());
+    };
+    const historyList = atom([]);
+    const refreshHistoryList = async () => {
+        if (!client.get())
+            return;
+        try {
+            const response = await client.get()?.listThreads();
+            historyList.set(response || []);
+        }
+        catch (error) {
+            console.error("Failed to fetch threads:", error);
+        }
+    };
+    const addToHistory = (thread) => {
+        const prev = historyList.get();
+        historyList.set([thread, ...prev]);
+    };
+    return {
+        data: {
+            client,
+            renderMessages,
+            userInput,
+            loading,
+            inChatError,
+            currentAgent,
+            collapsedTools,
+            showHistory,
+            historyList,
+            currentChatId,
+        },
+        mutations: {
+            initClient,
+            sendMessage,
+            interruptMessage,
+            toggleToolCollapse,
+            toggleHistoryVisible,
+            refreshHistoryList,
+            addToHistory,
+            setUserInput(input) {
+                userInput.set(input);
+            },
+            setCurrentAgent(agent) {
+                currentAgent.set(agent);
+                return initClient().then(() => {
+                    refreshHistoryList();
+                });
+            },
+            createNewChat() {
+                client.get()?.reset();
+            },
+            toHistoryChat(thread) {
+                client.get()?.resetThread(thread.metadata?.graph_id, thread.thread_id);
+            },
+            async deleteHistoryChat(thread) {
+                await client.get()?.threads.delete(thread.thread_id);
+                await refreshHistoryList();
+            },
+        },
+    };
+};

package/dist/ui-store/index.js

@@ -0,0 +1,2 @@
+export * from "./createChatStore";
+export * from "./UnionStore";

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+    </head>
+    <body>
+        <div id="message"></div>
+    </body>
+    <script type="module" src="/ui/index.ts"></script>
+</html>

package/package.json

@@ -1,16 +1,44 @@
 {
   "name": "@langgraph-js/sdk",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "1.1.0",
+  "description": "The UI SDK for LangGraph - seamlessly integrate your AI agents with frontend interfaces",
+  "main": "src/index.ts",
+  "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "keywords": [
+    "langgraph",
+    "ui",
+    "sdk",
+    "frontend",
+    "ai",
+    "agents",
+    "langchain",
+    "react"
+  ],
+  "author": "LangGraph Team",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KonghaYao/YaoAgent.git"
+  },
+  "homepage": "https://langgraph-js.netlify.app",
+  "bugs": {
+    "url": "https://github.com/KonghaYao/YaoAgent/issues"
+  },
+  "dependencies": {
+    "@langchain/langgraph-sdk": "^0.0.74",
+    "nanostores": "^1.0.1",
+    "zod": "^3.24.3",
+    "zod-to-json-schema": "^3.24.3"
+  },
+  "devDependencies": {
+    "vite": "^6.3.4"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "prepublish": "pnpm build"
   }
 }