feat(ai-studio): public AI workflow demo - Visualize node, agent web search, richer templates

apps/ai-studio/.env.example

@@ -0,0 +1,6 @@
+# Base URL of the reference backend the demo talks to.
+VITE_BACKEND_URL=http://127.0.0.1:3001
+# Cloudflare Turnstile site key (public). Leave empty to run the demo without
+# bot protection (local dev). When set, the Run button attaches a Turnstile
+# token that the backend verifies before executing a workflow.
+VITE_TURNSTILE_SITE_KEY=

apps/ai-studio/package.json

@@ -20,9 +20,15 @@
     "@workflow-builder/types": "workspace:*",
     "@xyflow/react": "catalog:",
     "clsx": "^2.1.1",
+    "html-to-image": "1.11.11",
     "immer": "^10.1.1",
+    "mermaid": "^11.15.0",
     "react": "^19.1.0",
     "react-dom": "catalog:",
+    "react-i18next": "^15.4.1",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.9.0",
+    "remark-gfm": "^4.0.1",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

apps/ai-studio/src/app/app.tsx

@@ -1,28 +1,40 @@
 import { WorkflowBuilder } from '@workflowbuilder/sdk';
 
+import './node-overrides.css';
 import '@workflowbuilder/sdk/style.css';
 
+import logoDark from '../assets/workflow-builder-logo-white.svg';
+import logoLight from '../assets/workflow-builder-logo.svg';
 import { AiStudioControls } from '../components/controls/ai-studio-controls';
+import { DisclaimerModal } from '../components/disclaimer/disclaimer-modal';
 import { ExecutionHighlighting } from '../components/execution/highlighting';
 import { ExecutionLogPanel } from '../components/execution/log-panel';
-import { ExecutionNodeDetail } from '../components/execution/node-detail';
 import { aiStudioTemplates } from '../data/ai-studio-templates';
 import { aiStudioNodeTypes } from '../data/node-types';
+import { supportTriageFlow } from '../data/support-triage-flow';
 import { plugin as aiStudioFeaturesPlugin } from '../plugin';
+import { plugin as undoRedoPlugin } from '../plugins/undo-redo/plugin-exports';
+
+const flagship = supportTriageFlow.value;
 
 export function App() {
   return (
     <WorkflowBuilder.Root
-      name="ai-studio"
+      name={flagship.name}
+      logo={{ light: logoLight, dark: logoDark }}
+      logoHref="https://workflowbuilder.io"
+      layoutDirection={flagship.layoutDirection}
+      initialNodes={flagship.diagram.nodes}
+      initialEdges={flagship.diagram.edges}
       nodeTypes={aiStudioNodeTypes}
       diagramTemplates={aiStudioTemplates}
-      plugins={[aiStudioFeaturesPlugin]}
+      plugins={[aiStudioFeaturesPlugin, undoRedoPlugin]}
     >
       <WorkflowBuilder.DefaultLayout />
       <AiStudioControls />
       <ExecutionLogPanel />
-      <ExecutionNodeDetail />
       <ExecutionHighlighting />
+      <DisclaimerModal />
     </WorkflowBuilder.Root>
   );
 }

apps/ai-studio/src/app/node-overrides.css

@@ -0,0 +1,3 @@
+[class^='_json-form-container_'] textarea {
+  font-family: ui-monospace, monospace;
+}