fix(ui): use feature detection for crypto.randomUUID to support HTTP deployments

helm/kagent/templates/ui-deployment.yaml

@@ -58,6 +58,8 @@ spec:
           env:
             - name: NEXT_PUBLIC_BACKEND_URL
               value: {{ .Values.ui.publicBackendUrl | quote }}
+            - name: NEXT_PUBLIC_ALLOW_HTTP
+              value: {{ .Values.ui.allowHttp | default false | quote }}
             - name: BACKEND_INTERNAL_URL
               value: {{ .Values.ui.backendInternalUrl | default (include "kagent.controllerInternalHttpApiBase" .) | quote }}
             {{- if .Values.ui.auth }}

helm/kagent/values.yaml

@@ -249,6 +249,11 @@ controller:
 
 ui:
   replicas: 1
+  # -- Allow the UI to run over plain HTTP (non-HTTPS).
+  # When false (default), the UI uses crypto.randomUUID() which requires a Secure Context (HTTPS).
+  # Set to true for deployments served over plain HTTP (e.g. internal clusters without TLS).
+  # This switches to a uuid package fallback that uses crypto.getRandomValues() instead.
+  allowHttp: false
   image:
     registry: ""
     repository: kagent-dev/kagent/ui

ui/src/app/agents/new/page.tsx

@@ -8,6 +8,7 @@ import { formAgentTypeFromApi, formUsesByoSections, formUsesDeclarativeSections
 import { ModelConfig, AgentType, ContextConfig, type DeclarativeRuntime } from "@/types";
 import { SystemPromptSection } from "@/components/create/SystemPromptSection";
 import { newPromptSourceRow, type PromptSourceRow } from "@/lib/promptSourceRow";
+import { generateId } from "@/lib/utils";
 import { ModelSelectionSection } from "@/components/create/ModelSelectionSection";
 import { ToolsSection } from "@/components/create/ToolsSection";
 import { MemorySection } from "@/components/create/MemorySection";
@@ -162,7 +163,7 @@ function AgentPageContent({ isEditMode, agentName, agentNamespace }: AgentPageCo
       return {
         ...prev,
         errors: { ...prev.errors, promptSources: undefined },
-        promptSourceRows: [...nonEmpty, { id: crypto.randomUUID(), name: t, alias: "" }],
+        promptSourceRows: [...nonEmpty, { id: generateId(), name: t, alias: "" }],
       };
     });
   }, []);
@@ -207,7 +208,7 @@ function AgentPageContent({ isEditMode, agentName, agentNamespace }: AgentPageCo
                 const pt = decl?.promptTemplate;
                 const srcRows: PromptSourceRow[] =
                   pt?.dataSources?.map((ds) => ({
-                    id: crypto.randomUUID(),
+                    id: generateId(),
                     name: ds.name || "",
                     alias: ds.alias || "",
                   })) ?? [newPromptSourceRow()];

ui/src/components/prompts/FragmentEntriesEditor.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Plus, Trash2 } from "lucide-react";
+import { generateId } from "@/lib/utils";
 
 export interface FragmentRow {
   id: string;
@@ -16,10 +17,10 @@ export interface FragmentRow {
 export function rowsFromData(data: Record<string, string>): FragmentRow[] {
   const keys = Object.keys(data);
   if (keys.length === 0) {
-    return [{ id: crypto.randomUUID(), key: "", value: "" }];
+    return [{ id: generateId(), key: "", value: "" }];
   }
   return keys.map((key) => ({
-    id: crypto.randomUUID(),
+    id: generateId(),
     key,
     value: data[key] ?? "",
   }));
@@ -51,11 +52,11 @@ export function FragmentEntriesEditor({
 
   const removeRow = (id: string) => {
     const next = rows.filter((r) => r.id !== id);
-    onRowsChange(next.length > 0 ? next : [{ id: crypto.randomUUID(), key: "", value: "" }]);
+    onRowsChange(next.length > 0 ? next : [{ id: generateId(), key: "", value: "" }]);
   };
 
   const addRow = () => {
-    onRowsChange([...rows, { id: crypto.randomUUID(), key: "", value: "" }]);
+    onRowsChange([...rows, { id: generateId(), key: "", value: "" }]);
   };
 
   return (

ui/src/lib/openClawSandboxForm.ts

@@ -1,5 +1,6 @@
 import type { ValueSource } from "@/types";
 import { k8sRefUtils } from "@/lib/k8sUtils";
+import { generateId } from "@/lib/utils";
 
 /** Sandbox CR backend; UI always uses openclaw for now. */
 const SANDBOX_BACKEND_OPENCLAW = "openclaw" as const;
@@ -26,7 +27,7 @@ export interface OpenClawChannelRow {
 
 export function newOpenClawChannelRow(): OpenClawChannelRow {
   return {
-    id: crypto.randomUUID(),
+    id: generateId(),
     name: "",
     channelType: "telegram",
     botTokenSource: "inline",

ui/src/lib/promptSourceRow.ts

@@ -1,9 +1,11 @@
+import { generateId } from "@/lib/utils";
+
 export interface PromptSourceRow {
   id: string;
   name: string;
   alias: string;
 }
 
 export function newPromptSourceRow(): PromptSourceRow {
-  return { id: crypto.randomUUID(), name: "", alias: "" };
+  return { id: generateId(), name: "", alias: "" };
 }

ui/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { v4 as uuidv4 } from "uuid";
 import { Message as A2AMessage, Task as A2ATask, TaskStatusUpdateEvent as A2ATaskStatusUpdateEvent, TaskArtifactUpdateEvent as A2ATaskArtifactUpdateEvent } from "@a2a-js/sdk";
 
 export function cn(...inputs: ClassValue[]) {
@@ -36,6 +37,13 @@ export function getBackendUrl() {
   return "http://localhost:8083/api";
 }
 
+export function generateId(): string {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return uuidv4();
+}
+
 export function getRelativeTimeString(date: string | number | Date): string {
   const now = new Date();
   const past = new Date(date);