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,14 @@
     "@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-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,42 @@
 import { WorkflowBuilder } from '@workflowbuilder/sdk';
 
+import './brand-override.css';
 import '@workflowbuilder/sdk/style.css';
 
+import { BrandLogo } from '../components/brand/brand-logo';
 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';
 
+// Auto-load a relatable, runnable workflow on first visit instead of greeting
+// the visitor with a blank canvas. Passing non-empty initial nodes/edges makes
+// the SDK skip the welcome picker; a returning visitor's saved diagram still wins.
+const flagship = supportTriageFlow.value;
+
 export function App() {
   return (
     <WorkflowBuilder.Root
-      name="ai-studio"
+      name={flagship.name}
+      layoutDirection={flagship.layoutDirection}
+      initialNodes={flagship.diagram.nodes}
+      initialEdges={flagship.diagram.edges}
       nodeTypes={aiStudioNodeTypes}
       diagramTemplates={aiStudioTemplates}
       plugins={[aiStudioFeaturesPlugin]}
     >
       <WorkflowBuilder.DefaultLayout />
+      <BrandLogo />
       <AiStudioControls />
       <ExecutionLogPanel />
       <ExecutionNodeDetail />
       <ExecutionHighlighting />
+      <DisclaimerModal />
     </WorkflowBuilder.Root>
   );
 }

apps/ai-studio/src/app/brand-override.css

@@ -0,0 +1,14 @@
+/* TEMPORARY override. The SDK app bar (`Toolbar`) renders the Workflow Builder
+   logo as an SVG with CSS-module class `logo`, followed by a `nav-segment`
+   holding the Save button, in a flex row (gap 2rem). The SDK exposes no prop to
+   replace the logo or make it a link, so we hide its pixels here and render our
+   own linked CDN logo (see BrandLogo). We keep the logo's box in the flex flow
+   (`visibility`, NOT `display: none`) and reserve a width matching the overlay,
+   so the Save button keeps its place instead of sliding left underneath the
+   overlay. The prefix selectors survive the per-build module-hash suffix (e.g.
+   `_logo_2tbzr_18`). Remove this and the BrandLogo overlay once the SDK exposes
+   a logo / logoHref prop on <WorkflowBuilder.Root>. */
+[class^='_toolbar_'] [class^='_logo_'] {
+  visibility: hidden;
+  width: 6rem; /* >= the BrandLogo overlay width (~5.8rem) so the Save button clears it */
+}

apps/ai-studio/src/components/brand/brand-logo.module.css

@@ -0,0 +1,35 @@
+/* Overlays the app bar's logo slot (the SDK logo sits at ~33px / 37px, 55x22).
+   Fixed so it stays put over the fixed app bar. */
+.logo {
+  position: fixed;
+  top: 2.45rem;
+  left: 2.05rem;
+  z-index: 100;
+  display: inline-flex;
+  align-items: center;
+  height: 1.15rem;
+}
+
+.image {
+  height: 100%;
+  width: auto;
+}
+
+/* Theme-swapped logo: the SDK sets `data-theme` on <html>. Show the dark-text
+   logo by default (light theme) and the white-text logo when the dark theme is
+   active, so neither variant carries a baked-in background. */
+.light {
+  display: block;
+}
+
+.dark {
+  display: none;
+}
+
+:global([data-theme='dark']) .light {
+  display: none;
+}
+
+:global([data-theme='dark']) .dark {
+  display: block;
+}

apps/ai-studio/src/components/brand/brand-logo.tsx

@@ -0,0 +1,27 @@
+import styles from './brand-logo.module.css';
+
+// The CDN's `-solid` asset bakes in a white background (a white box in dark
+// mode), so we use the transparent dark-text / white-text variants of the same
+// logo and swap them by the active SDK theme (see brand-logo.module.css).
+const LOGO_LIGHT = 'https://cdn.synergycodes.com/workflow-builder-logo.svg';
+const LOGO_DARK = 'https://cdn.synergycodes.com/workflow-builder-logo-white.svg';
+const LOGO_HREF = 'https://workflowbuilder.io';
+
+// Temporary consumer-side replacement for the SDK app-bar logo (the SDK one is
+// hidden via brand-override.css). Renders the CDN logo over the app bar's logo
+// slot and links it to workflowbuilder.io. Replace with an SDK logo/logoHref
+// prop on <WorkflowBuilder.Root> when one is available.
+export function BrandLogo() {
+  return (
+    <a
+      className={styles['logo']}
+      href={LOGO_HREF}
+      target="_blank"
+      rel="noreferrer noopener"
+      aria-label="Workflow Builder - workflowbuilder.io"
+    >
+      <img className={`${styles['image']} ${styles['light']}`} src={LOGO_LIGHT} alt="Workflow Builder" />
+      <img className={`${styles['image']} ${styles['dark']}`} src={LOGO_DARK} alt="" aria-hidden="true" />
+    </a>
+  );
+}

