# AI Workflow Templates

Starting gallery when creating a new workflow in an agent builder (support triage, content pipeline, lead qualification).

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

## Install

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

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** template-gallery-grid, full-text-search, category-filter, complexity-filter, sorting, workflow-graph-preview, template-detail-dialog, required-variables-and-integrations, canvas-graph-export, start-from-blank, arrow-key-grid-navigation, loading-empty-error-states
- **Intents:** create-edit, orchestrate-agents, navigate
- **Suits domains:** ai-workspace, ai-agents, devtools, operations, saas
- **Interaction:** search, filter-chips, sort-select, arrow-key-navigation, preview-dialog, apply-template, start-from-blank, retry
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Starting gallery when creating a new workflow in an agent builder (support triage, content pipeline, lead qualification), Library of team-shared templates with search by integration or step, Onboarding for an automation product: pick a pre-made flow and open it as a draft on the canvas
- **Avoid when:** Document or text page templates (use docs-template-gallery), Editing the graph itself; the gallery only previews and exports (use ai-workflow-canvas), Fewer than 3 templates: a menu or simple selector is enough
- **Preserve when adapting:** template-graph-contract, canvas-graph-export-shape, filter-and-search-model, keyboard-and-live-region-behaviour
- **Replace when adapting:** fixture-templates, category-taxonomy, integration-names, domain-copy
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, card, dialog, input, label, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives