[SOLVED] How to Create Custom Nodes with Dynamic, Auto-Expanding Inputs in ComfyUI

[ansorre]

dynamic_inputs_example.zip

With Gemini 2.5 Pro, I investigated how to create custom nodes with dynamic inputs—those inputs that, once you've connected one, immediately create a new, disconnected one, available for adding further inputs. Since this feature isn't yet well documented in the official ConfyUI documentation, and since it took me a couple of days of work to get it right, I decided to have Gemini write a working example and a markdown file with a mini-guide on how to do this. I hope it will be useful to others and possibly added to the official documentation if deemed appropriate. I'm attaching the file with the example and the markdown doc.
I also add the MD text here just in the case other people/LLMs searche for this on the Internet.
Thank you for your attention.

How to Create Custom Nodes with Dynamic, Auto-Expanding Inputs in ComfyUI

This guide explains how to create a "normal" custom node where new input slots are added automatically as the user connects the last available one. This advanced technique requires a combination of a Python file for the backend logic and a JavaScript file for the frontend behavior.

The Core Concept

The Python script defines the basic node structure and its server-side execution logic. The JavaScript script "enhances" this node in the browser, watching for connection changes and dynamically adding or removing input slots.

Step 1: The Python Node (__init__.py)

This file sets up the node's foundation.

Key Points:

1. WEB_DIRECTORY = ".": This is critical. It tells ComfyUI to serve the contents of this node's folder (including our JavaScript file) to the browser.
2. INPUT_TYPES: You only need to define the first dynamic input (e.g., input_1). Use ("*",) as the type to create a universal "ANY" input that accepts all data types.
3. execute function: It must accept **kwargs to handle an unknown number of inputs. You can then loop through kwargs to collect all provided input_... values into a list for easy processing.

Example __init__.py:

# In ComfyUI/custom_nodes/my_dynamic_node/__init__.py

# This line is mandatory to load the JS file
WEB_DIRECTORY = "."

class MyDynamicNode:
    @classmethod
    def INPUT_TYPES(s):
        return {
            "required": {
                # Define only the first input of the dynamic sequence
                "input_1": ("*",), 
            },
            "optional": {
                # You can add other static inputs here if needed
            }
        }

    RETURN_TYPES = ("*",)
    FUNCTION = "execute"
    CATEGORY = "Example"

    def execute(self, **kwargs):
        # Collect all dynamic inputs into a list, in order
        inputs = []
        i = 1
        while f"input_{i}" in kwargs:
            inputs.append(kwargs[f"input_{i}"])
            i += 1
        
        # --- Your node's logic here ---
        # For this example, we just return the first connected input
        result = inputs[0] if inputs else None
        
        return (result,)

NODE_CLASS_MAPPINGS = {
    "MyDynamicNode": MyDynamicNode
}

NODE_DISPLAY_NAME_MAPPINGS = {
    "MyDynamicNode": "My Awesome Dynamic Node"
}

Step 2: The JavaScript Enhancement (.js file)

This file brings the node to life in the user interface.

Key Points:

1. app.registerExtension: The standard way to add custom frontend behavior.
2. nodeCreated(node): This function is called for every node added to the canvas. We must first check if the node.constructor.type matches our node's class name from Python.
3. onConnectionsChange hook: This is the core of the magic. We augment the existing function to run our custom logic after any connection change occurs.
4. Update Logic: The logic should handle both adding a new slot when the last one is filled and removing empty slots when connections are removed to keep the UI clean.

Example my_node_script.js:

// In ComfyUI/custom_nodes/my_dynamic_node/my_node_script.js
import { app } from "/scripts/app.js";

const extension = {
  name: "MyCompany.MyDynamicNode", // Use a unique name
  async nodeCreated(node) {
    // Check if it's our target node
    if (node.constructor.type !== "MyDynamicNode") {
      return;
    }

    const updateInputs = () => {
      // --- ADD INPUT LOGIC ---
      const lastInput = node.inputs.slice().reverse().find(i => i.name.startsWith("input_"));
      if (lastInput && lastInput.link !== null) {
        const nextIndex = parseInt(lastInput.name.split("_")[1]) + 1;
        node.addInput(`input_${nextIndex}`, "*");
      }

      // --- REMOVE INPUT LOGIC ---
      const inputSlots = node.inputs.filter(i => i.name.startsWith("input_"));
      if (inputSlots.length > 1) {
        const lastSlot = inputSlots[inputSlots.length - 1];
        const secondLastSlot = inputSlots[inputSlots.length - 2];
        if (lastSlot.link === null && secondLastSlot.link === null) {
          node.removeInput(node.inputs.indexOf(lastSlot));
        }
      }
    };

    // Hijack the onConnectionsChange method to run our logic
    const originalOnConnectionsChange = node.onConnectionsChange;
    node.onConnectionsChange = function(type, index, connected, link_info) {
      originalOnConnectionsChange?.apply(this, arguments);
      updateInputs();
    };
    
    // Run once on creation to clean up any initial empty slots
    updateInputs();
  },
};

app.registerExtension(extension);

Step 3: File Structure and Final Steps

Your files must be placed in a dedicated folder inside ComfyUI/custom_nodes/.

ComfyUI/
└── custom_nodes/
    └── my_dynamic_node/
        ├── __init__.py
        └── my_node_script.js

Final Checklist:

1. Create the folder and the two files.
2. Restart the ComfyUI server completely.
3. Hard-refresh your browser (Ctrl+Shift+R or Cmd+Shift+R) to ensure the new JavaScript file is loaded.
4. Add your node to the workflow and test it!