# React Workflow Builder: Trigger, Zweige und KI-Schritte

> Bau einen React Workflow Builder auf React Flow: Schrittkatalog, Ja/Nein-Zweige, KI-Schritte, Validierung, Live-Status und eine Regelliste für einfache Abläufe.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 16. Okt. 2026
- Kategorie: [Praxis: Screens und Apps](https://wingo-ui.com/de/blog/category/build)
- Lesezeit: 13 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-workflow-builder
- Englische Fassung: https://wingo-ui.com/blog/react-workflow-builder

## Kurz gesagt

Ein React Workflow Builder ist React Flow plus die Schichten, die React Flow dir überlässt: ein Schrittkatalog, ein Einstellungs-Panel pro Schritt, Validierung (ein Trigger, keine Schleifen, keine offenen Zweige), Undo und eine Run-Ansicht, die den Status jedes Schritts zeigt. Der Workflow Canvas von Wingo UI liefert diese Schichten auf Basis von @xyflow/react und speichert die Automatisierung als einfaches { nodes, edges }-JSON, das dein eigener Server ausführt. Für Automatisierungen mit nur einem Trigger bearbeitet der Rule Builder dieselbe Idee als Wenn/Falls/Dann-Liste, die sich wie ein Satz liest.

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](https://wingo-ui.com/components/workflow-canvas) und [Rule Builder](https://wingo-ui.com/components/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:

| Schicht | Was sie tut | Im Workflow Canvas |
| --- | --- | --- |
| Schrittkatalog | Welche Trigger, Aktionen, KI-Schritte und Logik es gibt | `nodeTypes`, gruppiert im Hinzufügen-Menü |
| Zweige | Eine Bedingung teilt den Ablauf | Ausgänge Yes und No, gespeichert als `sourceHandle` |
| Einstellungs-Panel | Den ausgewählten Schritt bearbeiten | `renderInspector`, ein Panel auf dem Desktop und ein Sheet auf dem Smartphone |
| Validierung | Kaputte Abläufe am Start hindern | `validateWorkflow`, rote Ringe an den Schritten |
| Verlauf | Ein falsches Ziehen oder Löschen rückgängig machen | Undo und Redo, ein Schritt pro übernommener Änderung |
| Run-Modus | Zeigen, was die Automatisierung gerade tut | `running` plus `data.status` pro Schritt |
| Layout | Den Graphen lesbar halten | `layoutWorkflow` und der Button Tidy |

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:

```bash
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.

```tsx
// 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.

```tsx
// 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:

```tsx
// 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.

> Live-Demo (Workflow Canvas): Zieh vom Punkt unter einem Schritt zu einem anderen Schritt und versuch dann, eine Linie zurück in den Trigger zu ziehen: Sie wird rot. Drück Run und sieh zu, wie jeder Schritt von wartend über laufend zu fertig wechselt. Probier sie unter [Workflow Canvas](https://wingo-ui.com/components/workflow-canvas) aus und installier sie mit `npx wingo-ui@latest add workflow-canvas`.

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:

```tsx
// 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:

```ts
// 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](https://wingo-ui.com/de/blog/ai-agent-tool-call-ui) 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:

```ts
// 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`:

```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.

```bash
npx wingo-ui@latest add rule-builder
```

```tsx
"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](https://wingo-ui.com/components/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.

> Live-Demo (Rule Builder): Tipp auf eine Karte, um sie zu bearbeiten, füg eine Bedingung hinzu und zieh dann eine Aktion an ihrem Griff an eine andere Stelle. Auf dem Smartphone öffnet sich jeder Editor als Bottom Sheet. Drück Test, um das Ergebnis jeder Aktion unter dem Satz zu sehen. Probier sie unter [Rule Builder](https://wingo-ui.com/components/rule-builder) aus und installier sie mit `npx wingo-ui@latest add rule-builder`.

## 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.

| Deine Automatisierungen | Ausliefern |
| --- | --- |
| Ein Trigger, ein paar Filter, ein paar Aktionen | Rule Builder |
| Zweige zu verschiedenen Schritten, Wartezeiten, KI-Schritte mitten im Ablauf | Workflow Canvas |
| Beide Arten von Nutzern | Standardmäßig Rule Builder, der Canvas als erweiterte Ansicht |

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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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](https://wingo-ui.com/de/blog/react-log-viewer). Ohne `automations` zeigt er seine Beispieldaten. Gib also deine eigene Liste mit und verbinde die Callbacks mit deiner API:

```tsx
"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](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial).

## 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](https://wingo-ui.com/de/blog/dnd-kit-mobile-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:

| Option | Lizenz und Preis | Passt gut, wenn |
| --- | --- | --- |
| [React Flow](https://github.com/xyflow/xyflow) mit deinen eigenen Schichten | MIT, kostenlos. Das [Workflow-Editor-Template](https://reactflow.dev/ui/templates/workflow-editor) ist ein Pro-Beispiel; [React Flow Pro](https://reactflow.dev/pro) beginnt bei $169 im Monat | Du jede Schicht selbst in der Hand haben willst und die Zeit dafür hast |
| [Workflow Builder SDK](https://www.workflowbuilder.io/pricing) von Synergy Codes | Community Edition unter Apache 2.0, kostenlos; Enterprise einmalig 6.990 EUR pro Organisation | Du ein Eigenschaften-Panel aus JSON Schema, ein Referenz-Backend und einen Temporal-Adapter willst |
| Workflow Canvas und Rule Builder von Wingo UI | [Wingo UI Pro](https://wingo-ui.com/de/pricing): $8 im Monat, $80 im Jahr oder einmalig $150 | Du einen Canvas und einen Listen-Editor im selben Design System willst, Smartphone-Layouts inklusive |

Suchst du ein xyflow Beispiel, das du Zeile für Zeile durchgehen kannst, sind [die eigenen Beispiele von React Flow](https://reactflow.dev/examples) 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](https://wingo-ui.com/de/blog/category/build).

## Komponenten in diesem Artikel

- [Workflow Canvas](https://wingo-ui.com/components/workflow-canvas) (Pro): A React workflow builder: a node editor for automations with a trigger, actions, AI steps and yes / no branches you connect and watch run. Installation: `npx wingo-ui@latest add workflow-canvas`
- [Rule Builder](https://wingo-ui.com/components/rule-builder) (Pro): A React rule builder for if-this-then-that automations: a trigger, conditions and ordered actions as sentence cards, read back as one sentence. Installation: `npx wingo-ui@latest add rule-builder`
- [Automation Builder Page](https://wingo-ui.com/components/automation-builder-page) (Pro): A React automation builder page: rules with on and off switches and run health, a visual workflow editor, a cron inspector, tests and logs. Installation: `npx wingo-ui@latest add automation-builder-page`

## 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.

---

Quelle: https://wingo-ui.com/de/blog/react-workflow-builder