@langchain/langgraph-ui 0.0.19

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 LangChain
+
+Permission is hereby granted, free
+of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# LangGraph.js UI
+
+Contains the logic for creating Generative UI bundles served via LangGraph API.

package/dist/bundler.d.mts

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

package/dist/bundler.mjs

@@ -0,0 +1,86 @@
+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(paths) {
+    const fullPath = path.resolve(paths.cwd, paths.userPath);
+    let relativeUiPath = path
+        .relative(paths.cwd, fullPath)
+        .replaceAll(path.sep, "/");
+    if (relativeUiPath.startsWith("../")) {
+        throw new Error(`UI path must be relative to the project root. Received: "${relativeUiPath}"`);
+    }
+    if (!relativeUiPath.startsWith("./"))
+        relativeUiPath = `./${relativeUiPath}`;
+    return {
+        name: "entrypoint",
+        setup(build) {
+            build.onResolve({ filter: /^entrypoint$/ }, () => ({
+                path: path.resolve(path.dirname(fullPath), "ui.entrypoint.tsx"),
+                namespace: "entrypoint-ns",
+            }));
+            build.onLoad({ filter: /.*/, namespace: "entrypoint-ns" }, () => ({
+                resolveDir: paths.cwd,
+                contents: [
+                    `import ui from "${relativeUiPath}"`,
+                    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, args, onResult) {
+    return {
+        write: false,
+        outdir: path.resolve(args.cwd, "dist"),
+        entryPoints: ["entrypoint"],
+        bundle: true,
+        platform: "browser",
+        target: "es2020",
+        jsx: "automatic",
+        external: [
+            "react",
+            "react-dom",
+            "@langchain/langgraph-sdk",
+            "@langchain/langgraph-sdk/react-ui",
+            ...(args.config?.shared ?? []),
+        ],
+        plugins: [tailwind(), entrypointPlugin(args), registerPlugin(onResult)],
+        globalName: `__LGUI_${agentName}`,
+    };
+}
+export async function build(agentName, args) {
+    let results = [];
+    await runBuild(setup(agentName, args, (result) => (results = result)));
+    return results;
+}
+export async function watch(agentName, args, onResult) {
+    const ctx = await runContext(setup(agentName, args, onResult));
+    await ctx.watch();
+    return ctx;
+}

package/dist/cli.mjs

@@ -0,0 +1,32 @@
+import { watch } from "./bundler.mjs";
+import * as fs from "node:fs/promises";
+import * as url from "node:url";
+import * as path from "node:path";
+import { z } from "zod";
+const cmd = process.argv.at(-1);
+if (cmd !== "dev")
+    throw new Error(`Invalid command "${cmd}"`);
+const cwd = process.cwd();
+const defs = z
+    .record(z.string(), z.string())
+    .parse(JSON.parse(process.env.LANGGRAPH_UI || "{}"));
+const config = z
+    .object({ shared: z.array(z.string()).optional() })
+    .parse(JSON.parse(process.env.LANGGRAPH_UI_CONFIG || "{}"));
+const UI_DIR = url.fileURLToPath(new URL("../../ui", import.meta.url));
+// clear the files in the ui directory
+await fs.rm(UI_DIR, { recursive: true, force: true });
+// watch the files in the ui directory
+await Promise.all(Object.entries(defs).map(async ([graphId, userPath]) => {
+    const folder = path.resolve(UI_DIR, graphId);
+    await fs.mkdir(folder, { recursive: true });
+    let promiseSeq = Promise.resolve();
+    await watch(graphId, { cwd, userPath, config }, (files) => {
+        promiseSeq = promiseSeq.then(async () => {
+            await Promise.all(files.map(async ({ basename, contents }) => {
+                const target = path.join(folder, basename);
+                await fs.writeFile(target, contents);
+            }));
+        }, (e) => console.error(e));
+    });
+}));

package/dist/index.d.mts

@@ -0,0 +1 @@
+export { build, watch } from "./bundler.mjs";

package/dist/index.mjs

@@ -0,0 +1 @@
+export { build, watch } from "./bundler.mjs";

package/dist/render.template.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

@@ -0,0 +1,40 @@
+{
+  "name": "@langchain/langgraph-ui",
+  "version": "0.0.19",
+  "type": "module",
+  "engines": {
+    "node": "^18.19.0 || >=20.16.0"
+  },
+  "license": "MIT",
+  "main": "./dist/index.mjs",
+  "bin": {
+    "langgraphjs-ui": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:langchain-ai/langgraphjs-api.git"
+  },
+  "dependencies": {
+    "zod": "^3.23.8",
+    "esbuild": "^0.25.0",
+    "esbuild-plugin-tailwindcss": "^2.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/node": "^22.2.0",
+    "@types/react-dom": "^19.0.3",
+    "prettier": "^3.3.3",
+    "vitest": "^3.0.5",
+    "typescript": "^5.5.4"
+  },
+  "scripts": {
+    "clean": "npx -y bun scripts/clean.mjs",
+    "build": "npx -y bun scripts/build.mjs",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}