React Workflow Builder: Trigger, Zweige und KI-Schritte

Deine Nutzer sollen ihre eigenen Automatisierungen einrichten: Wenn eine Rechnung überfällig ist, prüf den offenen Betrag, lass eine KI eine Erinnerung entwerfen und schick sie ab. Der naheliegende Start ist React Flow, und nach einem Nachmittag stehen Kästen und Linien auf einem Canvas. Dann beginnt die eigentliche Arbeit. Ein React Workflow Builder braucht einen Katalog von Schritten, ein Einstellungsformular pro Schritt, Zweige, die keine Schleife bilden können, Undo, eine Ansicht für einen laufenden Run und ein Layout, das auch auf dem Smartphone bedienbar ist. In diesem Tutorial baust du genau diesen Editor auf React Flow, mit Triggern, Ja/Nein-Zweigen und KI-Schritten. Danach baust du eine ähnliche Automatisierung als Regelliste, für alle, die lieber keine Linien ziehen. Die Beispiele nutzen Workflow Canvas und Rule Builder von Wingo UI, der Bibliothek, die wir bauen. Wir sind also nicht neutral. Das Datenmodell und die Prüfungen gelten aber für jede Umsetzung.

Was braucht ein React Workflow Builder zusätzlich zu React Flow?

Er braucht sieben Schichten Anwendungscode, denn React Flow (@xyflow/react) liefert nur den Canvas: Knoten, Kanten, Handles, Pan, Zoom und eine Minimap. Mit dieser Liste haben wir gearbeitet:

Der Wert ist einfaches JSON, { nodes, edges }. Du kannst ihn also speichern, diffen und auf dem Server mit der Engine ausführen, die du schon hast. Der Canvas selbst führt nie etwas aus.

Wie installiere ich den Workflow Canvas?

Installier ihn mit der CLI von Wingo UI, die den Quellcode in dein Projekt kopiert:

npx wingo-ui@latest add workflow-canvas

Die CLI schreibt components/ui/workflow-canvas.tsx samt den Abhängigkeiten aus Wingo UI (Button, Textarea, Drawer, Alert Dialog und weitere) und installiert @xyflow/react, motion und lucide-react. Das Basis-CSS von React Flow importiert die Komponente selbst. Sie füllt ihr Elternelement aus, also gib diesem eine feste Höhe. Das Einstellungsformular weiter unten nutzt außerdem ein Select, das nicht zu diesen Abhängigkeiten gehört: Führ zusätzlich npx wingo-ui@latest add select aus.

Wie definiere ich Trigger, Aktionen und KI-Schritte?

Jeder Schritttyp ist eine WorkflowNodeDef mit einem kind: trigger, action, condition, ai, delay oder end. Das kind legt die Icon-Kachel und die Regeln fest (ein Trigger nimmt keine eingehende Linie an, eine Bedingung bekommt zwei Ausgänge). Leg den Katalog auf Modulebene an, damit er zwischen den Renders seine Identität behält.

// app/automations/node-types.tsx
import { Flag, Hourglass, Mail, Receipt, Sparkles, Split } from "lucide-react"
import type { WorkflowNodeDef } from "@/components/ui/workflow-canvas"

export const nodeTypes: WorkflowNodeDef[] = [
  {
    type: "invoice-overdue",
    kind: "trigger",
    label: "Überfällige Rechnung",
    description: "Wenn eine Rechnung ihr Fälligkeitsdatum überschreitet",
    icon: <Receipt />,
    group: "Trigger",
    defaults: { subtitle: "Nach 30 Tagen" },
  },
  {
    type: "condition",
    kind: "condition",
    label: "Bedingung",
    description: "Teilt den Ablauf in Ja und Nein",
    icon: <Split />,
    group: "Logik",
  },
  {
    type: "ai-draft",
    kind: "ai",
    label: "Mit KI entwerfen",
    description: "Schreibt die Nachricht nach deinen Anweisungen",
    icon: <Sparkles />,
    group: "KI",
    defaults: { subtitle: "Ton: Höflich", config: { prompt: "Schreib eine kurze, höfliche Zahlungserinnerung." } },
    keywords: ["llm", "schreiben", "gpt", "claude"],
  },
  {
    type: "send-email",
    kind: "action",
    label: "E-Mail senden",
    icon: <Mail />,
    group: "Kommunikation",
  },
  { type: "delay", kind: "delay", label: "Warten", icon: <Hourglass />, group: "Logik" },
  { type: "end", kind: "end", label: "Ende", icon: <Flag />, group: "Logik" },
]

