# AI Workflow Edge

Agent workflow canvas where each connection shows the routing condition and animates while the run carries data.

- id: `ai-workflow-edge`
- Page: https://agentic-ui-kit.com/components/ai-workflow-edge
- Live preview: https://agentic-ui-kit.com/live/component/ai-workflow-edge

## Install

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

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** condition-label, animated-dash-on-flow, branch-status-encoding, typed-port-badge, run-counter, edge-selection, reduced-motion-fallback
- **Intents:** orchestrate-agents, execute-flow, track-status, configure
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** edge-selection, keyboard-focus, run-state-switching, condition-inspection
- **Screen role:** flow
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** agent workflow canvas where each connection shows the routing condition and animates while the run carries data, no-code automation builder where if/else branches can be read without opening the node configuration panel, live execution monitor for an ETL pipeline where the active edge marks where the data is flowing right now, ticket routing rule editor where the blocked branch shows its condition was not met in the last run
- **Avoid when:** the graph only needs decorative connections without condition or state semantics (use the default @xyflow/react edge), the condition must be configured through a schema-generated form rather than displayed (use ai-node-config-panel), the nodes and their typed ports need to be represented instead of the connections (use ai-workflow-node-set)
- **Preserve when adapting:** condition-label-legibility, status-encoding-beyond-motion, keyboard-focus-and-selection, reduced-motion-fallback
- **Replace when adapting:** domain-condition-expressions, port-type-vocabulary, node-graph-fixture
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **npm dependencies:** @xyflow/react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** @xyflow/react@^12.10.2
- **Registry dependencies:** lib-primitives