Template Gallery

Browsable grid of agent templates with filtering, search, and view/clone actions

SaaSAI Agents

Overview

TemplateGallery displays a responsive grid of agent template cards with optional filtering by type, category, and tags. Supports loading, empty, and populated states with click handlers for viewing template details and cloning templates to create new agents.

Usage

import { TemplateGallery } from "@leanicon/web-builder-library/saas";

<TemplateGallery
  templates={templates}
  totalCount={templates.length}
  filters={filters}
  onFiltersChange={setFilters}
  onView={(template) => router.push(`/templates/${template.id}`)}
  onClone={(template) => setCloneDialog({ open: true, template })}
  emptyMessage="No templates match your criteria"
/>;

Variants

Loading

Empty

No templates found. Try adjusting your filters.

Try adjusting your filters or create a new template

Dark

With Templates (code only)

<TemplateGallery
  templates={[
    {
      id: "tpl_001",
      name: "Customer Support Agent",
      description: "A versatile customer support agent that handles inquiries and troubleshooting.",
      type: "agent",
      category: "customer-service",
      config: {
        systemPrompt: "...",
        modelConfig: { provider: "openai", model: "gpt-4o", temperature: 0.7, maxTokens: 2048 },
      },
      tags: ["support", "customer-service"],
      isBuiltin: true,
      isActive: true,
      createdAt: "2025-01-01T00:00:00Z",
    },
  ]}
  totalCount={1}
  onView={(template) => console.log("View:", template.name)}
  onClone={(template) => console.log("Clone:", template.name)}
/>

Props

Name	Type	Default	Required	Description
`templates`	`AgentTemplate[]`	—	Yes	Array of templates to display
`totalCount`	`number`	—	Yes	Total count for pagination or display purposes
`isLoading`	`boolean`	`false`	No	Loading state
`filters`	`TemplateFilters`	`{}`	No	Current filter values
`onFiltersChange`	`((filters: TemplateFilters) => void)`	—	No	Callback when filters change
`onView`	`((template: AgentTemplate) => void)`	—	No	Callback when a template is viewed
`onClone`	`((template: AgentTemplate) => void)`	—	No	Callback when a template is cloned
`emptyMessage`	`string`	`No templates found`	No	Message to display when no templates are found
`emptyState`	`ReactNode`	—	No	Custom empty state component
`className`	`string`	—	No	Additional class names