group wird zur Überschrift im Hinzufügen-Menü, und über keywords findet jemand den KI-Schritt, wenn er „llm“ tippt. Eine Bedingung bekommt die Ausgänge Yes und No, außer du gibst eigene outputs mit, etwa drei Stufen für einen Lead-Score.

Wie baue ich einen Zweig mit Ja- und Nein-Ausgang?

Ein Zweig besteht aus zwei Kanten von derselben Bedingung, jede mit einem sourceHandle, das den Ausgang benennt (yes oder no). Schritte dürfen bei 0, 0 starten. layoutWorkflow ordnet sie vom Trigger aus in Ebenen an, die Zweige nebeneinander in der Reihenfolge der Ausgänge der Bedingung. Liegen alle Positionen bei null, ordnet der Canvas den Graphen beim Mounten zwar auch einmal selbst an. Rufst du layoutWorkflow aber selbst auf, enthält der Wert, den du speicherst, schon echte Positionen.

// app/automations/initial.ts
// nur von Client-Komponenten importiert: workflow-canvas.tsx ist ein "use client"-Modul
import { layoutWorkflow, type WorkflowEdge, type WorkflowNode, type WorkflowValue } from "@/components/ui/workflow-canvas"
import { nodeTypes } from "./node-types"

const step = (id: string, type: string, title: string): WorkflowNode => ({
  id,
  type,
  position: { x: 0, y: 0 },
  data: { title },
})

const edges: WorkflowEdge[] = [
  { id: "e1", source: "start", target: "check" },
  { id: "e2", source: "check", target: "draft", sourceHandle: "yes" },
  { id: "e3", source: "draft", target: "send" },
  { id: "e4", source: "check", target: "stop", sourceHandle: "no" },
]

export const initial: WorkflowValue = {
  nodes: layoutWorkflow(
    [
      step("start", "invoice-overdue", "Rechnung 30 Tage überfällig"),
      step("check", "condition", "Offener Betrag über $1.000?"),
      step("draft", "ai-draft", "Erinnerung entwerfen"),
      step("send", "send-email", "Kunden per E-Mail anschreiben"),
      step("stop", "end", "Nichts zu senden"),
    ],
    edges,
    { nodeTypes },
  ),
  edges,
}

Gerendert wird der Workflow in einer Client-Komponente. AlertDialogProvider gehört einmal weit oben in den Baum, denn wer einen verbundenen Schritt löscht, muss das darüber bestätigen:

// app/automations/overdue-editor.tsx (erste Version)
"use client"

import { useState } from "react"
import { AlertDialogProvider } from "@/components/ui/alert-dialog"
import { WorkflowCanvas } from "@/components/ui/workflow-canvas"
import { initial } from "./initial"
import { nodeTypes } from "./node-types"

export function OverdueEditor() {
  const [workflow, setWorkflow] = useState(initial)
  return (
    <div className="h-[560px]">
      <WorkflowCanvas nodeTypes={nodeTypes} value={workflow} onValueChange={setWorkflow} />
      <AlertDialogProvider />
    </div>
  )
}

