Implementation:FlowiseAI Flowise NodeInfoDialog

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

Overview

NodeInfoDialog is a React dialog component that displays detailed information about a selected node, including its icon, label, ID, version, badges, tags, documentation link, description, and configuration table.

Description

This component renders a Material UI Dialog (portaled via createPortal) that fetches and presents node configuration data from the config API. The dialog title section renders the node icon (either from the AGENTFLOW_ICONS registry with a colored background or as an image fetched from the API), the node label, a yellow ID badge, optional version and deprecation badges, and any associated tags. If the node has a documentation URL, a "Documentation" button is shown. The content area displays the node description and a read-only configuration table using TableViewOnly.

Usage

Use this component when a user requests detailed information about a node in the canvas editor, such as viewing its configuration parameters, version, tags, or opening its external documentation.

Code Reference

Source Location

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

Signature

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

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

export default NodeInfoDialog

Import

import NodeInfoDialog from '@/ui-component/dialog/NodeInfoDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls whether the dialog is visible
dialogProps	object	Yes	Configuration object containing data with node properties: name, label, id, color, icon, version, badge, tags, documentation, description
onCancel	func	Yes	Callback invoked when the user closes the dialog

Outputs

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

Usage Examples

Basic Usage

import NodeInfoDialog from '@/ui-component/dialog/NodeInfoDialog'

const MyComponent = () => {
    const [showDialog, setShowDialog] = useState(false)
    const dialogProps = {
        data: {
            name: 'openAIChat',
            label: 'OpenAI Chat',
            id: 'openAIChat_0',
            color: '#4ea6e6',
            version: '2.0',
            badge: 'NEW',
            tags: ['LLM', 'Chat'],
            documentation: 'https://docs.flowiseai.com/nodes/openai-chat',
            description: 'OpenAI Chat model integration node'
        }
    }

    return (
        <NodeInfoDialog
            show={showDialog}
            dialogProps={dialogProps}
            onCancel={() => setShowDialog(false)}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Node_Registry_Loading