Implementation:FlowiseAI Flowise StarterPrompts

Knowledge Sources	FlowiseAI Flowise
Domains	Chatbot Configuration, User Experience
Last Updated	2026-02-12 07:00 GMT

Overview

StarterPrompts is a React component that provides a form for configuring conversation starter prompts that are displayed to users when they first open the chatbot widget.

Description

This component renders a configuration panel with an informational banner (green background with a lightbulb icon) explaining that starter prompts appear only when there are no messages in the chat. Below the banner is a dynamic list of text input fields, each representing a starter prompt. Users can add new prompts via a plus button on the last row, remove individual prompts via trash icons (only when more than one prompt exists), and edit prompt text inline. On save, the component serializes the prompts into the chatflow's chatbotConfig.starterPrompts configuration via chatflowsApi.updateChatflow and dispatches SET_CHATFLOW to update the Redux store. The component initializes from existing starter prompts in the chatflow's chatbotConfig.

Usage

Use this component within the chatflow settings panel to configure the suggestion buttons or prompt chips shown to users before they start a conversation.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/StarterPrompts.jsx
• Lines: 1-214

Signature

const StarterPrompts = ({ dialogProps, onConfirm }) => { ... }

StarterPrompts.propTypes = {
    dialogProps: PropTypes.object,
    onConfirm: PropTypes.func
}

export default StarterPrompts

Import

import StarterPrompts from '@/ui-component/extended/StarterPrompts'

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Configuration object containing chatflow (object with id and chatbotConfig JSON string that may include a starterPrompts object mapping indices to { prompt: string } entries)
onConfirm	func	No	Optional callback invoked after a successful save operation

Outputs

Name	Type	Description
React Element	JSX.Element	Renders an info banner, a dynamic list of prompt input fields, and a Save button

Usage Examples

Basic Usage

import StarterPrompts from '@/ui-component/extended/StarterPrompts'

const MyComponent = () => {
    const dialogProps = {
        chatflow: {
            id: 'chatflow-123',
            chatbotConfig: JSON.stringify({
                starterPrompts: {
                    0: { prompt: 'What can you help me with?' },
                    1: { prompt: 'Tell me about your features' },
                    2: { prompt: 'How do I get started?' }
                }
            })
        }
    }

    return (
        <StarterPrompts
            dialogProps={dialogProps}
            onConfirm={() => console.log('Starter prompts saved')}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Chatbot_Appearance_Customization