onValueChange feuert einmal pro übernommener Änderung: ein Ablegen, eine Verbindung, ein eingefügter Schritt, ein Undo. Ein Ziehen flutet deinen State also nicht mit Positionen, und ein Wert, der mitten im Ziehen ankommt, wartet bis zum Ablegen. Der Canvas lehnt falsche Verbindungen schon beim Ziehen ab: Eine Linie in einen Trigger, eine Linie, die eine Schleife schließen würde, oder eine zweite Linie aus demselben Zweig wird rot und rastet nicht ein.

Fährst du mit der Maus über eine Linie, erscheint ein +-Button, der dazwischen einen Schritt einfügt. Lässt du eine Linie auf einer leeren Fläche los, öffnet sich dort das Hinzufügen-Menü. Tidy ordnet den Graphen neu an, und das Ganze lässt sich mit einem einzigen Undo zurücknehmen.

Wie bekommt jeder Schritt seine eigenen Einstellungen?

Gib eine Funktion renderInspector mit: Sie liefert das Einstellungsformular für den ausgewählten Schritt, das sich in einem Panel rechts öffnet. Du bekommst den Schritt und eine api mit update (führt Änderungen mit den Daten des Schritts zusammen), def (der Katalogeintrag des Schritts), fields (die Standardfelder für Name, Beschreibung und Überspringen) und readOnly. Hier bekommt der KI-Schritt einen Prompt und einen Ton, die anderen Schritte behalten die Standardfelder:

// app/automations/inspect.tsx
import type { ReactNode } from "react"
import { Select } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import type { WorkflowInspectorApi, WorkflowNode } from "@/components/ui/workflow-canvas"

const TONES = [
  { value: "polite", label: "Höflich" },
  { value: "firm", label: "Bestimmt" },
]

export function inspect(node: WorkflowNode, { update, fields, readOnly }: WorkflowInspectorApi): ReactNode {
  if (node.type !== "ai-draft") return fields
  const config = node.data.config ?? {}
  return (
    <>
      {fields}
      <Textarea
        label="Anweisungen für die KI"
        value={String(config.prompt ?? "")}
        onValueChange={(prompt) => update({ config: { ...config, prompt } })}
        readOnly={readOnly}
        minRows={3}
      />
      <Select
        label="Ton"
        options={TONES}
        value={String(config.tone ?? "polite")}
        onValueChange={(tone) =>
          update({ config: { ...config, tone }, subtitle: `Ton: ${TONES.find((t) => t.value === tone)?.label}` })
        }
        readOnly={readOnly}
      />
    </>
  )
}

update führt nur flach in data zusammen. Übernimm die alte config also per Spread, sonst verlierst du die anderen Einstellungen. Tippen im Prompt wird in Schüben von 500ms zu je einem Undo-Schritt zusammengefasst, damit Ctrl+Z einen Absatz nicht Buchstabe für Buchstabe löscht. Hat deine App schon ein eigenes Seitenpanel, setz inspector="none" und öffne dein Panel über onSelectedIdChange.

Wie validiere ich einen Workflow vor dem Speichern?

Ruf validateWorkflow(value, nodeTypes) auf: Es liefert die Probleme, die eine Automatisierung am Laufen hindern, als Objekte der Form { nodeId?, edgeId?, message }. Es erkennt: kein Trigger oder mehr als einer, eine Verbindung in einen Trigger, eine Schleife, ein Zweig einer Bedingung, der ins Leere führt, ein unbekannter Schritttyp und eine Verbindung zu einem fehlenden Schritt. Der Canvas markiert diese Schritte schon mit einem roten Ring. Wähl beim Speichern den ersten kaputten Schritt aus, damit sich seine Einstellungen öffnen, und entferne den Run-Zustand, bevor der Graph den Browser verlässt:

// app/automations/save.ts
import { validateWorkflow, type WorkflowValue } from "@/components/ui/workflow-canvas"
import { nodeTypes } from "./node-types"

// status und error beschreiben den letzten Run, nicht die Automatisierung
const withoutRunState = (value: WorkflowValue): WorkflowValue => ({
  ...value,
  nodes: value.nodes.map(({ data: { status: _status, error: _error, ...data }, ...node }) => ({ ...node, data })),
})

