fix(api): support gen UI components with hyphens (#1360)

.changeset/little-tips-check.md

@@ -0,0 +1,7 @@
+---
+"@langchain/langgraph-api": patch
+"@langchain/langgraph-cli": patch
+"@langchain/langgraph-ui": patch
+---
+
+Support gen UI components namespaced with a hyphen

libs/langgraph-api/src/ui/load.mts

@@ -44,10 +44,11 @@ api.post(
       );
     }
 
+    const stableName = agent.replace(/[^a-zA-Z0-9]/g, "_");
     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(${messageName}, "{{shadowRootId}}")'></script>`
+        `<script src="http://${host}/ui/${agent}/${js.basename}" onload='__LGUI_${stableName}.render(${messageName}, "{{shadowRootId}}")'></script>`
       );
     }
 

libs/langgraph-api/tests/api.test.mts

@@ -2532,9 +2532,12 @@ it("dynamic graph", async () => {
 });
 
 it("generative ui", async () => {
-  const ui = await client["~ui"].getComponent("agent", "weather-component");
+  const ui = await client["~ui"].getComponent(
+    "agent-alias",
+    "weather-component"
+  );
   expect(ui).toContain(
-    `<script src="http://localhost:2024/ui/agent/entrypoint.js" onload='__LGUI_agent.render("weather-component", "{{shadowRootId}}")'></script>`
+    `<script src="http://localhost:2024/ui/agent-alias/entrypoint.js" onload='__LGUI_agent_alias.render("weather-component", "{{shadowRootId}}")'></script>`
   );
 
   const match = /src="(?<src>[^"]+)"/.exec(ui);

libs/langgraph-api/tests/graphs/langgraph.json

@@ -10,7 +10,7 @@
     "agent_simple": "./agent_simple.mts:graph"
   },
   "ui": {
-    "agent": "./agent/ui.tsx"
+    "agent-alias": "./agent/ui.tsx"
   },
   "http": {
     "app": "./http.mts:app"

libs/langgraph-ui/src/bundler.mts

@@ -102,7 +102,7 @@ function setup(
       ...(args.config?.shared ?? []),
     ],
     plugins: [tailwind(), entrypointPlugin(args), registerPlugin(onResult)],
-    globalName: `__LGUI_${agentName}`,
+    globalName: `__LGUI_${agentName.replace(/[^a-zA-Z0-9]/g, "_")}`,
   };
 }