Implementation:FlowiseAI Flowise ConfigInput

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

Overview

ConfigInput is a React component that renders an expandable accordion panel for configuring a node component's input parameters within an agentflow v2 canvas, dynamically loading the node definition and managing configuration state.

Description

This component fetches a specific node's schema via nodesApi.getSpecificNode and initializes a local copy of the node's data with input parameters, visibility rules, and credential bindings. It renders visible input parameters inside a Material-UI Accordion using NodeInputHandler components. The component tracks changes to external data.inputs and synchronizes with internal state using memoized comparisons to prevent infinite update loops. It supports both standalone configuration and array-based configurations where multiple instances of the same node type exist within a parent parameter.

Usage

Use this component within agentflow v2 node configuration panels when a node input needs its own expandable configuration sub-section with dynamically loaded parameters. It is typically used for nodes that reference other component types (e.g., selecting a chat model and then configuring its parameters).

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/agentflowsv2/ConfigInput.jsx
• Lines: 1-339

Signature

export const ConfigInput = ({ data, inputParam, disabled = false, arrayIndex = null, parentParamForArray = null }) => { ... }

ConfigInput.propTypes = {
    name: PropTypes.string,
    inputParam: PropTypes.object,
    data: PropTypes.object,
    disabled: PropTypes.bool,
    arrayIndex: PropTypes.number,
    parentParamForArray: PropTypes.object
}

Import

import { ConfigInput } from '@/views/agentflowsv2/ConfigInput'

I/O Contract

Inputs

Name	Type	Required	Description
data	object	Yes	The parent node data object containing inputs with the current configuration values
inputParam	object	Yes	The input parameter definition describing the component node to configure (contains name used to look up the node)
disabled	bool	No	When true, disables all input handlers in the accordion (defaults to false)
arrayIndex	number	No	Index within a parent array parameter, used for array-based configurations (defaults to null)
parentParamForArray	object	No	The parent parameter definition when this config is part of an array (defaults to null)

Outputs

Name	Type	Description
Rendered UI	JSX.Element	An expandable accordion with a settings icon, warning indicator for missing credentials, and dynamically rendered NodeInputHandler components for each visible input parameter

Key Internal Logic

• loadComponentData() -- Async function in the mount effect that fetches the node schema, initializes node data via initNode, restores config from data.inputs[inputParam.name + 'Config'], and applies showHideInputParams visibility rules.
• onCustomDataChange({ inputParam, newValue }) -- Updates the internal component node data when an input value changes, recalculates parameter visibility, and cleans up hidden inputs.
• currentInputValues (useMemo) -- Memoized snapshot of relevant external input values for efficient change detection.
• Change detection effect -- Compares lastProcessedInputs against currentInputValues to detect external changes and synchronize internal state without triggering infinite loops.

Usage Examples

Basic Usage

import { ConfigInput } from '@/views/agentflowsv2/ConfigInput'

<ConfigInput
    data={nodeData}
    inputParam={{ name: 'chatModel', type: 'asyncOptions' }}
    disabled={false}
/>

Array-Based Usage

<ConfigInput
    data={nodeData}
    inputParam={{ name: 'tool', type: 'asyncOptions' }}
    disabled={false}
    arrayIndex={0}
    parentParamForArray={{ name: 'tools' }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration