# Automation Builder block

> Automation workflow canvas with step cards showing owner, duration and last run status

Build trigger, condition and action flows on React Flow. Add, duplicate or delete steps from a node toolbar or right click menu, edit them in an inspector. ReUI IconTile, Badge, shadcn ContextMenu, AlertDialog. For no-code automation, lead routing.

- Type: Pro block
- Category: [Flow](https://web.dev.reui.io/blocks/application/flow.md)
- Page: https://web.dev.reui.io/blocks/application/flow/flow-1
- MCP: `get_block("flow-1")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Breadcrumb, Button, Button Group, Card, Context Menu, Dropdown Menu, Field, Icon Tile, Input, Item, Kbd, Popover, Select, Separator, Sheet, Toggle, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An automation graph with undo and redo, a canvas lock, snap to grid, a minimap and an Update button that tracks unsaved edits

## Agent notes

- Replace `INITIAL_NODES`, `INITIAL_EDGES` and `WORKFLOW` in data.tsx; each step's `status` and `duration` are fixed last run values no edit changes
- `updateWorkflow` only marks the current version saved and fires a `toast`; nothing is sent to a backend
- The Owner select offers only `STEP_OWNERS`, and `createStep` adds every new step as an action owned by `INES`

## When not to use

- An LLM agent drawn as a top down tree with named branch paths and a test run: use [AI Agent Builder](https://web.dev.reui.io/blocks/application/flow/flow-2.md) (`get_block("flow-2")`)
- Watching a scheduled job run task by task, with retries and an approval hold: use [Pipeline Run Monitor](https://web.dev.reui.io/blocks/application/flow/flow-3.md) (`get_block("flow-3")`)

## Third-party libraries

- React Flow v12: [API reference](https://reactflow.dev/api-reference), [docs](https://reactflow.dev/learn), [llms.txt](https://reactflow.dev/llms.txt)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/flow-1
```

## About Flow blocks

### When to use

- An editable node canvas for automation workflows or AI agent steps, with a side inspector per step
- A run view for a scheduled data pipeline: task states, retries and a human approval gate
- A driver map that ties initiatives to the input metrics and north star they are meant to move

### When not to use

- An overview page of KPI tiles, charts and work lists with no editable node graph: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A first run setup sequence that walks a new user through screens one at a time: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)
- Operating live AI agent runs: tool permissions, approvals and evaluation reports: use the [Agents blocks](https://web.dev.reui.io/blocks/solutions/agents.md)

### Agent notes

- Graph edits stay in local `useNodesState` and `useEdgesState`; no block persists `nodes` or `edges`, so wire your own load and save
- Each block fills `h-svh` under its own header bar; swap it for a parent owned height when you mount it inside an app shell
- Requires `@xyflow/react`; flow-canvas.tsx imports its stylesheet and `FLOW_THEME` maps its colors onto your theme tokens

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.