Add dynamic inputs system for nodes with variable input count

bchapuis · claude · bchapuis · commit ae8aaef6298b · 2026-03-25T12:14:49.000+01:00
Replace the repeated parameter pattern (single input accepting arrays) with
explicit numbered inputs (input_1, input_2, …) that users can add/remove
via a widget. Adds DynamicInputsConfig type, collectDynamicInputs base method
on ExecutableNode, and a reusable DynamicInputsWidget. Migrates StringConcatNode
as the first adopter.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/apps/app/src/components/workflow/widgets/index.ts b/apps/app/src/components/workflow/widgets/index.ts
@@ -15,6 +15,7 @@ import { cronInputWidget } from "./input/cron-input";
 import { dateInputWidget } from "./input/date-input";
 import { discordTriggerInputWidget } from "./input/discord-trigger-input";
 import { documentInputWidget } from "./input/document-input";
+import { createDynamicInputsWidget } from "./input/dynamic-inputs-widget";
 import { emailTriggerInputWidget } from "./input/email-trigger-input";
 import {
   httpRequestEndpointWidget,
@@ -88,6 +89,12 @@ const widgets = [
   canvasInputWidget,
   replicateModelInputWidget,
   schemaExtractInputWidget,
+  createDynamicInputsWidget("string-concat", {
+    prefix: "input",
+    type: "string",
+    defaultCount: 2,
+    minCount: 1,
+  }),
 
   // Output widgets
   textOutputWidget,
diff --git a/apps/app/src/components/workflow/widgets/input/dynamic-inputs-widget.tsx b/apps/app/src/components/workflow/widgets/input/dynamic-inputs-widget.tsx
@@ -0,0 +1,140 @@
+import type { DynamicInputsConfig } from "@dafthunk/types";
+import MinusIcon from "lucide-react/icons/minus";
+import PlusIcon from "lucide-react/icons/plus";
+import { useCallback } from "react";
+
+import { cn } from "@/utils/utils";
+
+import { useWorkflow } from "../../workflow-context";
+import type { WorkflowParameter } from "../../workflow-types";
+import type { BaseWidgetProps } from "../widget";
+import { createWidget } from "../widget";
+
+interface DynamicInputsWidgetProps extends BaseWidgetProps {
+  nodeId: string;
+  nodeType: string;
+  inputCount: number;
+}
+
+function DynamicInputsWidget({
+  nodeId,
+  nodeType,
+  inputCount,
+  className,
+  disabled = false,
+}: DynamicInputsWidgetProps) {
+  const { updateNodeData, edges, deleteEdge, nodeTypes } = useWorkflow();
+
+  const config = nodeTypes?.find((t) => t.type === nodeType)?.dynamicInputs;
+  const canRemove = config ? inputCount > config.minCount : false;
+
+  const handleAdd = useCallback(() => {
+    if (disabled || !updateNodeData || !config) return;
+
+    updateNodeData(nodeId, (current) => {
+      const pattern = new RegExp(`^${config.prefix}_(\\d+)$`);
+      const maxIndex = current.inputs.reduce((max, inp) => {
+        const match = inp.id.match(pattern);
+        return match ? Math.max(max, Number.parseInt(match[1])) : max;
+      }, 0);
+      const nextIndex = maxIndex + 1;
+      const template = current.inputs[0];
+      const newInput: WorkflowParameter = {
+        ...template,
+        id: `${config.prefix}_${nextIndex}`,
+        name: `${config.prefix}_${nextIndex}`,
+        value: undefined,
+      };
+      return { inputs: [...current.inputs, newInput] };
+    });
+  }, [disabled, updateNodeData, nodeId, config]);
+
+  const handleRemove = useCallback(() => {
+    if (disabled || !updateNodeData || !config) return;
+    if (inputCount <= config.minCount) return;
+
+    // Find and disconnect edges to the last input before updating node data
+    if (edges && deleteEdge) {
+      // Find the last dynamic input by looking at current edges
+      const lastInputId = `${config.prefix}_${inputCount}`;
+      for (const edge of edges) {
+        if (edge.target === nodeId && edge.targetHandle === lastInputId) {
+          deleteEdge(edge.id);
+        }
+      }
+    }
+
+    updateNodeData(nodeId, (current) => {
+      if (current.inputs.length <= config.minCount) return {};
+      return { inputs: current.inputs.slice(0, -1) };
+    });
+  }, [disabled, updateNodeData, nodeId, config, inputCount, edges, deleteEdge]);
+
+  if (!config) return null;
+
+  return (
+    <div className={cn("px-2 py-1.5 flex items-center gap-1", className)}>
+      <button
+        type="button"
+        className={cn(
+          "flex items-center justify-center rounded p-0.5",
+          "border border-border bg-background hover:bg-accent",
+          "text-muted-foreground hover:text-foreground",
+          { "opacity-50 cursor-not-allowed": disabled || !canRemove }
+        )}
+        onClick={handleRemove}
+        disabled={disabled || !canRemove}
+        aria-label="Remove input"
+      >
+        <MinusIcon className="h-3 w-3" />
+      </button>
+      <span className="flex-1 text-center text-xs text-muted-foreground tabular-nums">
+        {inputCount} {inputCount === 1 ? "input" : "inputs"}
+      </span>
+      <button
+        type="button"
+        className={cn(
+          "flex items-center justify-center rounded p-0.5",
+          "border border-border bg-background hover:bg-accent",
+          "text-muted-foreground hover:text-foreground",
+          { "opacity-50 cursor-not-allowed": disabled }
+        )}
+        onClick={handleAdd}
+        disabled={disabled}
+        aria-label="Add input"
+      >
+        <PlusIcon className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Counts inputs matching the dynamic prefix pattern (e.g. input_1, input_2, …)
+ */
+function countDynamicInputs(
+  inputs: WorkflowParameter[],
+  config: DynamicInputsConfig
+): number {
+  const pattern = new RegExp(`^${config.prefix}_\\d+$`);
+  return inputs.filter((i) => pattern.test(i.id)).length;
+}
+
+/**
+ * Creates a dynamic inputs widget descriptor for a given node type.
+ */
+export function createDynamicInputsWidget(
+  nodeType: string,
+  config: DynamicInputsConfig
+) {
+  return createWidget({
+    component: DynamicInputsWidget,
+    nodeTypes: [nodeType],
+    inputField: `${config.prefix}_1`,
+    extractConfig: (nodeId, inputs) => ({
+      nodeId,
+      nodeType,
+      inputCount: countDynamicInputs(inputs, config),
+    }),
+  });
+}
diff --git a/packages/runtime/src/node-types.ts b/packages/runtime/src/node-types.ts
@@ -328,6 +328,30 @@ export abstract class ExecutableNode {
     } as NodeExecution;
   }
 
+  /**
+   * Collect dynamic inputs matching a prefix, sorted by numeric suffix.
+   * For nodes using dynamicInputs (e.g. input_1, input_2, …).
+   */
+  protected collectDynamicInputs(
+    inputs: Record<string, unknown>,
+    prefix: string
+  ): unknown[] {
+    const prefixUnderscore = `${prefix}_`;
+    return Object.entries(inputs)
+      .filter(([key]) => {
+        if (!key.startsWith(prefixUnderscore)) return false;
+        const suffix = key.slice(prefixUnderscore.length);
+        return /^\d+$/.test(suffix);
+      })
+      .sort(([a], [b]) => {
+        const numA = Number.parseInt(a.slice(prefixUnderscore.length), 10);
+        const numB = Number.parseInt(b.slice(prefixUnderscore.length), 10);
+        return numA - numB;
+      })
+      .map(([_, value]) => value)
+      .filter((v) => v !== undefined && v !== null);
+  }
+
   public createErrorResult(error: string, usage?: number): NodeExecution {
     return {
       nodeId: this.node.id,
diff --git a/packages/runtime/src/nodes/text/string-concat-node.test.ts b/packages/runtime/src/nodes/text/string-concat-node.test.ts
@@ -13,7 +13,7 @@ describe("StringConcatNode", () => {
     const context = {
       nodeId,
       inputs: {
-        strings: "Hello World",
+        input_1: "Hello World",
       },
       getIntegration: async () => {
         throw new Error("No integrations in test");
@@ -27,7 +27,7 @@ describe("StringConcatNode", () => {
     expect(result.outputs?.result).toBe("Hello World");
   });
 
-  it("should concatenate multiple strings from array", async () => {
+  it("should concatenate multiple strings from dynamic inputs", async () => {
     const nodeId = "string-concat";
     const node = new StringConcatNode({
       nodeId,
@@ -36,7 +36,10 @@ describe("StringConcatNode", () => {
     const context = {
       nodeId,
       inputs: {
-        strings: ["Hello", " ", "World", "!"],
+        input_1: "Hello",
+        input_2: " ",
+        input_3: "World",
+        input_4: "!",
       },
       getIntegration: async () => {
         throw new Error("No integrations in test");
@@ -50,7 +53,7 @@ describe("StringConcatNode", () => {
     expect(result.outputs?.result).toBe("Hello World!");
   });
 
-  it("should handle empty strings in array", async () => {
+  it("should handle empty strings in inputs", async () => {
     const nodeId = "string-concat";
     const node = new StringConcatNode({
       nodeId,
@@ -59,7 +62,9 @@ describe("StringConcatNode", () => {
     const context = {
       nodeId,
       inputs: {
-        strings: ["", "test", ""],
+        input_1: "",
+        input_2: "test",
+        input_3: "",
       },
       getIntegration: async () => {
         throw new Error("No integrations in test");
@@ -92,7 +97,7 @@ describe("StringConcatNode", () => {
     expect(result.error).toContain("No string inputs provided");
   });
 
-  it("should return error for invalid input type in array", async () => {
+  it("should return error for invalid input type", async () => {
     const nodeId = "string-concat";
     const node = new StringConcatNode({
       nodeId,
@@ -101,7 +106,9 @@ describe("StringConcatNode", () => {
     const context = {
       nodeId,
       inputs: {
-        strings: ["Hello", 123, "World"],
+        input_1: "Hello",
+        input_2: 123,
+        input_3: "World",
       },
       getIntegration: async () => {
         throw new Error("No integrations in test");
@@ -115,4 +122,28 @@ describe("StringConcatNode", () => {
       "Invalid input at position 1: expected string, got number"
     );
   });
+
+  it("should skip undefined inputs and preserve order", async () => {
+    const nodeId = "string-concat";
+    const node = new StringConcatNode({
+      nodeId,
+    } as unknown as Node);
+
+    const context = {
+      nodeId,
+      inputs: {
+        input_1: "A",
+        input_2: undefined,
+        input_3: "B",
+      },
+      getIntegration: async () => {
+        throw new Error("No integrations in test");
+      },
+      env: {},
+    } as unknown as NodeContext;
+
+    const result = await node.execute(context);
+    expect(result.status).toBe("completed");
+    expect(result.outputs?.result).toBe("AB");
+  });
 });
diff --git a/packages/runtime/src/nodes/text/string-concat-node.ts b/packages/runtime/src/nodes/text/string-concat-node.ts
@@ -4,22 +4,30 @@ import type { NodeExecution, NodeType } from "@dafthunk/types";
 export class StringConcatNode extends ExecutableNode {
   public static readonly nodeType: NodeType = {
     id: "string-concat",
-    name: "Concat",
+    name: "String Concat",
     type: "string-concat",
     description: "Concatenate multiple strings together",
     tags: ["Text", "Concat"],
     icon: "link",
     documentation:
       "This node concatenates multiple strings together into a single string, joining them in the order they are provided.",
     inlinable: true,
+    dynamicInputs: {
+      prefix: "input",
+      type: "string",
+      defaultCount: 2,
+      minCount: 1,
+    },
     inputs: [
       {
-        name: "strings",
+        name: "input_1",
         type: "string",
-        description:
-          "String inputs to concatenate (supports multiple connections)",
-        required: true,
-        repeated: true,
+        description: "String to concatenate",
+      },
+      {
+        name: "input_2",
+        type: "string",
+        description: "String to concatenate",
       },
     ],
     outputs: [
@@ -33,41 +41,23 @@ export class StringConcatNode extends ExecutableNode {
 
   public async execute(context: NodeContext): Promise<NodeExecution> {
     try {
-      const { strings } = context.inputs;
+      const strings = this.collectDynamicInputs(context.inputs, "input");
 
-      // Handle missing input
-      if (strings === null || strings === undefined) {
+      if (strings.length === 0) {
         return this.createErrorResult("No string inputs provided");
       }
 
-      // Handle single string input
-      if (typeof strings === "string") {
-        return this.createSuccessResult({
-          result: strings,
-        });
-      }
-
-      // Handle array of strings (multiple connections)
-      if (Array.isArray(strings)) {
-        // Validate all inputs are strings
-        for (let i = 0; i < strings.length; i++) {
-          if (typeof strings[i] !== "string") {
-            return this.createErrorResult(
-              `Invalid input at position ${i}: expected string, got ${typeof strings[i]}`
-            );
-          }
+      for (let i = 0; i < strings.length; i++) {
+        if (typeof strings[i] !== "string") {
+          return this.createErrorResult(
+            `Invalid input at position ${i}: expected string, got ${typeof strings[i]}`
+          );
         }
-
-        const result = strings.join("");
-
-        return this.createSuccessResult({
-          result,
-        });
       }
 
-      return this.createErrorResult(
-        "Invalid input type: expected string or array of strings"
-      );
+      const result = (strings as string[]).join("");
+
+      return this.createSuccessResult({ result });
     } catch (err) {
       const error = err as Error;
       return this.createErrorResult(
diff --git a/packages/types/src/workflow.ts b/packages/types/src/workflow.ts
