# AI Workflow Canvas

Infinite canvas to build and supervise complex AI agent flows with pan, zoom and minimap.

- id: `ai-workflow-canvas`
- Page: https://agentic-ui-kit.com/components/ai-workflow-canvas
- Live preview: https://agentic-ui-kit.com/live/fixture/ai-workflow-canvas?piece=ai-workflow-canvas

## Install

```bash
agentic-ui add ai-workflow-canvas
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-canvas
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** infinite-canvas, pan-and-zoom, minimap, canvas-controls, grid-background, multi-selection, keyboard-shortcuts, empty-state, selection-toolbar, node-alignment
- **Intents:** orchestrate-agents, execute-flow, configure, create-edit
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** node-selection, keyboard-shortcuts, canvas-pan-zoom, multi-selection-drag
- **Screen role:** flow
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** infinite canvas to build and supervise complex AI agent flows with pan, zoom and minimap, visual pipeline editor where the user selects multiple nodes with a drag rectangle and aligns them horizontally, orchestration interface where keyboard shortcuts let users navigate, duplicate and delete branches without a mouse, workflow configuration screen with a toggleable grid and a thumbnail overview
- **Avoid when:** the flow is a fixed linear sequence with no branching (use a stepper or sequential list), only the configuration form of a single node is needed (use ai-node-config-panel), only the typed definition of the nodes is required without the canvas (use ai-workflow-node-set)
- **Preserve when adapting:** canvas-pan-zoom-contracts, multi-selection-and-alignment-logic, keyboard-shortcuts-accessibility, empty-and-loading-states
- **Replace when adapting:** domain-workflow-fixtures, custom-node-types, canvas-toolbar-actions
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @xyflow/react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @xyflow/react@^12.10.2