+
+ );
+}
diff --git a/apps/ai-studio/src/components/execution/log-panel.module.css b/apps/ai-studio/src/components/execution/log-panel.module.css
index 54250bf46..23a7cb9d9 100644
--- a/apps/ai-studio/src/components/execution/log-panel.module.css
+++ b/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;
diff --git a/apps/ai-studio/src/components/execution/node-detail.module.css b/apps/ai-studio/src/components/execution/node-detail.module.css
index 7d869c47c..3ef9fa1f3 100644
--- a/apps/ai-studio/src/components/execution/node-detail.module.css
+++ b/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;
diff --git a/apps/ai-studio/src/components/visualize/chart-renderer.tsx b/apps/ai-studio/src/components/visualize/chart-renderer.tsx
new file mode 100644
index 000000000..65695a882
--- /dev/null
+++ b/apps/ai-studio/src/components/visualize/chart-renderer.tsx
@@ -0,0 +1,178 @@
+import type { ReactElement } from 'react';
+import {
+ Area,
+ AreaChart,
+ Bar,
+ BarChart,
+ CartesianGrid,
+ Cell,
+ Legend,
+ Line,
+ LineChart,
+ Pie,
+ PieChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from 'recharts';
+
+import styles from './renderers.module.css';
+
+import type { RendererProps } from './renderers';
+
+const PALETTE = ['#1096e7', '#45b7a8', '#e0a458', '#a78bfa', '#ef6f9b', '#6fae6f', '#0477c5'];
+const AXIS = '#9aa1ab';
+const GRID = '#edeff3';
+
+type Row = Record event.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+ + Welcome to AI Studio +
+
+
+
+
+ + This is a live demo of Workflow Builder — a toolkit for building visual, AI-powered + workflow editors. +
++ The workflows here run for real: every AI step calls a live model through OpenRouter. +
++ It is not 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. +
+{text};
+ }
+
+ const { type, rows } = payload;
+ const keys = Object.keys(rows[0]);
+ const valueKeys = keys.filter((key) => rows.every((row) => typeof row[key] === 'number'));
+ const categoryKey = keys.find((key) => !valueKeys.includes(key)) ?? keys[0];
+
+ if (valueKeys.length === 0) {
+ return {text};
+ }
+
+ let chart: ReactElement;
+ switch (type) {
+ case 'pie':
+ case 'donut': {
+ chart = (
+
+
+ {chart}
+
+
+ );
+}
diff --git a/apps/ai-studio/src/components/visualize/diagram-renderer.tsx b/apps/ai-studio/src/components/visualize/diagram-renderer.tsx
new file mode 100644
index 000000000..5ed99f45a
--- /dev/null
+++ b/apps/ai-studio/src/components/visualize/diagram-renderer.tsx
@@ -0,0 +1,70 @@
+import mermaid from 'mermaid';
+import { useEffect, useState } from 'react';
+
+import styles from './renderers.module.css';
+
+import type { RendererProps } from './renderers';
+
+mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'neutral' });
+
+let counter = 0;
+
+// Renders a mermaid source string to SVG in the browser. It validates with
+// mermaid.parse({ suppressErrors: true }) BEFORE rendering: invalid input (e.g.
+// the node is forced to Diagram on non-diagram text) falls back to raw text and
+// never calls render, so mermaid does not inject its giant "Syntax error"
+// graphic into the document.
+export function DiagramRenderer({ text, data }: RendererProps) {
+ const raw = typeof data === 'string' ? data : text;
+ // If the diagram is embedded in a larger response, render just the fenced block.
+ const fence = /```mermaid\s*\n([\s\S]*?)```/.exec(raw);
+ const source = fence ? fence[1].trim() : raw;
+ const [svg, setSvg] = useState
+
+ );
+ }
+ if (svg === null) {
+ return Not a valid Mermaid diagram — showing the raw text.
+{text}
+ Rendering diagram…
; + } + // mermaid output, sanitized via securityLevel 'strict' + return ; +} diff --git a/apps/ai-studio/src/components/visualize/renderers.module.css b/apps/ai-studio/src/components/visualize/renderers.module.css new file mode 100644 index 000000000..bbb1b29bc --- /dev/null +++ b/apps/ai-studio/src/components/visualize/renderers.module.css @@ -0,0 +1,243 @@ +/* Shared content styles for the Visualize renderers. The card frame/header/badge + live in visualize-card.module.css; this file styles the rendered output. */ + +.markdown { + font-size: 0.85rem; + line-height: 1.6; + color: var(--ax-txt-primary-default, #151516); + overflow-wrap: anywhere; +} + +.markdown h1, +.markdown h2, +.markdown h3 { + margin: 0.9em 0 0.4em; + font-weight: 600; + line-height: 1.3; +} + +.markdown h1 { + font-size: 1.15rem; +} + +.markdown h2 { + font-size: 1.05rem; +} + +.markdown h3 { + font-size: 0.95rem; +} + +.markdown p { + margin: 0.5em 0; +} + +.markdown ul, +.markdown ol { + margin: 0.5em 0; + padding-left: 1.3em; +} + +.markdown li { + margin: 0.2em 0; +} + +.markdown a { + color: var(--ax-colors-acc1-500, #1096e7); + text-decoration: underline; +} + +.markdown strong { + font-weight: 600; +} + +.markdown code { + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 0.82em; + background: var(--ax-ui-bg-secondary-default, #f5f5f7); + padding: 0.1em 0.35em; + border-radius: 0.25rem; +} + +.markdown pre { + margin: 0.6em 0; + padding: 0.7em 0.85em; + background: var(--ax-ui-bg-secondary-default, #f5f5f7); + border-radius: 0.5rem; + overflow-x: auto; +} + +.markdown pre code { + background: none; + padding: 0; +} + +.markdown blockquote { + margin: 0.6em 0; + padding-left: 0.85em; + border-left: 0.1875rem solid var(--ax-ui-stroke-primary-default, #edeff3); + color: var(--ax-txt-secondary-default, #4d5059); +} + +/* Inline markdown inside table cells / stat-card values */ +.rich p { + margin: 0; +} + +.rich ul, +.rich ol { + margin: 0.2em 0; + padding-left: 1.1em; +} + +.rich code { + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 0.85em; + background: var(--ax-ui-bg-secondary-default, #f5f5f7); + padding: 0.05em 0.3em; + border-radius: 0.2rem; +} + +.rich a { + color: var(--ax-colors-acc1-500, #1096e7); + text-decoration: underline; +} + +.rich strong { + font-weight: 600; +} + +.text { + margin: 0; + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 0.8rem; + line-height: 1.55; + color: var(--ax-txt-primary-default, #151516); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +/* JSON tree */ +.json { + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 0.78rem; + line-height: 1.5; + color: var(--ax-txt-primary-default, #151516); +} + +.json-row { + display: flex; + gap: 0.3rem; + align-items: baseline; +} + +.json-row--expandable { + cursor: pointer; +} + +.json-children { + padding-left: 0.9rem; + border-left: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3); + margin-left: 0.25rem; +} + +.json-toggle { + width: 0.7rem; + flex-shrink: 0; + color: var(--ax-txt-tertiary-default, #6f7480); +} + +.json-key { + color: var(--ax-colors-acc1-600, #0477c5); +} + +.json-string { + color: #15803d; +} + +.json-number { + color: #b45309; +} + +.json-boolean, +.json-null { + color: #7c3aed; +} + +.json-bracket { + color: var(--ax-txt-tertiary-default, #6f7480); +} + +/* Table */ +.table { + width: 100%; + border-collapse: collapse; + font-size: 0.78rem; +} + +.table th, +.table td { + border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3); + padding: 0.3em 0.5em; + text-align: left; + vertical-align: top; +} + +.table th { + background: var(--ax-ui-bg-secondary-default, #f5f5f7); + font-weight: 600; + position: sticky; + top: 0; +} + +/* Stat cards */ +.stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); + gap: 0.5rem; +} + +.stat-card { + padding: 0.6rem 0.7rem; + border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3); + border-radius: 0.5rem; + background: var(--ax-ui-bg-secondary-default, #f5f5f7); +} + +.stat-value { + font-size: 1.05rem; + font-weight: 600; + color: var(--ax-txt-primary-default, #151516); + overflow-wrap: anywhere; +} + +.stat-label { + margin-top: 0.15rem; + font-size: 0.7rem; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--ax-txt-tertiary-default, #6f7480); +} + +.fallback-note { + margin-bottom: 0.4rem; + font-size: 0.72rem; + color: var(--ax-txt-tertiary-default, #6f7480); +} + +/* Chart */ +.chart { + width: 100%; + height: 14rem; +} + +/* Diagram */ +.diagram { + display: flex; + justify-content: center; +} + +.diagram svg { + max-width: 100%; + height: auto; +} diff --git a/apps/ai-studio/src/components/visualize/renderers.tsx b/apps/ai-studio/src/components/visualize/renderers.tsx new file mode 100644 index 000000000..e381d4dee --- /dev/null +++ b/apps/ai-studio/src/components/visualize/renderers.tsx @@ -0,0 +1,275 @@ +import { type ComponentType, lazy, useState } from 'react'; +import Markdown, { type Components } from 'react-markdown'; +import remarkGfm from 'remark-gfm'; + +import styles from './renderers.module.css'; + +import { type VisualizeRenderer, detectFormat } from '../../utils/detect-format'; + +// Lazy so recharts (~140KB) only loads when a chart is actually rendered. +const ChartRenderer = lazy(() => import('./chart-renderer').then((module) => ({ default: module.ChartRenderer }))); +// Lazy so mermaid (~150KB) only loads when a diagram is actually rendered. +const DiagramRenderer = lazy(() => + import('./diagram-renderer').then((module) => ({ default: module.DiagramRenderer })), +); + +export type RendererProps = { + text: string; + // Pre-parsed payload from detectFormat (auto mode); renderers parse `text` themselves otherwise. + data?: unknown; +}; + +export const RENDERER_LABELS: Record
+ {value}
+
+ );
+}
+
+// Render fenced code blocks richly: a ```mermaid block becomes a real diagram,
+// a ```json block is detected and rendered (chart/table/json/...), so a mixed
+// markdown response with an embedded diagram/data block renders it inline rather
+// than as raw code. `pre` is unwrapped so these block renderers own their wrapper.
+const markdownComponents: Components = {
+ pre: ({ children }) => <>{children},
+ code({ className, children }) {
+ const language = /language-(\w+)/.exec(className ?? '')?.[1];
+ const value = String(children).replace(/\n$/, '');
+ if (language === 'mermaid') {
+ return
+ {children}
+
+ );
+ }
+ return {children};
+ },
+};
+
+function MarkdownRenderer({ text }: RendererProps) {
+ return (
+
+
+ {text}
+
+
+ );
+}
+
+function TextRenderer({ text }: RendererProps) {
+ return {text};
+}
+
+function JsonValue({ name, value, depth }: { name?: string; value: unknown; depth: number }) {
+ const [open, setOpen] = useState(depth < 2);
+ const isExpandable = typeof value === 'object' && value !== null;
+
+ if (!isExpandable) {
+ const scalarClass =
+ value === null ? 'json-null' : (`json-${typeof value}` as 'json-string' | 'json-number' | 'json-boolean');
+ const display = typeof value === 'string' ? `"${value}"` : String(value);
+ return (
+
+
+ {name !== undefined && {name}:}
+ {display}
+
+ );
+ }
+
+ const entries: [string, unknown][] = Array.isArray(value)
+ ? value.map((item, index) => [String(index), item])
+ : Object.entries(value as Record
+
+ );
+}
+
+function JsonRenderer({ text, data }: RendererProps) {
+ const value = parseOr(text, data);
+ if (value === undefined) {
+ return setOpen((o) => !o)}>
+ {open ? '▾' : '▸'}
+ {name !== undefined && {name}:}
+ {bracket}
+
+ {open && (
+
+ {entries.map(([key, child]) => (
+
+ )}
+ {text};
+ }
+ return (
+
+
+ );
+}
+
+function TableRenderer({ text, data }: RendererProps) {
+ const rows = parseOr(text, data);
+ if (!Array.isArray(rows) || rows.length === 0) {
+ return {text};
+ }
+
+ const objectRows = rows.every((row) => row !== null && typeof row === 'object' && !Array.isArray(row));
+ const headers = objectRows
+ ? [...new Set(rows.flatMap((row) => Object.keys(row as Record| {header} | + ))} +|
|---|---|
|
+ |
+ ))
+ ) : (
+
+ |
+ )}
+
{text};
+ }
+ const entries = Object.entries(value as Record
+ {entries.map(([key, entryValue]) => (
+
+ );
+}
+
+// Resolve a renderer to its component. `chart` (recharts) and `diagram` (mermaid)
+// are lazy and load only when actually used.
+export function getRenderer(renderer: VisualizeRenderer): ComponentType
+
+ ))}
+
+
+ {humanize(key)}
+
+
+ );
+ }
+ return (
+
+
+
+
+
+ Generating visualization…
+
+
+ );
+}
+
+// Injected into the node body via the OptionalNodeContent decorator, so the
+// visualization renders as part of the node itself. Reads the upstream node's
+// output, picks a renderer (the node's `mode` or auto-detected), reveals it, and
+// offers export, expand, and LLM "adapt" (manual button or the node's aiAdapt toggle).
+export function VisualizeCard({ props }: Props) {
+ const nodeId = props?.nodeId ?? '';
+ const [forceChart, setForceChart] = useState(false);
+ const [expanded, setExpanded] = useState(false);
+ const [adaptedText, setAdaptedText] = useStateThe visualization appears here after you run the workflow.
+
+ {hasOutput && Renderer ? (
+ <>
+ setExpanded(false)}
+ />
+ )}
+
+ );
+}
diff --git a/apps/ai-studio/src/components/visualize/visualize-modal.module.css b/apps/ai-studio/src/components/visualize/visualize-modal.module.css
new file mode 100644
index 000000000..7850c1acc
--- /dev/null
+++ b/apps/ai-studio/src/components/visualize/visualize-modal.module.css
@@ -0,0 +1,92 @@
+.overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ background: rgba(8, 10, 14, 0.55);
+ backdrop-filter: blur(2px);
+ font-family: var(--wb-font-family);
+}
+
+.modal {
+ display: flex;
+ flex-direction: column;
+ width: min(56rem, 92vw);
+ max-height: 86vh;
+ background: var(--ax-ui-bg-primary-default, #ffffff);
+ border: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+ border-radius: 0.9rem;
+ box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
+ color: var(--ax-txt-primary-default, #151516);
+ overflow: hidden;
+
+ &,
+ * {
+ box-sizing: border-box;
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ border-bottom: 0.0625rem solid var(--ax-ui-stroke-primary-default, #edeff3);
+}
+
+.title {
+ font-size: 0.95rem;
+ font-weight: 600;
+}
+
+.badge {
+ font-family: 'IBM Plex Mono', ui-monospace, monospace;
+ font-size: 0.7rem;
+ padding: 0.15rem 0.5rem;
+ border-radius: 0.3rem;
+ background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+ color: var(--ax-txt-tertiary-default, #6f7480);
+}
+
+.actions {
+ display: flex;
+ gap: 0.15rem;
+ margin-left: auto;
+}
+
+.action {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border: none;
+ border-radius: 0.4rem;
+ background: transparent;
+ color: var(--ax-txt-tertiary-default, #6f7480);
+ cursor: pointer;
+}
+
+.action svg {
+ width: 1.15rem;
+ height: 1.15rem;
+}
+
+.action:hover {
+ background: var(--ax-ui-bg-secondary-default, #f5f5f7);
+ color: var(--ax-txt-primary-default, #151516);
+}
+
+.body {
+ flex: 1;
+ overflow: auto;
+ padding: 1.25rem 1.5rem;
+}
+
+.loading {
+ color: var(--ax-txt-tertiary-default, #6f7480);
+ font-size: 0.85rem;
+}
diff --git a/apps/ai-studio/src/components/visualize/visualize-modal.tsx b/apps/ai-studio/src/components/visualize/visualize-modal.tsx
new file mode 100644
index 000000000..fc51fa375
--- /dev/null
+++ b/apps/ai-studio/src/components/visualize/visualize-modal.tsx
@@ -0,0 +1,81 @@
+import { ClipboardText, Copy, DownloadSimple, FileSvg, X } from '@phosphor-icons/react';
+import { Suspense, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import styles from './visualize-modal.module.css';
+
+import type { VisualizeRenderer } from '../../utils/detect-format';
+import { copyImage, copySource, downloadPng, downloadSvg } from '../../utils/export-visualization';
+import { getRenderer } from './renderers';
+
+type Props = {
+ renderer: VisualizeRenderer;
+ text: string;
+ data?: unknown;
+ badge: string;
+ isVector: boolean;
+ onClose: () => void;
+};
+
+// Full-size view of a visualization. Rendered through a portal to document.body
+// so its fixed overlay escapes the transformed React Flow viewport.
+export function VisualizeModal({ renderer, text, data, badge, isVector, onClose }: Props) {
+ const contentRef = useRef
+ {badge}
+
+ {showChartChip && (
+
+ )}
+
+ {showAdaptButton && (
+
+ )}
+
+
+
+
+
+
+ {adapting ? (
+ Loading…}>
+
+ )}
+
+
+ ) : (
+
+
+ ) : (
+
+
+
+
+
+ Adapting with AI…
+
+
+
+
,
+ document.body,
+ );
+}
diff --git a/apps/ai-studio/src/config.ts b/apps/ai-studio/src/config.ts
index 35dfa8743..9b393dc57 100644
--- a/apps/ai-studio/src/config.ts
+++ b/apps/ai-studio/src/config.ts
@@ -1 +1,5 @@
export const BACKEND_URL = import.meta.env['VITE_BACKEND_URL'] ?? 'http://127.0.0.1:3001';
+
+// Cloudflare Turnstile site key (public). Undefined = bot protection disabled
+// (local dev); when set, the Run button attaches a token the backend verifies.
+export const TURNSTILE_SITE_KEY = import.meta.env['VITE_TURNSTILE_SITE_KEY'] as string | undefined;
diff --git a/apps/ai-studio/src/data/ai-debate-flow.ts b/apps/ai-studio/src/data/ai-debate-flow.ts
new file mode 100644
index 000000000..99d2c00f2
--- /dev/null
+++ b/apps/ai-studio/src/data/ai-debate-flow.ts
@@ -0,0 +1,182 @@
+import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
+
+const diagram: DiagramModel = {
+ name: 'AI Debate',
+ diagram: {
+ nodes: [
+ {
+ id: 'trigger-1',
+ type: 'start-node',
+ position: { x: 0, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'The Question',
+ description: 'A decision to stress-test from both sides.',
+ inputPrompt:
+ 'Should our 12-person startup build a native mobile app now, or keep doubling down on the web app first?',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/trigger',
+ icon: 'Lightning',
+ },
+ selected: false,
+ measured: { width: 258, height: 63 },
+ dragging: false,
+ },
+ {
+ id: 'optimist-1',
+ type: 'node',
+ position: { x: 400, y: 120 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Optimist',
+ description: 'Argues the strongest case in favour.',
+ systemPrompt: `You are an optimistic strategist. Argue the strongest possible case FOR the
+proposal in the question. Give 3-4 crisp bullet points - upside, opportunity,
+why now. Be persuasive but honest, no hype.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'skeptic-1',
+ type: 'node',
+ position: { x: 400, y: 480 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Skeptic',
+ description: "Argues the strongest case against - devil's advocate.",
+ systemPrompt: `You are a rigorous skeptic and devil's advocate. Argue the strongest possible
+case AGAINST the proposal in the question. Give 3-4 crisp bullet points - risks,
+hidden costs, what could go wrong. Surface the objections others gloss over.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'verdict-1',
+ type: 'node',
+ position: { x: 820, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Balanced Verdict',
+ description: 'Weighs both sides and recommends.',
+ systemPrompt: `You moderate a debate. You receive an optimist's case and a skeptic's case for
+the same proposal. Weigh both and deliver a balanced recommendation as markdown,
+in exactly this shape:
+
+**Verdict:** [one decisive line - pick a direction]
+
+| For | Against |
+| --- | --- |
+| [strongest point in favour] | [strongest point against] |
+| [second point in favour] | [second point against] |
+
+**Reasoning:** [2-3 sentences: why this verdict, and the first concrete step.]
+
+Be decisive.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'visualize-1',
+ type: 'node',
+ position: { x: 1240, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Visualize',
+ description: 'Renders the verdict (auto-detects the format).',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/visualize',
+ icon: 'Eye',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ ],
+ edges: [
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'optimist-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-optimist',
+ data: {},
+ },
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'skeptic-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-skeptic',
+ data: {},
+ },
+ {
+ source: 'optimist-1',
+ sourceHandle: 'source',
+ target: 'verdict-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-optimist-verdict',
+ data: {},
+ },
+ {
+ source: 'skeptic-1',
+ sourceHandle: 'source',
+ target: 'verdict-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-skeptic-verdict',
+ data: {},
+ },
+ {
+ source: 'verdict-1',
+ sourceHandle: 'source',
+ target: 'visualize-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-verdict-visualize',
+ data: {},
+ },
+ ],
+ viewport: { x: 80, y: 80, zoom: 0.55 },
+ },
+ layoutDirection: 'RIGHT',
+};
+
+export const aiDebateFlow: TemplateModel = {
+ id: 302,
+ name: 'AI Debate',
+ value: diagram,
+ icon: 'ChatCircleDots',
+};
diff --git a/apps/ai-studio/src/data/ai-studio-templates.ts b/apps/ai-studio/src/data/ai-studio-templates.ts
index 6f3010121..a603b4fe7 100644
--- a/apps/ai-studio/src/data/ai-studio-templates.ts
+++ b/apps/ai-studio/src/data/ai-studio-templates.ts
@@ -1,5 +1,15 @@
import type { TemplateModel } from '@workflowbuilder/sdk';
-import { salesInquiryFlow } from './sales-inquiry-flow';
+import { aiDebateFlow } from './ai-debate-flow';
+import { contentRepurposerFlow } from './content-repurposer-flow';
+import { meetingNotesFlow } from './meeting-notes-flow';
+import { researchFlow } from './research-flow';
+import { supportTriageFlow } from './support-triage-flow';
-export const aiStudioTemplates: TemplateModel[] = [salesInquiryFlow];
+export const aiStudioTemplates: TemplateModel[] = [
+ supportTriageFlow,
+ aiDebateFlow,
+ contentRepurposerFlow,
+ meetingNotesFlow,
+ researchFlow,
+];
diff --git a/apps/ai-studio/src/data/content-repurposer-flow.ts b/apps/ai-studio/src/data/content-repurposer-flow.ts
new file mode 100644
index 000000000..57322225e
--- /dev/null
+++ b/apps/ai-studio/src/data/content-repurposer-flow.ts
@@ -0,0 +1,235 @@
+import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
+
+const diagram: DiagramModel = {
+ name: 'Content Repurposer',
+ diagram: {
+ nodes: [
+ {
+ id: 'trigger-1',
+ type: 'start-node',
+ position: { x: 0, y: 320 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Source Content',
+ description: 'One piece of long-form content to repurpose.',
+ inputPrompt: `We just shipped Scheduled Reports in Lumen. You can now build any dashboard view
+and have it delivered as a PDF to your inbox or a Slack channel on a daily,
+weekly, or monthly cadence - no more manual exports before the Monday standup.
+
+It works with every chart type, respects your team's access permissions, and
+takes about 30 seconds to set up. Early users tell us it has quietly removed one
+of the most tedious parts of their week.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/trigger',
+ icon: 'Lightning',
+ },
+ selected: false,
+ measured: { width: 258, height: 63 },
+ dragging: false,
+ },
+ {
+ id: 'twitter-1',
+ type: 'node',
+ position: { x: 420, y: 100 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'X / Twitter Thread',
+ description: 'Rewrites the content as a thread.',
+ systemPrompt: `Turn the source content into an engaging X/Twitter thread of 4-6 posts.
+- Open with a scroll-stopping hook
+- One idea per post, punchy and concrete
+- End with a clear call to action
+Number each post (1/, 2/, ...).`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'linkedin-1',
+ type: 'node',
+ position: { x: 420, y: 320 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'LinkedIn Post',
+ description: 'Rewrites the content for LinkedIn.',
+ systemPrompt: `Turn the source content into a LinkedIn post:
+- A strong first line that earns the click-to-expand
+- Short, skimmable paragraphs
+- 2-3 concrete takeaways
+- A closing question to drive comments
+Keep it under 200 words. Professional but human.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'instagram-1',
+ type: 'node',
+ position: { x: 420, y: 540 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Instagram Caption',
+ description: 'Rewrites the content as a caption.',
+ systemPrompt: `Turn the source content into an Instagram caption:
+- Punchy and friendly, conversational tone
+- A few relevant emojis (not too many)
+- A short call to action
+- 5 relevant hashtags on the last line`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'pack-1',
+ type: 'node',
+ position: { x: 840, y: 320 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Content Pack',
+ description: 'Collects every channel into one document.',
+ systemPrompt: `You receive a source brief and three repurposed drafts from previous steps: an
+X/Twitter thread, a LinkedIn post, and an Instagram caption. Identify each draft
+by its content and assemble them into a single content pack as markdown, one
+section per channel, in exactly this shape:
+
+## X / Twitter
+[the thread]
+
+## LinkedIn
+[the post]
+
+## Instagram
+[the caption]
+
+Keep each draft's wording as-is - do not rewrite it. Just organize and label.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'visualize-1',
+ type: 'node',
+ position: { x: 1260, y: 320 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Visualize',
+ description: 'Renders the content pack (auto-detects the format).',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/visualize',
+ icon: 'Eye',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ ],
+ edges: [
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'twitter-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-twitter',
+ data: {},
+ },
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'linkedin-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-linkedin',
+ data: {},
+ },
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'instagram-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-instagram',
+ data: {},
+ },
+ {
+ source: 'twitter-1',
+ sourceHandle: 'source',
+ target: 'pack-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-twitter-pack',
+ data: {},
+ },
+ {
+ source: 'linkedin-1',
+ sourceHandle: 'source',
+ target: 'pack-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-linkedin-pack',
+ data: {},
+ },
+ {
+ source: 'instagram-1',
+ sourceHandle: 'source',
+ target: 'pack-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-instagram-pack',
+ data: {},
+ },
+ {
+ source: 'pack-1',
+ sourceHandle: 'source',
+ target: 'visualize-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-pack-visualize',
+ data: {},
+ },
+ ],
+ viewport: { x: 120, y: 80, zoom: 0.5 },
+ },
+ layoutDirection: 'RIGHT',
+};
+
+export const contentRepurposerFlow: TemplateModel = {
+ id: 303,
+ name: 'Content Repurposer',
+ value: diagram,
+ icon: 'Broadcast',
+};
diff --git a/apps/ai-studio/src/data/meeting-notes-flow.ts b/apps/ai-studio/src/data/meeting-notes-flow.ts
new file mode 100644
index 000000000..62fd234d3
--- /dev/null
+++ b/apps/ai-studio/src/data/meeting-notes-flow.ts
@@ -0,0 +1,175 @@
+import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
+
+const diagram: DiagramModel = {
+ name: 'Meeting Notes to Action Items',
+ diagram: {
+ nodes: [
+ {
+ id: 'trigger-1',
+ type: 'start-node',
+ position: { x: 0, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Meeting Transcript',
+ description: 'A raw transcript pasted in.',
+ inputPrompt: `[10:02] Priya: Okay, the launch date. Marketing wants the 14th, but the export bug is still open.
+[10:03] Sam: Engineering can have the export fix in by the 11th if QA starts Monday.
+[10:04] Priya: Works. Let's lock the 14th then. Sam, you own the fix.
+[10:05] Dana: I'll prep the announcement email and the changelog - ready for review by the 12th.
+[10:06] Priya: Great. And we still need pricing sign-off from finance before we announce.
+[10:07] Sam: I'll ping finance today.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/trigger',
+ icon: 'Lightning',
+ },
+ selected: false,
+ measured: { width: 258, height: 63 },
+ dragging: false,
+ },
+ {
+ id: 'summary-1',
+ type: 'node',
+ position: { x: 360, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Summarize',
+ description: 'Condenses the discussion and decisions.',
+ systemPrompt: `Summarize the meeting transcript in 3-4 sentences: what was discussed and what
+was decided. Neutral, factual tone.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'actions-1',
+ type: 'node',
+ position: { x: 720, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Extract Action Items',
+ description: 'Pulls out owners, tasks and due dates.',
+ systemPrompt: `From the meeting transcript, extract every action item as a list. For each item
+give: owner, task, and due date if one was mentioned. If the owner is unclear,
+mark it "unassigned". Do not invent items that were not discussed.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'recap-1',
+ type: 'node',
+ position: { x: 1080, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Format Recap',
+ description: 'Produces a clean recap with an action-items table.',
+ systemPrompt: `Produce a clean meeting recap as markdown, in exactly this shape:
+
+## Recap
+[one short paragraph summarizing the meeting and its decisions]
+
+## Action Items
+
+| Owner | Task | Due |
+| --- | --- | --- |
+| [owner] | [task] | [due date or "-"] |
+
+One row per action item. Keep it tight and skimmable. Sign off with a final
+line "_Meeting Bot_".`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'visualize-1',
+ type: 'node',
+ position: { x: 1440, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Visualize',
+ description: 'Renders the recap (auto-detects the format).',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/visualize',
+ icon: 'Eye',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ ],
+ edges: [
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'summary-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-summary',
+ data: {},
+ },
+ {
+ source: 'summary-1',
+ sourceHandle: 'source',
+ target: 'actions-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-summary-actions',
+ data: {},
+ },
+ {
+ source: 'actions-1',
+ sourceHandle: 'source',
+ target: 'recap-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-actions-recap',
+ data: {},
+ },
+ {
+ source: 'recap-1',
+ sourceHandle: 'source',
+ target: 'visualize-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-recap-visualize',
+ data: {},
+ },
+ ],
+ viewport: { x: 80, y: 90, zoom: 0.55 },
+ },
+ layoutDirection: 'RIGHT',
+};
+
+export const meetingNotesFlow: TemplateModel = {
+ id: 304,
+ name: 'Meeting Notes to Action Items',
+ value: diagram,
+ icon: 'CalendarCheck',
+};
diff --git a/apps/ai-studio/src/data/node-types.ts b/apps/ai-studio/src/data/node-types.ts
index 8390126bc..48ad1faef 100644
--- a/apps/ai-studio/src/data/node-types.ts
+++ b/apps/ai-studio/src/data/node-types.ts
@@ -3,11 +3,12 @@ import type { PaletteItemOrGroup } from '@workflowbuilder/sdk';
import { aiAgentPaletteItem } from '../nodes/ai-agent';
import { decisionPaletteItem } from '../nodes/decision';
import { triggerPaletteItem } from '../nodes/trigger';
+import { visualizePaletteItem } from '../nodes/visualize';
export const aiStudioNodeTypes: PaletteItemOrGroup[] = [
{
label: 'AI Studio',
isOpen: true,
- groupItems: [triggerPaletteItem, aiAgentPaletteItem, decisionPaletteItem],
+ groupItems: [triggerPaletteItem, aiAgentPaletteItem, decisionPaletteItem, visualizePaletteItem],
},
];
diff --git a/apps/ai-studio/src/data/research-flow.ts b/apps/ai-studio/src/data/research-flow.ts
new file mode 100644
index 000000000..725ebf3b0
--- /dev/null
+++ b/apps/ai-studio/src/data/research-flow.ts
@@ -0,0 +1,111 @@
+import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
+
+const diagram: DiagramModel = {
+ name: 'Market Research Brief',
+ diagram: {
+ nodes: [
+ {
+ id: 'trigger-1',
+ type: 'start-node',
+ position: { x: 0, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Research Topic',
+ description: 'The question to research on the web.',
+ inputPrompt: `Give me a briefing on the current market for AI-powered customer support tools: the main products, any notable recent launches or updates, and what users commonly praise or complain about.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/trigger',
+ icon: 'Lightning',
+ },
+ selected: false,
+ measured: { width: 258, height: 63 },
+ dragging: false,
+ },
+ {
+ id: 'research-1',
+ type: 'node',
+ position: { x: 380, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Research Agent',
+ description: 'Searches the web and writes a sourced brief.',
+ systemPrompt: `You are a research analyst. Use the web_search tool to gather current, factual
+information about the topic in the request - search more than once if it helps.
+Then write a concise brief in Markdown, in exactly this shape:
+
+## Summary
+2-3 sentences answering the request.
+
+## Key findings
+- 3-5 bullets, each a concrete fact you found.
+
+## Sources
+- A short list of the page titles and URLs you actually used.
+
+Only state things you found via search. If a claim isn't supported by a result, leave it out.`,
+ webSearch: true,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'visualize-1',
+ type: 'node',
+ position: { x: 760, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Visualize',
+ description: 'Renders the research brief (auto-detects the format).',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/visualize',
+ icon: 'Eye',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ ],
+ edges: [
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'research-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-research',
+ data: {},
+ },
+ {
+ source: 'research-1',
+ sourceHandle: 'source',
+ target: 'visualize-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-research-visualize',
+ data: {},
+ },
+ ],
+ viewport: { x: 180, y: 150, zoom: 0.7 },
+ },
+ layoutDirection: 'RIGHT',
+};
+
+export const researchFlow: TemplateModel = {
+ id: 305,
+ name: 'Market Research Brief',
+ value: diagram,
+ icon: 'MagnifyingGlass',
+};
diff --git a/apps/ai-studio/src/data/sales-inquiry-flow.ts b/apps/ai-studio/src/data/sales-inquiry-flow.ts
deleted file mode 100644
index b23995024..000000000
--- a/apps/ai-studio/src/data/sales-inquiry-flow.ts
+++ /dev/null
@@ -1,339 +0,0 @@
-import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
-
-const PRODUCT_KNOWLEDGE = `You work for Synergy Codes, the company behind Workflow Builder.
-
-Key product facts:
-- Workflow Builder is a frontend-only SDK for building visual workflow editors, not a SaaS platform
-- It's built on React Flow, extends it with node library, schema-driven properties panel, design system, plugin architecture
-- White-label: can be themed and branded to match the customer's product
-- Community Edition: Apache 2.0 (free, commercial use allowed)
-- Enterprise Edition: one-time license EUR 6,990 (no subscription, no revenue sharing)
-- Source code ownership: customer gets full source code, can modify and extend
-- Use cases: embed workflow editors into B2B SaaS, build AI agent platforms, visual rule engines, automation tools
-- NOT an iPaaS like n8n/Make/Zapier — those are hosted platforms, WB is an embeddable SDK
-- Execution-agnostic: outputs JSON, customer builds their own execution backend
-- Handles up to ~500 nodes, supports undo/redo, keyboard shortcuts, WCAG accessibility
-- No telemetry, no external data — runs entirely in customer's infrastructure
-- Tech stack: React, Zustand, React Flow, JSONForms, Overflow UI`;
-
-const diagram: DiagramModel = {
- name: 'Sales Inquiry Pipeline',
- diagram: {
- nodes: [
- {
- id: 'trigger-1',
- type: 'start-node',
- position: { x: 0, y: 300 },
- data: {
- segments: [],
- properties: {
- label: 'Incoming Email',
- description: 'Customer inquiry arrives via email.',
- inputPrompt: `Hi there,
-
-I'm a product manager at DataFlow Inc. We're building an internal automation platform and need a visual workflow editor for our users to design data pipelines.
-
-We've looked at building something custom with React Flow but realized it would take months to get to production quality. A colleague mentioned Workflow Builder.
-
-A few questions:
-1. Can we embed it into our existing React app?
-2. How does pricing work — is it per-seat or per-deployment?
-3. Do you support custom node types? Our nodes would need to represent database connections, API calls, and ML model steps.
-4. How does it compare to just using React Flow directly?
-
-We'd need this for about 200 internal users. Timeline is Q3 this year.
-
-Best,
-Sarah Chen
-Product Manager, DataFlow Inc.`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/trigger',
- icon: 'Lightning',
- },
- selected: false,
- measured: { width: 258, height: 63 },
- dragging: false,
- },
- {
- id: 'classify-1',
- type: 'node',
- position: { x: 350, y: 300 },
- data: {
- segments: [],
- properties: {
- label: 'Classify & Extract',
- description: 'Classifies the inquiry type and extracts key details.',
- systemPrompt: `${PRODUCT_KNOWLEDGE}
-
-Analyze the incoming customer email. Return a structured classification:
-
-**Type:** [pricing / technical / feature-request / partnership / general]
-**Urgency:** [high / medium / low]
-**Company:** [extract company name if mentioned]
-**Key Questions:** [bullet list of specific questions asked]
-**Product Interest:** [which aspects of Workflow Builder they're asking about]
-
-Be concise. Use the exact format above.`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/ai-agent',
- icon: 'AiAgent',
- },
- selected: false,
- measured: { width: 258, height: 123 },
- dragging: false,
- },
- {
- id: 'decision-1',
- type: 'decision-node',
- position: { x: 700, y: 300 },
- data: {
- segments: [],
- properties: {
- label: 'Route by Type',
- description: 'Routes the inquiry to the right specialist.',
- decisionBranches: [
- {
- id: 'branch-pricing',
- sourceHandle: 'source:inner:pricing',
- label: 'Pricing',
- conditions: [
- {
- x: '{{nodes.classify-1.response}}',
- y: 'pricing',
- comparisonOperator: 'isContaining',
- logicalOperator: 'AND',
- },
- ],
- },
- {
- id: 'branch-technical',
- sourceHandle: 'source:inner:technical',
- label: 'Technical',
- conditions: [
- {
- x: '{{nodes.classify-1.response}}',
- y: 'technical',
- comparisonOperator: 'isContaining',
- logicalOperator: 'AND',
- },
- ],
- },
- {
- id: 'branch-general',
- sourceHandle: 'source:inner:general',
- label: 'General',
- conditions: [],
- },
- ],
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/decision',
- icon: 'ArrowsSplit',
- },
- selected: false,
- measured: { width: 258, height: 236 },
- dragging: false,
- },
- {
- id: 'pricing-1',
- type: 'node',
- position: { x: 1100, y: 50 },
- data: {
- segments: [],
- properties: {
- label: 'Pricing Specialist',
- description: 'Drafts a pricing-focused reply.',
- systemPrompt: `${PRODUCT_KNOWLEDGE}
-
-You are a pricing specialist at Synergy Codes. Write a pricing-focused reply to the customer:
-- Lead with clear pricing info: Enterprise EUR 6,990 one-time, Community free (Apache 2.0)
-- Explain what's included in each tier
-- Address any specific pricing question they asked
-- Offer a call to walk through licensing details
-- Keep under 180 words. Sign as "Synergy Codes Sales".`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/ai-agent',
- icon: 'AiAgent',
- },
- selected: false,
- measured: { width: 258, height: 123 },
- dragging: false,
- },
- {
- id: 'technical-1',
- type: 'node',
- position: { x: 1100, y: 300 },
- data: {
- segments: [],
- properties: {
- label: 'Technical Specialist',
- description: 'Drafts a technical reply.',
- systemPrompt: `${PRODUCT_KNOWLEDGE}
-
-You are a senior engineer at Synergy Codes. Write a technical reply focused on integration and extension:
-- Answer technical questions concretely (embedding, custom nodes, React Flow comparison)
-- Reference how the plugin architecture and schema-driven properties panel work
-- Offer a demo call to show custom node patterns
-- Keep under 180 words. Sign as "Synergy Codes Engineering".`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/ai-agent',
- icon: 'AiAgent',
- },
- selected: false,
- measured: { width: 258, height: 123 },
- dragging: false,
- },
- {
- id: 'general-1',
- type: 'node',
- position: { x: 1100, y: 550 },
- data: {
- segments: [],
- properties: {
- label: 'General Response',
- description: 'Drafts a general reply when no specialist branch matches.',
- systemPrompt: `${PRODUCT_KNOWLEDGE}
-
-You are a sales engineer at Synergy Codes. Write a friendly general reply:
-- Acknowledge the inquiry
-- Summarize what Workflow Builder is in 2-3 sentences
-- Ask a clarifying question to direct the conversation
-- Offer a discovery call
-- Keep under 150 words. Sign as "Synergy Codes Team".`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/ai-agent',
- icon: 'AiAgent',
- },
- selected: false,
- measured: { width: 258, height: 123 },
- dragging: false,
- },
- {
- id: 'review-1',
- type: 'node',
- position: { x: 1500, y: 300 },
- data: {
- segments: [],
- properties: {
- label: 'Final QA Check',
- description: 'Reviews the draft for accuracy and tone before sending.',
- systemPrompt: `${PRODUCT_KNOWLEDGE}
-
-Review the draft email reply from the previous step. Check for:
-1. **Factual accuracy** — does it match the product knowledge? Any wrong claims?
-2. **Tone** — professional but approachable? Not too salesy?
-3. **Completeness** — did it address all the customer's questions?
-4. **Call to action** — is there a clear next step?
-
-If everything is good, output: "✅ APPROVED" followed by the final email text.
-If there are issues, output: "⚠️ NEEDS REVISION" followed by specific corrections.`,
- errors: [],
- errorPolicy: 'fail',
- },
- type: 'ai-studio/ai-agent',
- icon: 'AiAgent',
- },
- selected: false,
- measured: { width: 258, height: 123 },
- dragging: false,
- },
- ],
- edges: [
- {
- source: 'trigger-1',
- sourceHandle: 'source',
- target: 'classify-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-trigger-classify',
- data: {},
- },
- {
- source: 'classify-1',
- sourceHandle: 'source',
- target: 'decision-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-classify-decision',
- data: {},
- },
- {
- source: 'decision-1',
- sourceHandle: 'source:inner:pricing',
- zIndex: 1001,
- target: 'pricing-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-decision-pricing',
- data: {},
- },
- {
- source: 'decision-1',
- sourceHandle: 'source:inner:technical',
- zIndex: 1001,
- target: 'technical-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-decision-technical',
- data: {},
- },
- {
- source: 'decision-1',
- sourceHandle: 'source:inner:general',
- zIndex: 1001,
- target: 'general-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-decision-general',
- data: {},
- },
- {
- source: 'pricing-1',
- sourceHandle: 'source',
- target: 'review-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-pricing-review',
- data: {},
- },
- {
- source: 'technical-1',
- sourceHandle: 'source',
- target: 'review-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-technical-review',
- data: {},
- },
- {
- source: 'general-1',
- sourceHandle: 'source',
- target: 'review-1',
- targetHandle: 'target',
- type: 'labelEdge',
- id: 'edge-general-review',
- data: {},
- },
- ],
- viewport: { x: 100, y: 100, zoom: 0.6 },
- },
- layoutDirection: 'RIGHT',
-};
-
-export const salesInquiryFlow: TemplateModel = {
- id: 202,
- name: 'Sales Inquiry Pipeline',
- value: diagram,
- icon: 'Envelope',
-};
diff --git a/apps/ai-studio/src/data/support-triage-flow.ts b/apps/ai-studio/src/data/support-triage-flow.ts
new file mode 100644
index 000000000..a11083a6c
--- /dev/null
+++ b/apps/ai-studio/src/data/support-triage-flow.ts
@@ -0,0 +1,352 @@
+import type { DiagramModel, TemplateModel } from '@workflowbuilder/sdk';
+
+const SUPPORT_CONTEXT = `You are part of the customer support team for Lumen, a SaaS analytics product.
+
+Plans: Free, Pro ($49 / month), and Team (custom pricing).
+Support style: empathetic, concise, solution-first. Always acknowledge how the
+customer feels, give concrete next steps, and never promise a timeline you cannot keep.`;
+
+const diagram: DiagramModel = {
+ name: 'Customer Support Triage',
+ diagram: {
+ nodes: [
+ {
+ id: 'trigger-1',
+ type: 'start-node',
+ position: { x: 0, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'New Support Ticket',
+ description: 'A support ticket arrives in the shared inbox.',
+ inputPrompt: `Subject: Charged twice AND export is broken
+
+Hi, I've been on the Pro plan for 8 months and I just noticed TWO $49 charges on my card this month instead of one. On top of that, the CSV export on the Reports page has been stuck on a spinner for two days.
+
+I have a board meeting on Thursday and I genuinely need that export working. This is really frustrating - can someone please sort out the refund and tell me how to get my data out?
+
+Thanks,
+Marcus
+Head of Ops, Brightwave`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/trigger',
+ icon: 'Lightning',
+ },
+ selected: false,
+ measured: { width: 258, height: 63 },
+ dragging: false,
+ },
+ {
+ id: 'classify-1',
+ type: 'node',
+ position: { x: 350, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Classify Ticket',
+ description: 'Detects the primary issue type, urgency and sentiment.',
+ systemPrompt: `${SUPPORT_CONTEXT}
+
+Read the incoming support ticket and classify it. A ticket may mention several
+problems - pick the SINGLE most important one as the primary type.
+
+Return exactly this format:
+
+**Type:** [one of: billing / bug / how-to / other]
+**Urgency:** [high / medium / low]
+**Sentiment:** [happy / neutral / frustrated]
+**Summary:** [one sentence describing the core request]
+**Also mentioned:** [any secondary issues, or "none"]
+
+Use the exact lowercase keyword on the Type line - it drives downstream routing.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'decision-1',
+ type: 'decision-node',
+ position: { x: 700, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Route by Type',
+ description: 'Sends the ticket to the right responder.',
+ decisionBranches: [
+ {
+ id: 'branch-billing',
+ sourceHandle: 'source:inner:billing',
+ label: 'Billing',
+ conditions: [
+ {
+ x: '{{nodes.classify-1.response}}',
+ y: 'billing',
+ comparisonOperator: 'isContaining',
+ logicalOperator: 'AND',
+ },
+ ],
+ },
+ {
+ id: 'branch-bug',
+ sourceHandle: 'source:inner:bug',
+ label: 'Bug',
+ conditions: [
+ {
+ x: '{{nodes.classify-1.response}}',
+ y: 'bug',
+ comparisonOperator: 'isContaining',
+ logicalOperator: 'AND',
+ },
+ ],
+ },
+ {
+ id: 'branch-general',
+ sourceHandle: 'source:inner:general',
+ label: 'How-to / Other',
+ conditions: [],
+ },
+ ],
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/decision',
+ icon: 'ArrowsSplit',
+ },
+ selected: false,
+ measured: { width: 258, height: 236 },
+ dragging: false,
+ },
+ {
+ id: 'billing-1',
+ type: 'node',
+ position: { x: 1100, y: 50 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Billing Reply',
+ description: 'Drafts a reply for billing and payment issues.',
+ systemPrompt: `${SUPPORT_CONTEXT}
+
+You handle billing issues. Draft a reply to the customer:
+- Open by acknowledging the problem and apologising for the duplicate charge
+- Explain the refund will be issued to the original card and how long it usually takes
+- If they also reported a non-billing problem, tell them you've looped in the right team and they'll hear back separately
+- End with a clear next step
+- Keep it under 160 words. Sign as "Lumen Support".`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'bug-1',
+ type: 'node',
+ position: { x: 1100, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Bug Triage Reply',
+ description: 'Drafts a reply for product bugs and breakage.',
+ systemPrompt: `${SUPPORT_CONTEXT}
+
+You triage product bugs. Draft a reply to the customer:
+- Acknowledge the broken behaviour and that it is not expected
+- Offer a workaround if a plausible one exists (e.g. a different export path)
+- Ask for the details engineering will need: browser, time it last worked, a screenshot
+- Set honest expectations - it has been escalated, not "fixed by Thursday"
+- Keep it under 160 words. Sign as "Lumen Support".`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'general-1',
+ type: 'node',
+ position: { x: 1100, y: 550 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'How-to Reply',
+ description: 'Drafts a reply for how-to questions and everything else.',
+ systemPrompt: `${SUPPORT_CONTEXT}
+
+You answer how-to and general questions. Draft a friendly reply:
+- Acknowledge the question
+- Give a concrete, step-by-step answer if you can, or ask one clarifying question if you can't
+- Point to the relevant Help Center section
+- Keep it under 140 words. Sign as "Lumen Support".`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'qa-1',
+ type: 'node',
+ position: { x: 1500, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Tone & Accuracy QA',
+ description: 'Reviews the drafted reply before it goes out.',
+ systemPrompt: `${SUPPORT_CONTEXT}
+
+Review the drafted reply from the previous step before it is sent. Check:
+1. **Tone** - empathetic and professional, not defensive or robotic?
+2. **Accuracy** - does it match the plan and policy facts above? No invented promises?
+3. **Completeness** - did it address the customer's main request?
+4. **Next step** - is there a clear call to action?
+
+If it is good, output "✅ APPROVED" followed by the final reply text.
+If not, output "⚠️ NEEDS REVISION" followed by specific, actionable fixes.`,
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/ai-agent',
+ icon: 'AiAgent',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ {
+ id: 'visualize-1',
+ type: 'node',
+ position: { x: 1850, y: 300 },
+ data: {
+ segments: [],
+ properties: {
+ label: 'Visualize',
+ description: 'Visualizes the approved reply (auto-detects the format).',
+ errors: [],
+ errorPolicy: 'fail',
+ },
+ type: 'ai-studio/visualize',
+ icon: 'Eye',
+ },
+ selected: false,
+ measured: { width: 258, height: 123 },
+ dragging: false,
+ },
+ ],
+ edges: [
+ {
+ source: 'trigger-1',
+ sourceHandle: 'source',
+ target: 'classify-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-trigger-classify',
+ data: {},
+ },
+ {
+ source: 'classify-1',
+ sourceHandle: 'source',
+ target: 'decision-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-classify-decision',
+ data: {},
+ },
+ {
+ source: 'decision-1',
+ sourceHandle: 'source:inner:billing',
+ zIndex: 1001,
+ target: 'billing-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-decision-billing',
+ data: {},
+ },
+ {
+ source: 'decision-1',
+ sourceHandle: 'source:inner:bug',
+ zIndex: 1001,
+ target: 'bug-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-decision-bug',
+ data: {},
+ },
+ {
+ source: 'decision-1',
+ sourceHandle: 'source:inner:general',
+ zIndex: 1001,
+ target: 'general-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-decision-general',
+ data: {},
+ },
+ {
+ source: 'billing-1',
+ sourceHandle: 'source',
+ target: 'qa-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-billing-qa',
+ data: {},
+ },
+ {
+ source: 'bug-1',
+ sourceHandle: 'source',
+ target: 'qa-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-bug-qa',
+ data: {},
+ },
+ {
+ source: 'general-1',
+ sourceHandle: 'source',
+ target: 'qa-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-general-qa',
+ data: {},
+ },
+ {
+ source: 'qa-1',
+ sourceHandle: 'source',
+ target: 'visualize-1',
+ targetHandle: 'target',
+ type: 'labelEdge',
+ id: 'edge-qa-visualize',
+ data: {},
+ },
+ ],
+ viewport: { x: 100, y: 100, zoom: 0.6 },
+ },
+ layoutDirection: 'RIGHT',
+};
+
+export const supportTriageFlow: TemplateModel = {
+ id: 301,
+ name: 'Customer Support Triage',
+ value: diagram,
+ icon: 'Envelope',
+};
diff --git a/apps/ai-studio/src/hooks/use-backend-execution.ts b/apps/ai-studio/src/hooks/use-backend-execution.ts
index 2ac606541..77bff5f6a 100644
--- a/apps/ai-studio/src/hooks/use-backend-execution.ts
+++ b/apps/ai-studio/src/hooks/use-backend-execution.ts
@@ -2,6 +2,7 @@ import { useCallback, useRef } from 'react';
import { connectExecutionStream } from '../adapters/execution-stream-adapter';
import { BACKEND_URL } from '../config';
+import { getTurnstileToken } from '../security/turnstile';
import { resetExecution, setExecutionStarted, useExecutionStore } from '../stores/use-execution-store';
export function useBackendExecution() {
@@ -26,9 +27,16 @@ export function useBackendExecution() {
const { id: workflowId } = (await wfResponse.json()) as { id: string };
+ // Bot-verification token for the public demo. Undefined when Turnstile is
+ // not configured (local dev) — the backend then skips verification too.
+ const turnstileToken = await getTurnstileToken();
+
const execResponse = await fetch(`${BACKEND_URL}/api/workflows/${workflowId}/execute`, {
method: 'POST',
- headers: { 'Content-Type': 'application/json' },
+ headers: {
+ 'Content-Type': 'application/json',
+ ...(turnstileToken ? { 'cf-turnstile-token': turnstileToken } : {}),
+ },
body: JSON.stringify({ sourceVersion: 'draft', triggerPayload }),
});
diff --git a/apps/ai-studio/src/nodes/ai-agent/default-properties-data.ts b/apps/ai-studio/src/nodes/ai-agent/default-properties-data.ts
index 5fe48ee57..99b2adb30 100644
--- a/apps/ai-studio/src/nodes/ai-agent/default-properties-data.ts
+++ b/apps/ai-studio/src/nodes/ai-agent/default-properties-data.ts
@@ -6,5 +6,6 @@ export const defaultPropertiesData: NodeDataProperties event.stopPropagation()}>
+
+
+ Visualize
+ {badge}
+
+
+
+
+ {isVector && (
+
+ )}
+
+
+
+
+ Loading…}>
+
+
+ ) is reachable via explicit override only.
+
+export type VisualizeRenderer = 'markdown' | 'text' | 'json' | 'table' | 'stat-cards' | 'chart' | 'diagram';
+
+type DetectResult = {
+ renderer: VisualizeRenderer;
+ // Parsed payload for structured formats (json/table/chart), so renderers do not re-parse.
+ data?: unknown;
+ // True when the data could also be charted (drives the "try as chart" suggestion).
+ chartable?: boolean;
+};
+
+// A fenced ```mermaid block, or a first line that is unambiguously a mermaid
+// declaration. Deliberately strict: flowchart/graph need a direction, and
+// prose-like bare words ("pie", "graph", "timeline", "journey") are NOT matched,
+// so plain prose starting with such a word is not mis-detected as a diagram.
+const MERMAID_FENCE = /^```mermaid\s*\n?([\s\S]*?)```$/;
+const MERMAID_FIRST_LINE =
+ /^(?:sequenceDiagram|classDiagram|stateDiagram(?:-v2)?|erDiagram|gantt|gitGraph|mindmap|quadrantChart|requirementDiagram)\b|^(?:flowchart|graph)\s+(?:TB|TD|BT|RL|LR)\b/;
+
+const LABEL_KEYS = new Set(['label', 'name', 'category', 'x', 'key', 'date', 'month', 'day']);
+const VALUE_KEYS = new Set(['value', 'count', 'y', 'amount', 'total', 'qty', 'quantity', 'score']);
+const CHART_TYPES = new Set(['bar', 'line', 'pie', 'area', 'donut']);
+
+function isScalar(value: unknown): boolean {
+ return value === null || ['string', 'number', 'boolean'].includes(typeof value);
+}
+
+function isPlainObject(value: unknown): value is Record {
+ return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function looksLikeChartArray(array: unknown[]): boolean {
+ if (array.length === 0) {
+ return false;
+ }
+ return array.every((item) => {
+ if (!isPlainObject(item)) {
+ return false;
+ }
+ const keys = Object.keys(item).map((k) => k.toLowerCase());
+ const hasLabel = keys.some((k) => LABEL_KEYS.has(k));
+ const hasNumericValue = Object.entries(item).some(
+ ([k, v]) => VALUE_KEYS.has(k.toLowerCase()) && typeof v === 'number',
+ );
+ return hasLabel && hasNumericValue;
+ });
+}
+
+function hasNumericColumn(rows: Record[]): boolean {
+ if (rows.length === 0) {
+ return false;
+ }
+ return Object.keys(rows[0]).some((key) => rows.every((row) => typeof row[key] === 'number'));
+}
+
+function detectJson(parsed: unknown): DetectResult | null {
+ // Explicit chart spec envelope: { type: 'bar'|'line'|..., data: [...] }
+ if (
+ isPlainObject(parsed) &&
+ typeof parsed['type'] === 'string' &&
+ Array.isArray(parsed['data']) &&
+ CHART_TYPES.has(parsed['type'].toLowerCase())
+ ) {
+ return { renderer: 'chart', data: parsed };
+ }
+
+ if (Array.isArray(parsed)) {
+ if (looksLikeChartArray(parsed)) {
+ return { renderer: 'chart', data: parsed, chartable: true };
+ }
+ if (parsed.length > 0 && parsed.every(isPlainObject)) {
+ return { renderer: 'table', data: parsed, chartable: hasNumericColumn(parsed as Record[]) };
+ }
+ return {
+ renderer: 'table',
+ data: parsed,
+ chartable: parsed.length > 0 && parsed.every((v) => typeof v === 'number'),
+ };
+ }
+
+ if (isPlainObject(parsed)) {
+ return Object.values(parsed).every(isScalar)
+ ? { renderer: 'stat-cards', data: parsed }
+ : { renderer: 'json', data: parsed };
+ }
+
+ return null; // scalar JSON (number/string/bool) is not "structured"
+}
+
+function parseCsv(text: string): Record[] | null {
+ const lines = text.split(/\r?\n/).filter((line) => line.trim().length > 0);
+ if (lines.length < 2) {
+ return null;
+ }
+ const delimiter = lines[0].includes('\t') ? '\t' : ',';
+ const counts = lines.map((line) => line.split(delimiter).length);
+ // Strong guard against prose: every line must have the same column count (>= 2).
+ if (counts[0] < 2 || !counts.every((c) => c === counts[0])) {
+ return null;
+ }
+ const headers = lines[0].split(delimiter).map((h) => h.trim());
+ // Headers should look like headers, not sentences.
+ if (headers.some((h) => h.length === 0 || h.length > 30)) {
+ return null;
+ }
+ return lines.slice(1).map((line) => {
+ const cells = line.split(delimiter);
+ const row: Record = {};
+ for (const [index, header] of headers.entries()) {
+ row[header] = (cells[index] ?? '').trim();
+ }
+ return row;
+ });
+}
+
+export function detectFormat(input: string): DetectResult {
+ const text = (input ?? '').trim();
+ if (!text) {
+ return { renderer: 'text' };
+ }
+
+ // 1. Mermaid diagram: a fenced ```mermaid block, or a clearly-declared first line.
+ const fence = MERMAID_FENCE.exec(text);
+ if (fence) {
+ return { renderer: 'diagram', data: fence[1].trim() };
+ }
+ const firstLine = text.split(/\r?\n/)[0].trim();
+ if (MERMAID_FIRST_LINE.test(firstLine)) {
+ return { renderer: 'diagram', data: text };
+ }
+
+ // 2. JSON (gate on { or [ so bare scalars do not register as JSON).
+ if (text.startsWith('{') || text.startsWith('[')) {
+ try {
+ const result = detectJson(JSON.parse(text));
+ if (result) {
+ return result;
+ }
+ } catch {
+ // not valid JSON — fall through
+ }
+ }
+
+ // 3. CSV / TSV.
+ const csv = parseCsv(text);
+ if (csv) {
+ return { renderer: 'table', data: csv };
+ }
+
+ // 4. Fallback: markdown (handles both real markdown and plain prose well).
+ return { renderer: 'markdown' };
+}
diff --git a/apps/ai-studio/src/utils/export-visualization.ts b/apps/ai-studio/src/utils/export-visualization.ts
new file mode 100644
index 000000000..d32be3ba2
--- /dev/null
+++ b/apps/ai-studio/src/utils/export-visualization.ts
@@ -0,0 +1,62 @@
+import { toBlob, toPng, toSvg } from 'html-to-image';
+
+const PNG_OPTIONS = { pixelRatio: 2, backgroundColor: '#ffffff' };
+
+function triggerDownload(href: string, filename: string): void {
+ const link = document.createElement('a');
+ link.href = href;
+ link.download = filename;
+ link.click();
+}
+
+/** Render a DOM subtree to a PNG and download it. */
+export async function downloadPng(element: HTMLElement, filename = 'visualization.png'): Promise {
+ const dataUrl = await toPng(element, PNG_OPTIONS);
+ triggerDownload(dataUrl, filename);
+}
+
+/**
+ * Copy a DOM subtree to the clipboard as a PNG. Returns true if it reached the
+ * clipboard, false if it fell back to a download (e.g. Firefox, which cannot
+ * write image blobs to the clipboard).
+ */
+export async function copyImage(element: HTMLElement): Promise {
+ const blob = await toBlob(element, PNG_OPTIONS);
+ if (!blob) {
+ return false;
+ }
+ const canCopyImage = typeof ClipboardItem !== 'undefined' && Boolean(navigator.clipboard?.write);
+ if (canCopyImage) {
+ try {
+ await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+ return true;
+ } catch {
+ // fall through to download
+ }
+ }
+ triggerDownload(URL.createObjectURL(blob), 'visualization.png');
+ return false;
+}
+
+/** Download a DOM subtree as SVG (serializes an inner