Automation Studio Templates
Gallery of ready-made automations with a preview of each graph.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this page
What it's for
- Gallery of ready-made automations with a preview of each graph.
- Template picker that creates a draft workflow and tells you which apps to connect first.
Includes
- Template gallery
- Search
- Category filter
- Complexity filter
- Sort
- Graph preview
- Connection readiness
- Start from template
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
- 1 template or blueprint on this site use it (below)
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add automation-studio-templatesInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/automation-studio-templatesUsed in
- Type
- Page
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Motion
- Animated, with a reduced-motion fallback
- Sample data
- Ships with sample data in
seed.ts,workflows.ts,build.ts,connections.ts,templates.ts; replace it with your own.
- npm packages
lucide-react- Registry dependencies
ai-workflow-templateslib-primitives- Files
29 files
- components/agentic-ui/automation-studio-templates/screens/templates.tsx
- components/agentic-ui/automation-studio-templates/lib/store.ts
- components/agentic-ui/automation-studio-templates/lib/types.ts
- components/agentic-ui/automation-studio-templates/engine/types.ts
- components/agentic-ui/automation-studio-templates/lib/reducer.ts
- components/agentic-ui/automation-studio-templates/lib/clock.ts
- components/agentic-ui/automation-studio-templates/data/seed.ts
- components/agentic-ui/automation-studio-templates/data/workflows.ts
- components/agentic-ui/automation-studio-templates/data/build.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/index.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/apps.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/helpers.ts
- components/agentic-ui/automation-studio-templates/engine/template.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/triggers.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/actions-ops.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/actions-core.ts
- components/agentic-ui/automation-studio-templates/engine/condition.ts
- components/agentic-ui/automation-studio-templates/engine/catalog/actions-apps.ts
- components/agentic-ui/automation-studio-templates/engine/layout.ts
- components/agentic-ui/automation-studio-templates/engine/graph.ts
- components/agentic-ui/automation-studio-templates/data/connections.ts
- components/agentic-ui/automation-studio-templates/lib/templates.ts
- components/agentic-ui/automation-studio-templates/data/templates.ts
- components/agentic-ui/automation-studio-templates/components/common.tsx
- components/agentic-ui/automation-studio-templates/components/templates/use-template-dialog.tsx
- components/agentic-ui/automation-studio-templates/components/notice.tsx
- components/agentic-ui/automation-studio-templates/components/new-workflow-dialog.tsx
- components/agentic-ui/automation-studio-templates/lib/editor-model.ts
- components/agentic-ui/automation-studio-templates/engine/validate.ts
Related components
Automation Studio Connections
Connected apps page with reconnect for expired access and a demo credentials manager.
Details and live previewAutomation Studio Editor
Visual workflow builder with trigger and action nodes, branching and a configuration panel.
Details and live previewAutomation Studio Run Detail
Execution detail with a replayable timeline, per-step input and output and a retry button on the failed step.
Details and live previewAutomation Studio Runs
Run history of an automation with status filters and a failed step column.
Details and live preview