Implementation:FlowiseAI Flowise AddCustomAssistantDialog

Knowledge Sources	FlowiseAI Flowise
Domains	Assistants, Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

AddCustomAssistantDialog is a React dialog component rendered via portal that allows users to create a new custom assistant by entering a name and calling the assistant creation API.

Description

This component displays a MUI Dialog with a name input field and create/cancel buttons. On submission, it constructs an assistant object with the entered name, a generated UUID credential, and type CUSTOM, then calls assistantsApi.createNewAssistant. Upon success, it shows a snackbar notification and invokes the onConfirm callback with the new assistant's ID. On error, it displays an error snackbar and calls onCancel. The dialog dispatches SHOW_CANVAS_DIALOG and HIDE_CANVAS_DIALOG actions to manage overlay state.

Usage

Use this dialog from the Custom Assistant layout page when the user clicks the "Add" button. It handles the full creation workflow and navigates to the new assistant's configuration page via the onConfirm callback.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/assistants/custom/AddCustomAssistantDialog.jsx
• Lines: 1-149

Signature

const AddCustomAssistantDialog = ({ show, dialogProps, onCancel, onConfirm }) => { ... }

export default AddCustomAssistantDialog

Import

import AddCustomAssistantDialog from '@/views/assistants/custom/AddCustomAssistantDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	No	Controls visibility of the dialog
dialogProps	object	No	Contains title and confirmButtonName strings for dialog customization
onCancel	func	No	Callback invoked when the dialog is cancelled or creation fails
onConfirm	func	No	Callback invoked with the new assistant's ID upon successful creation

Outputs

Name	Type	Description
JSX.Element	React portal	A MUI Dialog with a name input field, cancel button, and styled confirm button for creating a custom assistant

Usage Examples

Basic Usage

import AddCustomAssistantDialog from '@/views/assistants/custom/AddCustomAssistantDialog'

const CustomAssistantsPage = () => {
    const [showDialog, setShowDialog] = useState(false)
    const navigate = useNavigate()

    return (
        <>
            <Button onClick={() => setShowDialog(true)}>Add New</Button>
            <AddCustomAssistantDialog
                show={showDialog}
                dialogProps={{ title: 'Add New Custom Assistant', confirmButtonName: 'Add' }}
                onCancel={() => setShowDialog(false)}
                onConfirm={(id) => {
                    setShowDialog(false)
                    navigate(`/assistants/custom/${id}`)
                }}
            />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Assistant_Configuration