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

package/dist/ui/load.mjs

@@ -10,7 +10,7 @@ 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 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({
@@ -20,7 +20,12 @@ export async function registerGraphUi(defs, options) {
             platform: "browser",
             target: "es2020",
             jsx: "automatic",
-            external: ["react", "react-dom", "@langchain/langgraph-sdk"],
+            external: [
+                "react",
+                "react-dom",
+                "@langchain/langgraph-sdk",
+                "@langchain/langgraph-sdk/react-ui",
+            ],
             plugins: [
                 {
                     name: "entrypoint",
@@ -70,22 +75,21 @@ export async function registerGraphUi(defs, options) {
     return Object.fromEntries(result);
 }
 const api = new Hono();
-api.post("/ui/:agent", zValidator("json", z.object({ name: z.string(), shadowRootId: z.string() })), async (c) => {
+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");
-    const body = await c.req.valid("json");
+    const message = 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 messageName = JSON.stringify(message.name);
     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>`);
+        result.push(`<script src="http://${host}/ui/${agent}/${js.basename}" onload='__LGUI_${agent}.render(${messageName}, "{{shadowRootId}}")'></script>`);
     }
     return c.text(result.join("\n"), {
         headers: { "Content-Type": "text/html" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@langchain/langgraph-api",
-  "version": "0.0.14-experimental.0",
+  "version": "0.0.14-experimental.1",
   "type": "module",
   "engines": {
     "node": "^18.19.0 || >=20.16.0"