@langchain/langgraph-api 0.0.13 → 0.0.14-experimental.0

package/dist/cli/spawn.d.mts

@@ -5,6 +5,7 @@ export declare function spawnServer(args: {
 }, context: {
     config: {
         graphs: Record<string, string>;
+        ui?: Record<string, string>;
     };
     env: NodeJS.ProcessEnv;
     hostUrl: string;

package/dist/cli/spawn.mjs

@@ -28,6 +28,7 @@ For production use, please use LangGraph Cloud.
             nWorkers: Number.parseInt(args.nJobsPerWorker, 10),
             host: args.host,
             graphs: context.config.graphs,
+            ui: context.config.ui,
             cwd: options.projectCwd,
         }),
     ], {

package/dist/graph/load.mjs

@@ -65,7 +65,9 @@ export async function getGraphSchema(graphId) {
             GRAPH_SCHEMA[graphId] = await runGraphSchemaWorker(GRAPH_SPEC[graphId]);
         }
         catch (error) {
-            throw new Error(`Failed to extract schema for "${graphId}": ${error}`);
+            throw new Error(`Failed to extract schema for "${graphId}"`, {
+                cause: error,
+            });
         }
     }
     return GRAPH_SCHEMA[graphId];

package/dist/server.mjs

@@ -6,6 +6,7 @@ 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";
@@ -31,6 +32,7 @@ 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(),
@@ -49,6 +51,7 @@ export const StartServerSchema = z.object({
     host: z.string(),
     cwd: z.string(),
     graphs: z.record(z.string()),
+    ui: z.record(z.string()).optional(),
 });
 export async function startServer(options) {
     logger.info(`Initializing storage...`);
@@ -63,6 +66,10 @@ export async function startServer(options) {
     };
     logger.info(`Registering graphs from ${options.cwd}`);
     await registerFromEnv(options.graphs, { cwd: options.cwd });
+    if (options.ui) {
+        logger.info(`Registering UI from ${options.cwd}`);
+        await registerGraphUi(options.ui, { cwd: options.cwd });
+    }
     logger.info(`Starting ${options.nWorkers} workers`);
     for (let i = 0; i < options.nWorkers; i++)
         queue();

package/dist/ui/load.mjs

@@ -0,0 +1,104 @@
+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";
+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.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"],
+            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}`,
+        });
+        await ctx.watch();
+        return [agentName, ctx];
+    }));
+    return Object.fromEntries(result);
+}
+const api = new Hono();
+api.post("/ui/:agent", zValidator("json", z.object({ name: z.string(), shadowRootId: z.string() })), async (c) => {
+    const agent = c.req.param("agent");
+    const host = c.req.header("host");
+    const body = await c.req.valid("json");
+    const files = GRAPH_UI[agent];
+    if (!files?.length)
+        return c.text(`UI not found for agent "${agent}"`, 404);
+    const strName = JSON.stringify(body.name);
+    const strRootId = JSON.stringify(body.shadowRootId);
+    const result = [];
+    for (const css of files.filter((i) => path.extname(i.basename) === ".css")) {
+        result.push(`<link rel="stylesheet" href="http://${host}/ui/${agent}/${css.basename}" />`);
+    }
+    const js = files.find((i) => path.extname(i.basename) === ".js");
+    if (js) {
+        result.push(`<script src="http://${host}/ui/${agent}/${js.basename}" onload='__LGUI_${agent}.render(${strName}, ${strRootId})'></script>`);
+    }
+    return c.text(result.join("\n"), {
+        headers: { "Content-Type": "text/html" },
+    });
+});
+api.get("/ui/:agent/:basename", async (c) => {
+    const agent = c.req.param("agent");
+    const basename = c.req.param("basename");
+    const file = GRAPH_UI[agent]?.find((item) => item.basename === basename);
+    if (!file)
+        return c.text("File not found", 404);
+    return c.body(file.contents, {
+        headers: { "Content-Type": getMimeType(file.basename) ?? "text/plain" },
+    });
+});
+export default api;

package/dist/ui/render.mts

@@ -0,0 +1,27 @@
+import type { ComponentClass, FunctionComponent } from "react";
+
+const STORE_SYMBOL = Symbol.for("LGUI_EXT_STORE");
+
+declare global {
+  interface Window {
+    [STORE_SYMBOL]: {
+      respond: (
+        shadowRootId: string,
+        component: FunctionComponent | ComponentClass,
+        renderEl: HTMLElement,
+      ) => void;
+    };
+  }
+}
+
+// @ts-ignore
+function createRenderer(
+  components: Record<string, FunctionComponent | ComponentClass>,
+) {
+  return (name: string, shadowRootId: string) => {
+    const root = document.getElementById(shadowRootId)!.shadowRoot;
+    const renderEl = document.createElement("div");
+    root!.appendChild(renderEl);
+    window[STORE_SYMBOL].respond(shadowRootId, components[name], renderEl);
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-api",
-  "version": "0.0.13",
+  "version": "0.0.14-experimental.0",
   "type": "module",
   "engines": {
     "node": "^18.19.0 || >=20.16.0"
@@ -29,6 +29,8 @@
     "stacktrace-parser": "^0.1.10",
     "superjson": "^2.2.2",
     "tsx": "^4.19.2",
+    "esbuild": "^0.23.1",
+    "esbuild-plugin-tailwindcss": "^2.0.1",
     "uuid": "^10.0.0",
     "winston": "^3.17.0",
     "winston-console-format": "^1.0.8",
@@ -43,6 +45,8 @@
   "devDependencies": {
     "@langchain/langgraph-sdk": "^0.0.33",
     "@types/babel__code-frame": "^7.0.6",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/node": "^22.2.0",
     "@types/uuid": "^10.0.0",
     "postgres": "^3.4.5",