export async function saveWorkflow(workflow: WorkflowValue, select: (id: string | null) => void) {
  const issues = validateWorkflow(workflow, nodeTypes)
  if (issues.length > 0) {
    select(issues.find((issue) => issue.nodeId)?.nodeId ?? null)
    return false
  }
  const response = await fetch("/api/automations/overdue", {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(withoutRunState(workflow)),
  })
  return response.ok
}

Führ dieselben Prüfungen auf dem Server aus, denn den Client kann man umgehen. Eine Falle in Next.js: workflow-canvas.tsx beginnt mit "use client". Ein Route Handler, der validateWorkflow daraus importiert, bekommt deshalb eine Client-Referenz, und der Aufruf wirft „Attempted to call validateWorkflow() from the server“. Kopier die Prüfungen, die du brauchst, stattdessen in ein Modul, das nur auf dem Server läuft.

Wie zeige ich einen Run auf dem Canvas?

Setz running und schreib den data.status jedes Schritts, den Rest zeichnet der Canvas. onRun fügt der Toolbar einen Run-Button hinzu, running sperrt das Bearbeiten, und der Status erscheint als Markierung. Der Status-Typ ist derselbe, den die UI für Tool Calls von KI-Agenten nutzt: pending, running, complete und error, dazu canceled und awaiting-approval für einen KI-Schritt, der darauf wartet, dass eine Person seine Ausgabe freigibt. Die Linie in den laufenden Schritt fließt, fertige Linien werden grün, und die Ansicht folgt dem laufenden Schritt, außer die Person hat die Ansicht in den letzten 3 Sekunden selbst verschoben. Dein Server führt die Schritte aus und streamt ihren Status:

// app/automations/run.ts
import type { Dispatch, SetStateAction } from "react"
import type { WorkflowNodeData, WorkflowValue } from "@/components/ui/workflow-canvas"

type StepEvent = { stepId: string; status: WorkflowNodeData["status"]; error?: string }

export async function startRun(
  automationId: string,
  setWorkflow: Dispatch<SetStateAction<WorkflowValue>>,
  setRunning: (running: boolean) => void,
) {
  setRunning(true)
  const response = await fetch(`/api/automations/${automationId}/runs`, { method: "POST" })
  if (!response.ok) return setRunning(false)
  const { runId } = await response.json()
  const source = new EventSource(`/api/runs/${runId}/events`)
  const stop = () => {
    source.close()
    setRunning(false)
  }
  source.onmessage = (event) => {
    const { stepId, status, error } = JSON.parse(event.data) as StepEvent
    setWorkflow((current) => ({
      ...current,
      nodes: current.nodes.map((node) =>
        node.id === stepId ? { ...node, data: { ...node.data, status, error } } : node,
      ),
    }))
  }
  source.addEventListener("done", stop)
  source.onerror = stop
}

Ein fehlgeschlagener Schritt zeigt seinen error im Inspector. KI-Schritte scheitern auf die unterschiedlichsten Arten (ein Timeout, eine Ablehnung durch das Modell, ein Rate Limit). Schick deshalb den Fehlertext des Modells selbst mit, damit die Person die Fälle unterscheiden kann.

Wie verbinde ich Speichern, Einstellungen und Runs in einem Editor?

Halte den Workflow, die Auswahl und das Run-Flag im Editor und gib jedem Helfer, was er braucht. Das ersetzt die erste Version von overdue-editor.tsx:

// app/automations/overdue-editor.tsx
"use client"

import { useState } from "react"
import { AlertDialogProvider } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { WorkflowCanvas } from "@/components/ui/workflow-canvas"
import { initial } from "./initial"
import { inspect } from "./inspect"
import { nodeTypes } from "./node-types"
import { startRun } from "./run"
import { saveWorkflow } from "./save"

export function OverdueEditor() {
  const [workflow, setWorkflow] = useState(initial)
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [running, setRunning] = useState(false)

  return (
    <div className="flex flex-col gap-3">
      <Button className="self-end" disabled={running} onClick={() => saveWorkflow(workflow, setSelectedId)}>
        Speichern
      </Button>
      <div className="h-[560px]">
        <WorkflowCanvas
          nodeTypes={nodeTypes}
          value={workflow}
          onValueChange={setWorkflow}
          selectedId={selectedId}
          onSelectedIdChange={setSelectedId}
          renderInspector={inspect}
          onRun={() => startRun("overdue", setWorkflow, setRunning)}
          running={running}
        />
      </div>
      <AlertDialogProvider />
    </div>
  )
}

Was ist eine einfachere Alternative zu einem knotenbasierten Workflow-Editor?

Die einfachere Alternative ist eine Regelliste: ein Stapel aus Karten für Wenn, Falls und Dann, der sich wie ein Satz liest. Die meisten Automatisierungen bestehen aus einem Trigger, ein paar Bedingungen und ein paar Aktionen, und eine Liste sagt das klarer als ein Graph. Der Rule Builder ergänzt eine Zusammenfassung, die die ganze Regel als einen einzigen Satz wiedergibt.

npx wingo-ui@latest add rule-builder

"use client"

import { useState } from "react"
import { Mail, Sparkles, UserPlus } from "lucide-react"
import {
  RuleBuilder,
  createRule,
  describeRule,
  type RuleActionDef,
  type RuleTriggerDef,
} from "@/components/ui/rule-builder"

const triggers: RuleTriggerDef[] = [
  {
    type: "lead-created",
    label: "Neuer Lead",
    icon: <UserPlus />,
    fields: [
      { id: "budget", label: "Budget", type: "currency" },
      {
        id: "source",
        label: "Quelle",
        type: "select",
        options: [
          { value: "referral", label: "Empfehlung" },
          { value: "website", label: "Website" },
        ],
      },
    ],
    summary: () => "ein **neuer Lead** eingeht",
  },
]

const actions: RuleActionDef[] = [
  {
    type: "ai-draft",
    label: "Antwort mit KI entwerfen",
    icon: <Sparkles />,
    tone: "info",
    params: [{ id: "prompt", label: "Anweisungen", type: "textarea", required: true }],
    summary: () => "entwirf eine Antwort mit **KI**",
    multiple: false,
  },
  {
    type: "send-email",
    label: "E-Mail senden",
    icon: <Mail />,
    params: [{ id: "to", label: "An", type: "text", required: true }],
    summary: (params) => `schreib eine E-Mail an **${params.to}**`,
  },
]

export function LeadRule() {
  const [rule, setRule] = useState(() => createRule())
  return (
    <RuleBuilder
      title="Neuen Leads antworten"
      triggers={triggers}
      actionTypes={actions}
      value={rule}
      onValueChange={(next) => {
        setRule(next)
        console.log(describeRule(next, { triggers, actions }))
      }}
      onTest={async () => ({ matched: true, message: "Der Lead von Emma Carter bekäme eine entworfene Antwort." })}
    />
  )
}

multiple: false nimmt den KI-Schritt aus der Aktionsauswahl, sobald die Regel ihn nutzt. describeRule liefert denselben Satz wie die Zusammenfassung, praktisch für Benachrichtigungstexte und die Liste der Automatisierungen. Die Bedingungen sind eine Gruppe aus lib/filters, dasselbe Modell, das der Filter Builder bearbeitet. Ein einziger Evaluator kann also beide bedienen. Apply speichert eine Änderung, Cancel oder Escape verwirft den Entwurf. onValueChange sieht deshalb nie einen Entwurf, der nicht übernommen wurde.

Canvas oder Regelliste: Was soll ich ausliefern?

Liefer die Regelliste aus, wenn die Automatisierungen linear sind, und den Canvas, wenn sie sich verzweigen. So oder so bearbeitet eine React Workflow Builder UI nur Daten. Entscheidend ist also, wer die Automatisierungen baut und wie oft eine davon einen zweiten Pfad braucht.

Die beiden speichern ihren Wert in unterschiedlicher Form (RuleValue gegenüber { nodes, edges }). Entscheide dich also pro Automatisierungstyp für einen der beiden, statt eine bestehende Automatisierung zwischen beiden hin und her zu schalten.

Wie ergänze ich eine Liste der Automatisierungen, Run-Verlauf und Logs?

Nimm die Automation Builder Page, einen Block mit dem Rest des Screens, den ein React Automation Builder rund um den Editor braucht. Er hat eine Liste der Automatisierungen mit Schaltern zum Ein- und Ausschalten und einem Balken mit den letzten 14 Runs jeder Automatisierung, den Workflow Canvas als Editor, einen Cron Picker für zeitgesteuerte Trigger, Run a test und einen Tab History, dessen Log denselben Viewer nutzt wie unser Guide zum React Log Viewer. Ohne automations zeigt er seine Beispieldaten. Gib also deine eigene Liste mit und verbinde die Callbacks mit deiner API:

"use client"

import { useState } from "react"
import { AutomationBuilderPage, type Automation, type AutomationRun } from "@/components/blocks/automation-builder-page"
import { nodeTypes } from "./node-types"

export function AutomationsScreen({ initial, runs }: { initial: Automation[]; runs: AutomationRun[] }) {
  const [automations, setAutomations] = useState(initial)
  return (
    <AutomationBuilderPage
      height="screen"
      nodeTypes={nodeTypes}
      automations={automations}
      onAutomationsChange={setAutomations}
      runs={runs}
      onToggle={async (automation, enabled) => {
        const response = await fetch(`/api/automations/${automation.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ enabled }),
        })
        if (!response.ok) throw new Error("Die Automatisierung konnte nicht aktualisiert werden")
      }}
      onSave={async (automation) => {
        const response = await fetch(`/api/automations/${automation.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(automation),
        })
        if (!response.ok) throw new Error("Die Automatisierung konnte nicht gespeichert werden")
      }}
      onTest={async (automation) => {
        const response = await fetch(`/api/automations/${automation.id}/test`, { method: "POST" })
        if (!response.ok) throw new Error(await response.text())
      }}
    />
  )
}

Gib nodeTypes immer mit, wenn deine Workflows deinen eigenen Schrittkatalog nutzen. Ohne diese Prop validiert der Block gegen seinen eingebauten CRM-Katalog, und jeder eigene Schritt zählt als unbekannter Typ: Save zeigt dann die Probleme, statt onSave aufzurufen, und das Einschalten der Automatisierung wird abgelehnt. Der Schalter reagiert optimistisch: Wird das Promise von onToggle abgelehnt, springt er mit einem Toast zurück. Wird onSave abgelehnt, bleiben die Änderungen erhalten und ein Toast erscheint. Deshalb wirft der Handler bei einer fehlgeschlagenen Antwort einen Fehler. Wird onTest abgelehnt, zeigt der Block die Meldung und öffnet das Log des Runs. In einer Admin-Shell nimmst du height="fill". Diese Shell zeigt unser Tutorial zum Next.js Admin Dashboard.

Wie mache ich einen Workflow Builder fit fürs Smartphone?

Jede Touch-Geste muss genau eine Bedeutung haben. Auf dem Canvas verschiebt ein Finger die Ansicht, und zwei Finger zoomen. Ein Schritt muss erst angetippt (ausgewählt) werden, bevor er sich ziehen lässt. Wer über eine Karte wischt, bewegt sie also nie. Langes Drücken öffnet das Menü eines Schritts, die Handles reichen 44px über die Karte hinaus, und die Einstellungen öffnen sich in einem Sheet, das auf halber Höhe stoppt, damit der Canvas darüber sichtbar bleibt. Der Rule Builder öffnet unter 768px jeden Editor und jede Auswahl als Bottom Sheet, und gezogen wird nur am Griff. Auf dem Rest einer Karte scrollt die Seite also ganz normal. Dieses Griff-Muster stammt aus unserem Guide zu dnd kit und Touch-Drag.

