Implementation:FlowiseAI Flowise CustomAssistantLayout
| Knowledge Sources | |
|---|---|
| Domains | Assistants, Views |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
CustomAssistantLayout is a React page component that displays a searchable, card-based listing of custom assistants with add, search, and navigation functionality.
Description
This component fetches all custom assistants (type CUSTOM) via the assistants API on mount and renders them as ItemCard components in a 3-column grid. Each card displays the assistant's name, instruction description, and chat model icon. The view includes a ViewHeader with a back button, search input for filtering by name, and a permission-gated "Add" button that opens the AddCustomAssistantDialog. Loading states show skeleton placeholders, and an empty state displays an illustration with a message. Error states are handled via ErrorBoundary.
Usage
Use this component as the route handler for the /assistants/custom path. It serves as the main listing page for managing custom assistants and navigates to individual assistant configuration pages on card click or after creating a new assistant.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/assistants/custom/CustomAssistantLayout.jsx
- Lines: 1-164
Signature
const CustomAssistantLayout = () => { ... }
export default CustomAssistantLayout
Import
import CustomAssistantLayout from '@/views/assistants/custom/CustomAssistantLayout'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (none - page component) | N/A | N/A | This is a top-level page component with no props; it fetches data internally via the assistants API |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | A MainCard containing a searchable grid of custom assistant cards, loading skeletons, empty state illustration, error boundary, and the AddCustomAssistantDialog |
Usage Examples
Basic Usage
// In route configuration
import CustomAssistantLayout from '@/views/assistants/custom/CustomAssistantLayout'
<Route path="/assistants/custom" element={<CustomAssistantLayout />} />