# AI Agent Builder block

> AI agent flow tree with auto layout, named branch paths and add step buttons on every connector

LLM agent editor: cards show the app called and a last test run strip with tokens or latency, a docked inspector edits each step, copy as JSON. React Flow, ReUI IconTile, Badge, shadcn Item, Select, AlertDialog. For agent builder, AI workflow.

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

## Best for

A top down agent tree laid out by dagre, with a header model picker and a Run test that tallies passed, failed and skipped steps

## Agent notes

- Replace `SEED` and `AGENT` in data.tsx; `INITIAL_EDGES` is derived from each entry's `parent` and `branchLabel`, and `layoutTree` places every node
- `runTest` replays the `RECORDED_RUN` fixture down the `AGENT.testPath` branch and calls no service; a step with no fixture fails
- `ModelSelect` retitles the first `claude` app step, and `MODEL_OPTIONS` hardcodes each model's token and cost figures

## When not to use

- A left to right automation with step owners, undo history and a minimap: use [Automation Builder](https://web.dev.reui.io/blocks/application/flow/flow-1.md) (`get_block("flow-1")`)
- Watching a live AI run and answering its approval prompts as they arrive: use [Approval Run Console](https://web.dev.reui.io/blocks/ai-agents/agent-activity/agent-activity-1.md) (`get_block("agent-activity-1")`)

## 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)
- Dagre v3: [API reference](https://github.com/dagrejs/dagre/wiki#configuring-the-layout), [docs](https://github.com/dagrejs/dagre/wiki)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

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