apps/ai-studio/src/components/disclaimer/disclaimer-modal.module.css

@@ -0,0 +1,111 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: rgba(8, 10, 14, 0.55);
+  backdrop-filter: blur(2px);
+}
+
+.card {
+  position: relative;
+  width: 100%;
+  max-width: 460px;
+  padding: 2rem;
+  font-family: var(--wb-font-family);
+  background: var(--ax-ui-bg-primary-default, #ffffff);
+  border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+  border-radius: var(--wb-app-bar-border-radius, 0.75rem);
+  box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.25);
+  color: var(--ax-txt-primary-default, #151516);
+}
+
+.close {
+  position: absolute;
+  top: 0.9rem;
+  right: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: var(--ax-txt-tertiary-default, #6f7480);
+  cursor: pointer;
+}
+
+.close:hover {
+  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  color: var(--ax-txt-primary-default, #151516);
+}
+
+.heading {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  margin-bottom: 0.9rem;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+  border-radius: 0.6rem;
+  background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+  color: var(--ax-colors-acc1-500, #1096e7);
+}
+
+.title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ax-txt-primary-default, #151516);
+}
+
+.body {
+  margin: 0 0 1.5rem;
+  font-size: 0.92rem;
+  line-height: 1.6;
+  color: var(--ax-txt-secondary-default, #4d5059);
+}
+
+.body p {
+  margin: 0 0 0.7rem;
+}
+
+.body p:last-child {
+  margin-bottom: 0;
+}
+
+.body strong {
+  color: var(--ax-txt-primary-default, #151516);
+  font-weight: 600;
+}
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.7rem 1rem;
+  border: none;
+  border-radius: 0.625rem;
+  background: var(--ax-colors-acc1-500, #1096e7);
+  color: #ffffff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.cta:hover {
+  background: var(--ax-colors-acc1-600, #0477c5);
+}

apps/ai-studio/src/components/disclaimer/disclaimer-modal.tsx

@@ -0,0 +1,75 @@
+import { Info, X } from '@phosphor-icons/react';
+import { useState } from 'react';
+
+import styles from './disclaimer-modal.module.css';
+
+const STORAGE_KEY = 'ai-studio:disclaimer-acknowledged';
+
+function hasAcknowledged(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+export function DisclaimerModal() {
+  const [open, setOpen] = useState(() => !hasAcknowledged());
+
+  if (!open) {
+    return null;
+  }
+
+  function dismiss() {
+    try {
+      localStorage.setItem(STORAGE_KEY, 'true');
+    } catch {
+      // A locked-down or private session is fine — just close for this visit.
+    }
+    setOpen(false);
+  }
+
+  return (
+    <div className={styles['overlay']} role="presentation" onClick={dismiss}>
+      <div
+        className={styles['card']}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="disclaimer-title"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <button className={styles['close']} onClick={dismiss} aria-label="Close">
+          <X size={18} weight="bold" />
+        </button>
+
+        <div className={styles['heading']}>
+          <div className={styles['icon']}>
+            <Info size={22} weight="fill" />
+          </div>
+          <h2 className={styles['title']} id="disclaimer-title">
+            Welcome to AI Studio
+          </h2>
+        </div>
+
+        <div className={styles['body']}>
+          <p>
+            This is a live demo of <strong>Workflow Builder</strong> — a toolkit for building visual, AI-powered
+            workflow editors.
+          </p>
+          <p>
+            The workflows here run for real: every AI step calls a live model through <strong>OpenRouter</strong>.
+          </p>
+          <p>
+            It is <strong>not</strong> a place to test or benchmark AI models. The model is just the engine — the point
+            is to show what you can build with Workflow Builder. To keep the demo open to everyone, runs are
+            rate-limited.
+          </p>
+        </div>
+
+        <button className={styles['cta']} onClick={dismiss}>
+          Start exploring
+        </button>
+      </div>
+    </div>
+  );
+}

apps/ai-studio/src/components/execution/log-panel.module.css

@@ -7,6 +7,7 @@
   background: var(--wb-app-bar-background);
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: var(--wb-app-bar-border-radius);
+  color: var(--ax-txt-primary-default, #151516);
   display: flex;
   flex-direction: column;
   z-index: 10;

apps/ai-studio/src/components/execution/node-detail.module.css

@@ -7,6 +7,7 @@
   background: var(--wb-app-bar-background);
   border: 0.0625rem solid var(--wb-app-bar-border-color);
   border-radius: var(--wb-app-bar-border-radius);
+  color: var(--ax-txt-primary-default, #151516);
   display: flex;
   flex-direction: column;
   z-index: 11;