feat(web): add tool selection dialog

Author: leonardcser

apps/api/src/nodes/node-tool-provider.ts

@@ -172,7 +172,12 @@ export class NodeToolProvider implements ToolProvider {
     const nodeTypes = this.nodeRegistry.getNodeTypes();
     const tools: ToolDefinition[] = [];
 
-    for (const nodeType of nodeTypes) {
+    // Filter to only include nodes that can be used as tools
+    const toolNodeTypes = nodeTypes.filter(
+      (nodeType) => nodeType.asTool === true
+    );
+
+    for (const nodeType of toolNodeTypes) {
       try {
         const tool = await this.getToolDefinition(nodeType.type);
         tools.push(tool);

apps/api/src/nodes/text/hermes-2-pro-mistral-7b-node.ts

@@ -172,18 +172,18 @@ export class Hermes2ProMistral7BNode extends ExecutableNode {
       }
 
       // Check if we have function calls to enable embedded mode
-      const toolDefinitions = await this.convertFunctionCallsToToolDefinitions(
+      const toolsDefinitions = await this.convertFunctionCallsToToolDefinitions(
         tools as ToolReference[],
         context
       );
 
       let result: AiTextGenerationOutput;
       let executedToolCalls: any[] = [];
 
-      if (tools.length > 0) {
+      if (toolsDefinitions.length > 0) {
         const toolCallTracker = new ToolCallTracker();
         const trackedToolDefinitions =
-          toolCallTracker.wrapToolDefinitions(toolDefinitions);
+          toolCallTracker.wrapToolDefinitions(toolsDefinitions);
 
         result = await runWithTools(
           // @ts-ignore

apps/api/src/nodes/text/llama-3-3-70b-instruct-fp8-fast-node.ts

@@ -168,7 +168,7 @@ export class Llama3370BInstructFastNode extends ExecutableNode {
       let result: AiTextGenerationOutput;
       let executedToolCalls: any[] = [];
 
-      if (tools.length > 0) {
+      if (toolsDefinitions.length > 0) {
         const toolCallTracker = new ToolCallTracker();
         const trackedToolDefinitions =
           toolCallTracker.wrapToolDefinitions(toolsDefinitions);

apps/api/src/nodes/text/llama-4-scout-17b-16e-instruct-node.ts

@@ -183,7 +183,7 @@ export class Llama4Scout17B16EInstructNode extends ExecutableNode {
         | AiTextGenerationOutput;
       let executedToolCalls: any[] = [];
 
-      if (tools.length > 0) {
+      if (toolsDefinitions.length > 0) {
         const toolCallTracker = new ToolCallTracker();
         const trackedToolDefinitions =
           toolCallTracker.wrapToolDefinitions(toolsDefinitions);

apps/api/src/nodes/text/mistral-small-3-1-24b-instruct-node.ts

@@ -182,7 +182,7 @@ export class MistralSmall31_24BInstructNode extends ExecutableNode {
         | AiTextGenerationOutput;
       let executedToolCalls: any[] = [];
 
-      if (tools.length > 0) {
+      if (toolsDefinitions.length > 0) {
         const toolCallTracker = new ToolCallTracker();
         const trackedToolDefinitions =
           toolCallTracker.wrapToolDefinitions(toolsDefinitions);

apps/web/src/components/workflow/use-workflow-state.ts

@@ -34,6 +34,7 @@ interface UseWorkflowStateProps {
   validateConnection?: (connection: Connection) => boolean;
   createObjectUrl: (objectReference: ObjectReference) => string;
   readonly?: boolean;
+  nodeTemplates?: NodeTemplate[];
 }
 
 type NodeExecutionUpdate = {
@@ -214,16 +215,39 @@ export function useWorkflowState({
   validateConnection = () => true,
   createObjectUrl,
   readonly = false,
+  nodeTemplates = [],
 }: UseWorkflowStateProps): UseWorkflowStateReturn {
   // State management
-  const [nodes, setNodes, onNodesChange] =
-    useNodesState<ReactFlowNode<WorkflowNodeType>>(initialNodes);
+  const [nodes, setNodes, onNodesChange] = useNodesState<
+    ReactFlowNode<WorkflowNodeType>
+  >(
+    initialNodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        nodeTemplates,
+      },
+    }))
+  );
   const [edges, setEdges, onEdgesChange] =
     useEdgesState<ReactFlowEdge<WorkflowEdgeType>>(initialEdges);
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance<
     ReactFlowNode<WorkflowNodeType>,
     ReactFlowEdge<WorkflowEdgeType>
   > | null>(null);
+
+  // Update nodes when nodeTemplates changes
+  useEffect(() => {
+    setNodes((currentNodes) =>
+      currentNodes.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          nodeTemplates,
+        },
+      }))
+    );
+  }, [nodeTemplates, setNodes]);
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [connectionValidationState, setConnectionValidationState] =
     useState<ConnectionValidationState>("default");
@@ -534,13 +558,16 @@ export function useWorkflowState({
           outputs: template.outputs,
           executionState: "idle" as NodeExecutionState,
           nodeType: template.type,
+          functionCalling: template.functionCalling,
+          asTool: template.asTool,
+          nodeTemplates,
           createObjectUrl,
         },
       };
 
       setNodes((nds) => nds.concat(newNode));
     },
-    [reactFlowInstance, setNodes, createObjectUrl]
+    [reactFlowInstance, setNodes, createObjectUrl, nodeTemplates]
   );
 
   // Unified function to update node execution data

apps/web/src/components/workflow/workflow-builder.tsx

@@ -133,6 +133,7 @@ export function WorkflowBuilder({
     validateConnection,
     createObjectUrl,
     readonly,
+    nodeTemplates,
   });
 
   // Track input and output connections

apps/web/src/components/workflow/workflow-node.tsx

@@ -22,6 +22,7 @@ import {
   StickyNoteIcon,
   TriangleIcon,
   TypeIcon,
+  WrenchIcon,
 } from "lucide-react";
 import { createElement, memo, useEffect, useState } from "react";
 
@@ -43,9 +44,11 @@ import { WebcamWidget } from "./widgets/webcam-widget";
 import { createWidgetConfig } from "./widgets/widget-factory";
 import { updateNodeInput, useWorkflow } from "./workflow-context";
 import { WorkflowOutputRenderer } from "./workflow-output-renderer";
+import { ToolReference, WorkflowToolSelector } from "./workflow-tool-selector";
 import {
   InputOutputType,
   NodeExecutionState,
+  NodeTemplate,
   WorkflowParameter,
 } from "./workflow-types";
 
@@ -56,8 +59,11 @@ export interface WorkflowNodeType {
   error?: string | null;
   executionState: NodeExecutionState;
   nodeType?: string;
+  functionCalling?: boolean;
+  asTool?: boolean;
   dragHandle?: string;
   createObjectUrl: (objectReference: ObjectReference) => string;
+  nodeTemplates?: NodeTemplate[];
 }
 
 const TypeBadge = ({
@@ -184,6 +190,7 @@ export const WorkflowNode = memo(
     const { updateNodeData, readonly, expandedOutputs } = useWorkflow();
     const [showOutputs, setShowOutputs] = useState(false);
     const [showError, setShowError] = useState(true);
+    const [isToolSelectorOpen, setIsToolSelectorOpen] = useState(false);
     const hasVisibleOutputs = data.outputs.some((output) => !output.hidden);
     const canShowOutputs =
       hasVisibleOutputs &&
@@ -263,6 +270,35 @@ export const WorkflowNode = memo(
       setSelectedInput(null);
     };
 
+    const handleToolIconClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (readonly) return;
+      setIsToolSelectorOpen(true);
+    };
+
+    const handleToolSelectorClose = () => {
+      setIsToolSelectorOpen(false);
+    };
+
+    const handleToolsSelect = (tools: ToolReference[]) => {
+      if (readonly || !updateNodeData) return;
+
+      // Find the tools input parameter
+      const toolsInput = data.inputs.find((input) => input.id === "tools");
+      if (toolsInput) {
+        updateNodeInput(id, toolsInput.id, tools, data.inputs, updateNodeData);
+      }
+    };
+
+    // Get current selected tools from the tools input
+    const getCurrentSelectedTools = (): ToolReference[] => {
+      const toolsInput = data.inputs.find((input) => input.id === "tools");
+      if (toolsInput && Array.isArray(toolsInput.value)) {
+        return toolsInput.value as ToolReference[];
+      }
+      return [];
+    };
+
     return (
       <TooltipProvider>
         <div
@@ -281,11 +317,19 @@ export const WorkflowNode = memo(
           {/* Header */}
           <div
             className={cn(
-              "px-1 py-1 flex justify-center items-center border-b hover:cursor-grab active:cursor-grabbing",
+              "px-1 py-1 flex justify-between items-center border-b hover:cursor-grab active:cursor-grabbing",
               "workflow-node-drag-handle"
             )}
           >
-            <h3 className="text-xs font-medium truncate">{data.name}</h3>
+            <div className="flex items-center gap-1 flex-1 min-w-0">
+              {data.functionCalling && (
+                <WrenchIcon
+                  className="h-3 w-3 text-blue-600 shrink-0 cursor-pointer hover:text-blue-700 transition-colors"
+                  onClick={handleToolIconClick}
+                />
+              )}
+              <h3 className="text-xs font-medium truncate">{data.name}</h3>
+            </div>
           </div>
 
           {/* Widget */}
@@ -436,6 +480,16 @@ export const WorkflowNode = memo(
           onClose={handleDialogClose}
           readonly={readonly}
         />
+
+        {data.functionCalling && (
+          <WorkflowToolSelector
+            open={isToolSelectorOpen}
+            onClose={handleToolSelectorClose}
+            onSelect={handleToolsSelect}
+            templates={data.nodeTemplates || []}
+            selectedTools={getCurrentSelectedTools()}
+          />
+        )}
       </TooltipProvider>
     );
   }