@langchain/langgraph-api 0.0.14-experimental.1 → 0.0.14

package/dist/server.mjs

@@ -6,7 +6,6 @@ import runs from "./api/runs.mjs";
 import threads from "./api/threads.mjs";
 import assistants from "./api/assistants.mjs";
 import store from "./api/store.mjs";
-import ui, { registerGraphUi } from "./ui/load.mjs";
 import { truncate, conn as opsConn } from "./storage/ops.mjs";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod";
@@ -32,7 +31,6 @@ app.route("/", assistants);
 app.route("/", runs);
 app.route("/", threads);
 app.route("/", store);
-app.route("/", ui);
 app.get("/info", (c) => c.json({ flags: { assistants: true, crons: false } }));
 app.post("/internal/truncate", zValidator("json", z.object({
     runs: z.boolean().optional(),
@@ -67,6 +65,13 @@ export async function startServer(options) {
     logger.info(`Registering graphs from ${options.cwd}`);
     await registerFromEnv(options.graphs, { cwd: options.cwd });
     if (options.ui) {
+        if (process.versions.node.startsWith("18")) {
+            // Not supported due to weird interop issues with `@tailwindcss/postcss` and `tsx`
+            throw new Error("Built-in UI is not supported in Node.js 18.x. Please upgrade to Node.js 20.16 or later.");
+        }
+        logger.info(`Loading UI`);
+        const { api, registerGraphUi } = await import("./ui/load.mjs");
+        app.route("/", api);
         logger.info(`Registering UI from ${options.cwd}`);
         await registerGraphUi(options.ui, { cwd: options.cwd });
     }

package/dist/ui/bundler.d.mts

@@ -0,0 +1,9 @@
+import { type BuildOptions } from "esbuild";
+export declare function build(agentName: string, uiUserPath: string): Promise<{
+    basename: string;
+    contents: Uint8Array;
+}[]>;
+export declare function watch(agentName: string, uiUserPath: string, onResult: (result: {
+    basename: string;
+    contents: Uint8Array;
+}[]) => void): Promise<import("esbuild").BuildContext<BuildOptions>>;

package/dist/ui/bundler.mjs

@@ -0,0 +1,81 @@
+import * as path from "node:path";
+import * as url from "node:url";
+import * as fs from "node:fs";
+import { build as runBuild, context as runContext, } from "esbuild";
+import tailwind from "esbuild-plugin-tailwindcss";
+const renderTemplate = await fs.promises.readFile(url.fileURLToPath(new URL("./render.template.mts", import.meta.url)), "utf-8");
+function entrypointPlugin(uiUserPath) {
+    const projectDir = path.dirname(uiUserPath);
+    return {
+        name: "entrypoint",
+        setup(build) {
+            build.onResolve({ filter: /^entrypoint$/ }, (args) => ({
+                path: path.resolve(projectDir, "ui.entrypoint.tsx"),
+                namespace: "entrypoint-ns",
+            }));
+            build.onLoad({ filter: /.*/, namespace: "entrypoint-ns" }, () => ({
+                resolveDir: projectDir,
+                contents: [
+                    `import ui from "${uiUserPath}"`,
+                    renderTemplate,
+                    `export const render = createRenderer(ui)`,
+                ].join("\n"),
+                loader: "tsx",
+            }));
+        },
+    };
+}
+function registerPlugin(onEnd) {
+    const textEncoder = new TextEncoder();
+    return {
+        name: "require-transform",
+        setup(build) {
+            build.onEnd(async (result) => {
+                const newResult = [];
+                for (const item of result.outputFiles ?? []) {
+                    let basename = path.basename(item.path);
+                    let contents = item.contents;
+                    if (basename === "entrypoint.js") {
+                        contents = textEncoder.encode(item.text.replaceAll(`typeof require !== "undefined" ? require`, `typeof globalThis[Symbol.for("LGUI_REQUIRE")] !== "undefined" ? globalThis[Symbol.for("LGUI_REQUIRE")]`));
+                    }
+                    newResult.push({ basename, contents });
+                }
+                if (newResult.length > 0)
+                    onEnd(newResult);
+            });
+        },
+    };
+}
+function setup(agentName, uiUserPath, onResult) {
+    return {
+        write: false,
+        outdir: path.resolve(path.dirname(uiUserPath), "dist"),
+        entryPoints: ["entrypoint"],
+        bundle: true,
+        platform: "browser",
+        target: "es2020",
+        jsx: "automatic",
+        external: [
+            "react",
+            "react-dom",
+            "@langchain/langgraph-sdk",
+            "@langchain/langgraph-sdk/react-ui",
+        ],
+        plugins: [
+            tailwind(),
+            entrypointPlugin(uiUserPath),
+            registerPlugin(onResult),
+        ],
+        globalName: `__LGUI_${agentName}`,
+    };
+}
+export async function build(agentName, uiUserPath) {
+    let results = [];
+    await runBuild(setup(agentName, uiUserPath, (result) => (results = result)));
+    return results;
+}
+export async function watch(agentName, uiUserPath, onResult) {
+    const ctx = await runContext(setup(agentName, uiUserPath, onResult));
+    await ctx.watch();
+    return ctx;
+}

package/dist/ui/load.mjs

@@ -1,80 +1,21 @@
-import * as path from "node:path";
-import * as url from "node:url";
-import * as fs from "node:fs";
 import { z } from "zod";
 import { Hono } from "hono";
 import { getMimeType } from "hono/utils/mime";
 import { zValidator } from "@hono/zod-validator";
-import { context } from "esbuild";
-import tailwind from "esbuild-plugin-tailwindcss";
+import * as path from "node:path";
+import { watch } from "./bundler.mjs";
 const GRAPH_UI = {};
 export async function registerGraphUi(defs, options) {
-    const textEncoder = new TextEncoder();
-    const renderTemplate = await fs.promises.readFile(path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), "./render.template.mts"), "utf-8");
-    const projectDir = options.cwd;
     const result = await Promise.all(Object.entries(defs).map(async ([agentName, uiUserPath]) => {
-        const ctx = await context({
-            entryPoints: ["entrypoint"],
-            outdir: path.resolve(projectDir, "dist"),
-            bundle: true,
-            platform: "browser",
-            target: "es2020",
-            jsx: "automatic",
-            external: [
-                "react",
-                "react-dom",
-                "@langchain/langgraph-sdk",
-                "@langchain/langgraph-sdk/react-ui",
-            ],
-            plugins: [
-                {
-                    name: "entrypoint",
-                    setup(build) {
-                        build.onResolve({ filter: /^entrypoint$/ }, (args) => ({
-                            path: path.resolve(projectDir, "ui.entrypoint.tsx"),
-                            namespace: "entrypoint-ns",
-                        }));
-                        build.onLoad({ filter: /.*/, namespace: "entrypoint-ns" }, () => ({
-                            resolveDir: projectDir,
-                            contents: [
-                                `import ui from "${uiUserPath}"`,
-                                renderTemplate,
-                                `export const render = createRenderer(ui)`,
-                            ].join("\n"),
-                            loader: "tsx",
-                        }));
-                    },
-                },
-                tailwind(),
-                {
-                    name: "require-transform",
-                    setup(build) {
-                        build.onEnd(async (result) => {
-                            const newResult = [];
-                            for (const item of result.outputFiles ?? []) {
-                                let basename = path.basename(item.path);
-                                let contents = item.contents;
-                                if (basename === "entrypoint.js") {
-                                    contents = textEncoder.encode(item.text.replaceAll(`typeof require !== "undefined" ? require`, `typeof globalThis[Symbol.for("LGUI_REQUIRE")] !== "undefined" ? globalThis[Symbol.for("LGUI_REQUIRE")]`));
-                                }
-                                newResult.push({ basename, contents });
-                            }
-                            if (newResult.length > 0) {
-                                GRAPH_UI[agentName] = newResult;
-                            }
-                        });
-                    },
-                },
-            ],
-            write: false,
-            globalName: `__LGUI_${agentName}`,
+        const userPath = path.resolve(options.cwd, uiUserPath);
+        const ctx = await watch(agentName, userPath, (result) => {
+            GRAPH_UI[agentName] = result;
         });
-        await ctx.watch();
         return [agentName, ctx];
     }));
     return Object.fromEntries(result);
 }
-const api = new Hono();
+export const api = new Hono();
 api.post("/ui/:agent", zValidator("json", z.object({ name: z.string() })), async (c) => {
     const agent = c.req.param("agent");
     const host = c.req.header("host");
@@ -105,4 +46,3 @@ api.get("/ui/:agent/:basename", async (c) => {
         headers: { "Content-Type": getMimeType(file.basename) ?? "text/plain" },
     });
 });
-export default api;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-api",
-  "version": "0.0.14-experimental.1",
+  "version": "0.0.14",
   "type": "module",
   "engines": {
     "node": "^18.19.0 || >=20.16.0"
@@ -10,6 +10,16 @@
   "files": [
     "dist/"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/cli/spawn.d.ts",
+      "default": "./dist/cli/spawn.mjs"
+    },
+    "./ui/bundler": {
+      "types": "./dist/ui/bundler.d.ts",
+      "default": "./dist/ui/bundler.mjs"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:langchain-ai/langgraphjs-api.git"
@@ -28,8 +38,8 @@
     "open": "^10.1.0",
     "stacktrace-parser": "^0.1.10",
     "superjson": "^2.2.2",
-    "tsx": "^4.19.2",
-    "esbuild": "^0.23.1",
+    "tsx": "^4.19.3",
+    "esbuild": "^0.25.0",
     "esbuild-plugin-tailwindcss": "^2.0.1",
     "uuid": "^10.0.0",
     "winston": "^3.17.0",