Implementation:FlowiseAI Flowise PromptGeneratorDialog

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

Overview

PromptGeneratorDialog (exported as AssistantPromptGenerator) is a React dialog component that helps users generate AI assistant instructions by selecting from predefined task templates or writing custom task descriptions, then using a chat model to auto-generate detailed instructions.

Description

This component renders a Material UI Dialog (portaled via createPortal) with a two-phase workflow. In the first phase, the user selects from six default instruction templates (Summarize a document, Translate, Write an email, Convert code, Research and report, Plan a trip) or types a custom task description into a multiline text area, then clicks "Generate" which calls the assistants API with the selected chat model. In the second phase, the generated instruction is displayed in an editable text area where the user can refine it before clicking "Apply" to confirm, or "Back" to return to the input phase.

Usage

Use this component when configuring an AI assistant node and the user wants to auto-generate system instructions based on a task description using the selected chat model.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/dialog/PromptGeneratorDialog.jsx
• Lines: 1-205

Signature

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

AssistantPromptGenerator.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onConfirm: PropTypes.func,
    onCancel: PropTypes.func
}

export default AssistantPromptGenerator

Import

import AssistantPromptGenerator from '@/ui-component/dialog/PromptGeneratorDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing title (string), description (string), and data.selectedChatModel (object with name and inputs)
onCancel	func	Yes	Callback invoked when the user closes the dialog
onConfirm	func	Yes	Callback invoked with the generated instruction string when the user clicks "Apply"

Outputs

Name	Type	Description
React Portal	ReactPortal	Renders the dialog into the DOM element with id portal

Usage Examples

Basic Usage

import AssistantPromptGenerator from '@/ui-component/dialog/PromptGeneratorDialog'

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        title: 'Generate Instructions',
        description: 'Select a task or write your own to generate assistant instructions.',
        data: {
            selectedChatModel: {
                name: 'gpt-4',
                inputs: { temperature: 0.7 }
            }
        }
    }

    return (
        <AssistantPromptGenerator
            show={showDialog}
            dialogProps={dialogProps}
            onCancel={() => setShowDialog(false)}
            onConfirm={(instruction) => {
                console.log('Generated instruction:', instruction)
                setShowDialog(false)
            }}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Prompt_Management