Wer die Tastatur nutzt, erreicht genauso viel: Tab wandert durch die Toolbar, jeden Schritt und jede Verbindung, die Pfeiltasten bewegen den ausgewählten Schritt, A fügt einen Schritt dahinter ein, Delete entfernt ihn.

Selbst bauen oder ein Workflow Builder SDK nehmen?

Bau einen React Flow Workflow Builder selbst, wenn du jede Schicht selbst in der Hand haben willst und die Zeit dafür hast. Kauf einen, wenn der Editor nicht dein Produkt ist. Die Fakten, Stand Oktober 2026, von den Seiten der jeweiligen Anbieter:

Suchst du ein xyflow Beispiel, das du Zeile für Zeile durchgehen kannst, sind die eigenen Beispiele von React Flow (opens in a new tab) die beste Quelle. Wenn dein Team schon Temporal betreibt, bringt das Workflow Builder SDK das passendere Backend mit.

Was baue ich als Nächstes?

Installier den Canvas und verbinde onValueChange mit deinem eigenen Speicher-Endpunkt: npx wingo-ui@latest add workflow-canvas. Weitere Screens, die so gebaut sind, findest du in der Kategorie Praxis: Screens und Apps.

Häufige Fragen

Ist React Flow für einen Workflow-Editor kostenlos?

Ja. React Flow (@xyflow/react) steht unter MIT-Lizenz und ist auch kommerziell kostenlos. Stand Oktober 2026 ist das offizielle Workflow-Editor-Template als Pro-Beispiel markiert, und React Flow Pro beginnt beim Starter-Plan bei $169 im Monat.

Wie baue ich in React Flow bedingte Verzweigungen?

Gib dem Bedingungsknoten zwei Source Handles, etwa yes und no, und speichere die Handle-ID an jeder Kante als sourceHandle. Dein Runner folgt dann nur den Kanten, deren sourceHandle zum Ergebnis der Bedingung passt.

Wie speichere ich einen in React gebauten Workflow?

Speichere den Graphen als JSON: ein nodes-Array mit id, type, position und einem data-Objekt für die Einstellungen jedes Schritts, dazu ein edges-Array mit source, target und sourceHandle. Entferne vor dem Speichern den Run-Zustand wie status und error, und validiere den Graphen auf dem Server noch einmal.

Kann ich validateWorkflow in einem Next.js Route Handler aufrufen?

Nicht aus der Komponentendatei. workflow-canvas.tsx beginnt mit "use client", deshalb ersetzt Next.js die Exporte auf dem Server durch Client-Referenzen, und ein Aufruf wirft einen Fehler. Leg deine Server-Prüfungen in ein Modul, das nur auf dem Server läuft.

Soll ich für Automatisierungen einen Node-Canvas oder eine Regelliste bauen?

Nimm eine Regelliste, wenn die meisten Automatisierungen aus einem Trigger, ein paar Bedingungen und ein paar Aktionen bestehen, denn sie liest sich wie ein Satz und funktioniert gut auf dem Smartphone. Nimm einen Canvas, wenn Leute Zweige brauchen, die zu verschiedenen Schritten führen, dazu Wartezeiten und KI-Schritte mitten im Ablauf.

Sind die Workflow-Komponenten von Wingo UI kostenlos?

Nein. Workflow Canvas, Rule Builder und Automation Builder Page gehören zu Wingo UI Pro, das Stand Oktober 2026 $8 im Monat, $80 im Jahr oder einmalig $150 kostet. Sie werden als Quellcode installiert, mit npx wingo-ui@latest add workflow-canvas, rule-builder oder automation-builder-page.