Agent List

Paginated list of AI agents with status badges and filters

SaaSAI Agents

Overview

AgentList displays AI agents in a sortable, filterable table with pagination. Supports status filtering, row selection, and per-agent actions (view, edit, delete, activate, archive). Each row shows the agent name, status badge, description, model configuration, and creation date. Includes loading, empty, and error states.

Usage

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

<AgentList
  agents={agents}
  totalCount={100}
  page={1}
  pageSize={10}
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
  filters={filters}
  onFiltersChange={setFilters}
  onView={(agent) => router.push(`/agents/${agent.id}`)}
  onEdit={(agent) => router.push(`/agents/${agent.id}/edit`)}
  onDelete={(agent) => deleteAgent(agent.id)}
  onActivate={(agent) => activateAgent(agent.id)}
  onArchive={(agent) => archiveAgent(agent.id)}
/>;

Variants

Loading

				Tools	KBs

Showing 1 to 0 of 0 results

Rows per page:

Page 1 of 0

Empty

No agents found. Create your first agent to get started.

With Error

Failed to load agents. Please try again.

Dark

				Tools	KBs

Showing 1 to 0 of 0 results

Rows per page:

Page 1 of 0

AgentStatusBadge - All Statuses

DraftActiveArchived

AgentStatusBadge - All Sizes

ActiveActiveActive

AgentStatusBadge - Without Dot

Active

Default with Data (code only)

<AgentList
  agents={[
    {
      id: "agent_001",
      tenantId: "tenant_001",
      name: "Customer Support Agent",
      description: "Handles customer inquiries and troubleshooting.",
      systemPrompt: "You are a helpful customer support agent...",
      status: "active",
      modelConfig: { provider: "openai", model: "gpt-4o", temperature: 0.7, maxTokens: 2048 },
      settings: {
        welcomeMessage: "Hello! How can I help?",
        enableMemory: true,
        enableStreaming: true,
      },
      createdAt: "2026-01-01T09:00:00Z",
      updatedAt: "2026-01-20T14:30:00Z",
      createdBy: "user_001",
      updatedBy: "user_002",
    },
    {
      id: "agent_002",
      tenantId: "tenant_001",
      name: "Sales Assistant",
      description: "Assists with product inquiries and pricing.",
      systemPrompt: "You are a knowledgeable sales assistant...",
      status: "active",
      modelConfig: { provider: "openai", model: "gpt-4o", temperature: 0.5, maxTokens: 2048 },
      settings: { welcomeMessage: "Welcome!", enableMemory: true, enableStreaming: true },
      createdAt: "2026-01-05T09:00:00Z",
      updatedAt: "2026-01-18T11:00:00Z",
      createdBy: "user_001",
      updatedBy: "user_001",
    },
  ]}
  totalCount={2}
  page={1}
  pageSize={10}
  onPageChange={(page) => setPage(page)}
  onPageSizeChange={(size) => setPageSize(size)}
  onView={(agent) => router.push(`/agents/${agent.id}`)}
  onEdit={(agent) => router.push(`/agents/${agent.id}/edit`)}
  onDelete={(agent) => deleteAgent(agent.id)}
  onActivate={(agent) => activateAgent(agent.id)}
  onArchive={(agent) => archiveAgent(agent.id)}
/>

With Filters and Sorting (code only)

<AgentList
  agents={agents}
  totalCount={42}
  page={1}
  pageSize={10}
  filters={{ status: ["active"] }}
  sortBy="createdAt"
  sortOrder="desc"
  selectedIds={[]}
  onFiltersChange={(filters) => setFilters(filters)}
  onSortChange={(sortBy, order) => handleSort(sortBy, order)}
  onSelectionChange={(ids) => setSelectedIds(ids)}
  onPageChange={setPage}
  onPageSizeChange={setPageSize}
  onView={(agent) => router.push(`/agents/${agent.id}`)}
  onEdit={(agent) => router.push(`/agents/${agent.id}/edit`)}
  onDelete={(agent) => deleteAgent(agent.id)}
  onActivate={(agent) => activateAgent(agent.id)}
  onArchive={(agent) => archiveAgent(agent.id)}
/>

Props

Name	Type	Default	Required	Description
`agents`	`Agent[]`	—	Yes	Array of agents to display
`totalCount`	`number`	—	Yes	Total count for pagination
`isLoading`	`boolean`	`false`	No	Loading state
`error`	`string`	—	No	Error message
`page`	`number`	—	Yes	Current page (1-indexed)
`pageSize`	`number`	—	Yes	Page size
`onPageChange`	`(page: number) => void`	—	Yes	Callback when page changes
`onPageSizeChange`	`(pageSize: number) => void`	—	Yes	Callback when page size changes
`filters`	`AgentFilters`	`{}`	No	Current filters
`onFiltersChange`	`((filters: AgentFilters) => void)`	—	No	Callback when filters change
`sortBy`	`string`	—	No	Current sort column
`sortOrder`	`enum`	`asc`	No	Current sort order
`onSortChange`	`((sortBy: string, order: "desc" \| "asc") => void)`	—	No	Callback when sort changes
`selectedIds`	`string[]`	`[]`	No	Selected agent IDs
`onSelectionChange`	`((ids: string[]) => void)`	—	No	Callback when selection changes
`onBulkAction`	`((action: string, ids: string[]) => void)`	—	No	Callback for bulk actions
`onView`	`((agent: Agent) => void)`	—	No	Callback when view is clicked
`onEdit`	`((agent: Agent) => void)`	—	No	Callback when edit is clicked
`onDelete`	`((agent: Agent) => void)`	—	No	Callback when delete is clicked
`onActivate`	`((agent: Agent) => void)`	—	No	Callback when activate is clicked
`onArchive`	`((agent: Agent) => void)`	—	No	Callback when archive is clicked
`onStatusChange`	`((agent: Agent, status: AgentStatus) => void)`	—	No	Callback when status changes
`emptyMessage`	`string`	`No agents found`	No	Empty state message
`emptyAction`	`ReactNode`	—	No	Empty state action
`emptyState`	`ReactNode`	—	No	Custom empty state component
`getAgentHref`	`((agent: Agent) => string)`	—	No	Get href for agent link (makes agent name clickable)
`onAgentClick`	`((agent: Agent) => void)`	—	No	Callback when agent name is clicked
`className`	`string`	—	No	Additional class names