Implementation:FlowiseAI Flowise OpenAIAssistantLayout
| Knowledge Sources | |
|---|---|
| Domains | Assistants, Views |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
OpenAIAssistantLayout is a React page component that displays a searchable, card-based listing of OpenAI assistants with load, add, edit, and search functionality.
Description
This component fetches all OpenAI-type assistants on mount and renders them as ItemCard components in a 3-column grid. Each card shows the assistant's name, instructions, and icon. The view provides a ViewHeader with a back button, search input for filtering by name, a permission-gated "Load" button to import existing OpenAI assistants, and a permission-gated "Add" button for creating new ones. The load workflow uses LoadAssistantDialog to select credentials and an assistant from OpenAI, then opens AssistantDialog for configuration. Clicking an existing card opens the edit dialog. Loading, empty, and error states are handled appropriately.
Usage
Use this component as the route handler for the /assistants/openai path. It manages the full lifecycle of OpenAI assistants including listing, creating, loading from OpenAI, and editing.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/assistants/openai/OpenAIAssistantLayout.jsx
- Lines: 1-200
Signature
const OpenAIAssistantLayout = () => { ... }
export default OpenAIAssistantLayout
Import
import OpenAIAssistantLayout from '@/views/assistants/openai/OpenAIAssistantLayout'
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 with type OPENAI |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | A MainCard containing a searchable grid of OpenAI assistant cards, loading skeletons, empty state illustration, error boundary, LoadAssistantDialog, and AssistantDialog |
Usage Examples
Basic Usage
// In route configuration
import OpenAIAssistantLayout from '@/views/assistants/openai/OpenAIAssistantLayout'
<Route path="/assistants/openai" element={<OpenAIAssistantLayout />} />