@inkeep/agents-manage-ui 0.15.0 → 0.16.1

package/src/components/graph/configuration/node-types.tsx

@@ -1,6 +1,7 @@
-import { Bot, BotMessageSquare, Hammer } from 'lucide-react';
+import { Bot, BotMessageSquare, Code, Hammer } from 'lucide-react';
 import { AgentNode } from '../nodes/agent-node';
 import { ExternalAgentNode } from '../nodes/external-agent-node';
+import { FunctionToolNode } from '../nodes/function-tool-node';
 import { MCPNode } from '../nodes/mcp-node';
 import { MCPPlaceholderNode } from '../nodes/mcp-placeholder-node';
 import type { GraphModels } from './graph-types';
@@ -46,11 +47,21 @@ export interface ExternalAgentNodeData extends Record<string, unknown> {
   credentialReferenceId?: string | null;
 }
 
+export interface FunctionToolNodeData extends Record<string, unknown> {
+  functionToolId: string;
+  agentId?: string | null; // null when unconnected, string when connected to specific agent
+  name?: string;
+  description?: string;
+  code?: string;
+  inputSchema?: Record<string, unknown>;
+}
+
 export enum NodeType {
   Agent = 'agent',
   ExternalAgent = 'external-agent',
   MCP = 'mcp',
   MCPPlaceholder = 'mcp-placeholder',
+  FunctionTool = 'function-tool',
 }
 
 export const nodeTypes = {
@@ -58,12 +69,14 @@ export const nodeTypes = {
   [NodeType.ExternalAgent]: ExternalAgentNode,
   [NodeType.MCP]: MCPNode,
   [NodeType.MCPPlaceholder]: MCPPlaceholderNode,
+  [NodeType.FunctionTool]: FunctionToolNode,
 };
 
 export const mcpNodeHandleId = 'target-mcp';
 export const agentNodeSourceHandleId = 'source-agent';
 export const agentNodeTargetHandleId = 'target-agent';
 export const externalAgentNodeTargetHandleId = 'target-external-agent';
+export const functionToolNodeHandleId = 'target-function-tool';
 
 export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.Agent]: {
@@ -80,6 +93,10 @@ export const newNodeDefaults: Record<keyof typeof nodeTypes, NodeData> = {
   [NodeType.MCPPlaceholder]: {
     name: 'Select MCP server',
   },
+  [NodeType.FunctionTool]: {
+    name: 'Function Tool',
+    agentId: null,
+  },
 };
 
 export const nodeTypeMap = {
@@ -103,4 +120,9 @@ export const nodeTypeMap = {
     name: 'MCP',
     Icon: Hammer,
   },
+  [NodeType.FunctionTool]: {
+    type: NodeType.FunctionTool,
+    name: 'Function Tool',
+    Icon: Code,
+  },
 };

package/src/components/graph/graph.tsx

@@ -26,8 +26,9 @@ import {
   type ExtendedFullGraphDefinition,
   extractGraphMetadata,
   serializeGraphData,
+  validateSerializedData,
 } from '@/features/graph/domain';
-import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store'
+import { useGraphActions, useGraphStore } from '@/features/graph/state/use-graph-store';
 import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import { useSidePane } from '@/hooks/use-side-pane';
@@ -180,7 +181,14 @@ function Flow({
     return lookup;
   }, [graph?.agents]);
 
-  const { screenToFlowPosition, updateNodeData, fitView, getNodes, getEdges, getIntersectingNodes } = useReactFlow();
+  const {
+    screenToFlowPosition,
+    updateNodeData,
+    fitView,
+    getNodes,
+    getEdges,
+    getIntersectingNodes,
+  } = useReactFlow();
   const { storeNodes, edges, metadata } = useGraphStore((state) => ({
     storeNodes: state.nodes,
     edges: state.edges,
@@ -207,33 +215,36 @@ function Flow({
    * Custom `onNodesChange` handler that relayouts the graph using Dagre
    * when a `replace` change causes node intersections.
    **/
-  const onNodesChange: typeof storeOnNodesChange = useCallback((changes) => {
-    storeOnNodesChange(changes);
+  const onNodesChange: typeof storeOnNodesChange = useCallback(
+    (changes) => {
+      storeOnNodesChange(changes);
 
-    const replaceChanges = changes.filter(change => change.type === 'replace');
-    if (!replaceChanges.length) {
-      return
-    }
-    // Using `setTimeout` instead of `requestAnimationFrame` ensures updated node positions are available,
-    // as `requestAnimationFrame` may run too early, causing `hasIntersections` to incorrectly return false.
-    setTimeout(() => {
-      const currentNodes = getNodes();
-      // Check if any of the replaced nodes are intersecting with others
-      for (const change of replaceChanges) {
-        const node = currentNodes.find(n => n.id === change.id);
-        if (!node) {
-          continue
-        }
-        // Use React Flow's intersection detection
-        const intersectingNodes = getIntersectingNodes(node);
-        if (intersectingNodes.length > 0) {
-          // Apply Dagre layout to resolve intersections
-          setNodes((prev) => applyDagreLayout(prev, getEdges()))
-          return // exit loop
-        }
+      const replaceChanges = changes.filter((change) => change.type === 'replace');
+      if (!replaceChanges.length) {
+        return;
       }
-    }, 0)
-  }, [getNodes, getEdges, getIntersectingNodes, setNodes, storeOnNodesChange]);
+      // Using `setTimeout` instead of `requestAnimationFrame` ensures updated node positions are available,
+      // as `requestAnimationFrame` may run too early, causing `hasIntersections` to incorrectly return false.
+      setTimeout(() => {
+        const currentNodes = getNodes();
+        // Check if any of the replaced nodes are intersecting with others
+        for (const change of replaceChanges) {
+          const node = currentNodes.find((n) => n.id === change.id);
+          if (!node) {
+            continue;
+          }
+          // Use React Flow's intersection detection
+          const intersectingNodes = getIntersectingNodes(node);
+          if (intersectingNodes.length > 0) {
+            // Apply Dagre layout to resolve intersections
+            setNodes((prev) => applyDagreLayout(prev, getEdges()));
+            return; // exit loop
+          }
+        }
+      }, 0);
+    },
+    [getNodes, getEdges, getIntersectingNodes, setNodes, storeOnNodesChange]
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this effect on first render
   useEffect(() => {
@@ -569,6 +580,23 @@ function Flow({
       agentToolConfigLookup
     );
 
+    // Validate the serialized data before saving
+    const validationErrors = validateSerializedData(serializedData);
+    if (validationErrors.length > 0) {
+      // Convert validation errors to the format expected by parseGraphValidationErrors
+      const errorObjects = validationErrors.map((error) => ({
+        message: error,
+        field: 'general',
+        code: 'custom_validation',
+        path: [],
+      }));
+
+      const errorSummary = parseGraphValidationErrors(JSON.stringify(errorObjects));
+      setErrors(errorSummary);
+      toast.error(`Validation failed: ${validationErrors[0]}`);
+      return;
+    }
+
     const res = await saveGraph(
       tenantId,
       projectId,
@@ -704,7 +732,7 @@ function Flow({
           <Panel position="top-right">
             <Toolbar
               onSubmit={onSubmit}
-              isPreviewDisabled={!graph?.id}
+              inPreviewDisabled={!graph?.id}
               toggleSidePane={isOpen ? backToGraph : openGraphPane}
               setShowPlayground={() => {
                 closeSidePane();

package/src/components/graph/node-library/node-library.tsx

@@ -7,6 +7,7 @@ const nodeTypes: NodeItem[] = [
   nodeTypeMap[NodeType.Agent],
   nodeTypeMap[NodeType.ExternalAgent],
   nodeTypeMap[NodeType.MCPPlaceholder],
+  nodeTypeMap[NodeType.FunctionTool],
 ];
 
 export default function NodeLibrary() {

package/src/components/graph/nodes/function-tool-node.tsx

@@ -0,0 +1,32 @@
+import { type NodeProps, Position } from '@xyflow/react';
+import { Code } from 'lucide-react';
+import { type FunctionToolNodeData, functionToolNodeHandleId } from '../configuration/node-types';
+import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle } from './base-node';
+import { Handle } from './handle';
+
+export function FunctionToolNode(props: NodeProps & { data: FunctionToolNodeData }) {
+  const { data, selected } = props;
+
+  // Get data directly from node (like agents do)
+  const name = String(data.name || 'Function Tool');
+  const description = String(data.description || '');
+
+  return (
+    <BaseNode isSelected={selected} className="rounded-4xl min-w-40 max-w-xs">
+      <BaseNodeHeader className="mb-0 py-3">
+        <div className="flex flex-col gap-1.5">
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 rounded flex items-center justify-center flex-shrink-0">
+              <Code className="w-4 h-4 text-foreground/70" />
+            </div>
+            <BaseNodeHeaderTitle className="flex-1 truncate">{name}</BaseNodeHeaderTitle>
+          </div>
+          {description?.trim() ? (
+            <p className="text-xs text-muted-foreground line-clamp-2 pl-7">{description}</p>
+          ) : null}
+        </div>
+      </BaseNodeHeader>
+      <Handle id={functionToolNodeHandleId} type="target" position={Position.Top} isConnectable />
+    </BaseNode>
+  );
+}

package/src/components/graph/nodes/mcp-node.tsx

@@ -27,7 +27,7 @@ export function MCPNode(props: NodeProps & { data: MCPNodeData }) {
 
   const activeTools = getActiveTools({
     availableTools: availableTools,
-    activeTools: toolData?.config?.mcp?.activeTools,
+    activeTools: toolData?.config?.type === 'mcp' ? toolData.config.mcp.activeTools : undefined,
   });
 
   const selectedTools = getCurrentSelectedToolsForNode(props, agentToolConfigLookup, edges);

package/src/components/graph/playground/chat-widget.tsx

@@ -1,8 +1,9 @@
 'use client';
-import { InkeepEmbeddedChat } from '@inkeep/cxkit-react-oss';
-import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/cxkit-react-oss/types';
+import { InkeepEmbeddedChat } from '@inkeep/agents-ui';
+import type { ComponentsConfig, InkeepCallbackEvent } from '@inkeep/agents-ui/types';
 import { nanoid } from 'nanoid';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import type { ConversationDetail } from '@/components/traces/timeline/types';
 import { useRuntimeConfig } from '@/contexts/runtime-config-context';
 import { IkpMessage as IkpMessageComponent } from './ikp-message';
 
@@ -15,6 +16,7 @@ interface ChatWidgetProps {
   startPolling: () => void;
   stopPolling: () => void;
   customHeaders?: Record<string, string>;
+  chatActivities: ConversationDetail | null;
 }
 
 const styleOverrides = `
@@ -127,9 +129,35 @@ export function ChatWidget({
   startPolling,
   stopPolling,
   customHeaders = {},
+  chatActivities,
 }: ChatWidgetProps) {
   const { INKEEP_AGENTS_RUN_API_URL, INKEEP_AGENTS_RUN_API_BYPASS_SECRET } = useRuntimeConfig();
   const stopPollingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hasReceivedAssistantMessageRef = useRef(false);
+  const POLLING_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
+
+  // Helper function to reset the stop polling timeout
+  const resetStopPollingTimeout = useCallback(() => {
+    // Clear any existing timeout
+    if (stopPollingTimeoutRef.current) {
+      clearTimeout(stopPollingTimeoutRef.current);
+      stopPollingTimeoutRef.current = null;
+    }
+    
+    // Set a new timeout for 5 minutes
+    stopPollingTimeoutRef.current = setTimeout(() => {
+      stopPolling();
+      stopPollingTimeoutRef.current = null;
+    }, POLLING_TIMEOUT_MS);
+  }, [stopPolling, POLLING_TIMEOUT_MS]);
+
+  // Reset timeout when new activities come in AFTER assistant message received
+  useEffect(() => {
+    // Only reset timeout if we've already received the assistant message and new activities were added
+    if (hasReceivedAssistantMessageRef.current) {
+      resetStopPollingTimeout();
+    }
+  }, [chatActivities?.activities?.length, resetStopPollingTimeout]);
 
   useEffect(() => {
     return () => {
@@ -147,13 +175,14 @@ export function ChatWidget({
           baseSettings={{
             onEvent: (event: InkeepCallbackEvent) => {
               if (event.eventName === 'assistant_message_received') {
-                // Add a delay before stopping polling to allow activity data to be available
-                stopPollingTimeoutRef.current = setTimeout(() => {
-                  stopPolling();
-                  stopPollingTimeoutRef.current = null;
-                }, 15000);
+                // Mark that we've received the assistant message
+                hasReceivedAssistantMessageRef.current = true;
+                // Reset the timeout to 5 minutes after receiving an assistant message
+                resetStopPollingTimeout();
               }
               if (event.eventName === 'user_message_submitted') {
+                // Reset the flag
+                hasReceivedAssistantMessageRef.current = false;
                 // Cancel any pending stop polling timeout since we need to keep polling
                 if (stopPollingTimeoutRef.current) {
                   clearTimeout(stopPollingTimeoutRef.current);
@@ -162,6 +191,8 @@ export function ChatWidget({
                 startPolling();
               }
               if (event.eventName === 'chat_clear_button_clicked') {
+                // Reset the flag
+                hasReceivedAssistantMessageRef.current = false;
                 // Cancel any pending stop polling timeout
                 if (stopPollingTimeoutRef.current) {
                   clearTimeout(stopPollingTimeoutRef.current);
@@ -234,7 +265,7 @@ export function ChatWidget({
   );
 }
 
-// using the built in IkpMessage component from cxkit-react-oss but leaving this here for reference / testing
+// using the built in IkpMessage component from agents-ui but leaving this here for reference / testing
 const _IkpMessage: ComponentsConfig<Record<string, unknown>>['IkpMessage'] = (props) => {
   const { message, renderMarkdown, renderComponent } = props;
 

package/src/components/graph/playground/ikp-message.tsx

@@ -1,4 +1,4 @@
-import type { Message } from '@inkeep/cxkit-react-oss/types';
+import type { Message } from '@inkeep/agents-ui/types';
 import { BookOpen, Check, ChevronRight, LoaderCircle } from 'lucide-react';
 import { type FC, useEffect, useRef, useState } from 'react';
 import supersub from 'remark-supersub';

package/src/components/graph/playground/playground.tsx

@@ -82,6 +82,7 @@ export const Playground = ({
               projectId={projectId}
               tenantId={tenantId}
               customHeaders={customHeaders}
+              chatActivities={chatActivities}
               key={JSON.stringify(customHeaders)}
             />
           </ResizablePanel>

package/src/components/graph/sidepane/metadata/context-config.tsx

@@ -1,7 +1,4 @@
 import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
 import type { ContextConfig, GraphMetadata } from '../../configuration/graph-types';
 import { SectionHeader } from '../section';
 
@@ -12,7 +9,7 @@ export function ContextConfigForm({
   contextConfig: ContextConfig;
   updateMetadata: (field: keyof GraphMetadata, value: GraphMetadata[keyof GraphMetadata]) => void;
 }) {
-  const { id, name, description, contextVariables, requestContextSchema } = contextConfig;
+  const { contextVariables, headersSchema } = contextConfig;
 
   const updateContextConfig = (field: keyof ContextConfig, value: string) => {
     const updatedContextConfig = {
@@ -29,38 +26,6 @@ export function ContextConfigForm({
         description="Configure dynamic context for this graph."
       />
       <div className="flex flex-col space-y-8">
-        <div className="space-y-2">
-          <Label htmlFor="id">Id</Label>
-          <Input
-            id="id"
-            value={id || ''}
-            onChange={(e) => updateContextConfig('id', e.target.value)}
-            placeholder="my-context"
-          />
-          <p className="text-xs text-muted-foreground">
-            Choose a unique identifier for this configuration. Using an existing id will replace
-            that configuration.
-          </p>
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="name">Name</Label>
-          <Input
-            id="name"
-            value={name}
-            onChange={(e) => updateContextConfig('name', e.target.value)}
-            placeholder="My context"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="description">Description</Label>
-          <Textarea
-            id="description"
-            value={description}
-            onChange={(e) => updateContextConfig('description', e.target.value)}
-            placeholder="Context description..."
-            className="max-h-96"
-          />
-        </div>
         <ExpandableJsonEditor
           name="contextVariables"
           label="Context variables (JSON)"
@@ -70,10 +35,10 @@ export function ContextConfigForm({
           className=""
         />
         <ExpandableJsonEditor
-          name="requestContextSchema"
-          label="Request context schema (JSON)"
-          value={requestContextSchema}
-          onChange={(value) => updateContextConfig('requestContextSchema', value)}
+          name="headersSchema"
+          label="Headers schema (JSON)"
+          value={headersSchema}
+          onChange={(value) => updateContextConfig('headersSchema', value)}
           placeholder="{}"
           className=""
         />

package/src/components/graph/sidepane/nodes/expandable-text-area.tsx

@@ -1,9 +1,9 @@
-import { type FC, type RefObject, useRef, type ComponentProps } from 'react';
-import { ExpandableField } from '@/components/form/expandable-field';
-import { Button } from '@/components/ui/button';
 import { Braces } from 'lucide-react';
-import { TooltipTrigger, Tooltip, TooltipContent } from '@/components/ui/tooltip';
+import { type ComponentProps, type FC, type RefObject, useRef } from 'react';
+import { ExpandableField } from '@/components/form/expandable-field';
 import { PromptEditor } from '@/components/form/prompt-editor';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
 // Extract inner type from RefObject<T>
@@ -14,7 +14,7 @@ const PromptEditorWithAddVariables: FC<
     tooltipClassName: string;
   }
 > = ({ tooltipClassName, ...props }) => {
-  const codemirrorRef = useRef<RefValue<typeof props.ref>>(null!);
+  const codemirrorRef = useRef<RefValue<typeof props.ref>>(null);
   const variablesText = 'Add variables';
   return (
     <div className="h-full relative">
@@ -30,16 +30,14 @@ const PromptEditorWithAddVariables: FC<
             )}
             type="button"
             onClick={() => {
-              codemirrorRef.current.insertTemplateVariable();
+              codemirrorRef.current?.insertTemplateVariable();
             }}
           >
             <Braces className="h-4 w-4 text-muted-foreground" />
             <span className="sr-only">{variablesText}</span>
           </Button>
         </TooltipTrigger>
-        <TooltipContent>
-          {variablesText}
-        </TooltipContent>
+        <TooltipContent>{variablesText}</TooltipContent>
       </Tooltip>
     </div>
   );

package/src/components/graph/sidepane/nodes/function-tool-node-editor.tsx

@@ -0,0 +1,194 @@
+import type { Node } from '@xyflow/react';
+import { useCallback, useEffect, useState } from 'react';
+import { StandaloneJsonEditor } from '@/components/form/standalone-json-editor';
+import { useNodeEditor } from '@/hooks/use-node-editor';
+import type { FunctionToolNodeData } from '../../configuration/node-types';
+import { InputField, TextareaField } from './form-fields';
+
+interface FunctionToolNodeEditorProps {
+  selectedNode: Node<FunctionToolNodeData>;
+}
+
+export function FunctionToolNodeEditor({ selectedNode }: FunctionToolNodeEditorProps) {
+  const { getFieldError, setFieldRef, updatePath } = useNodeEditor({
+    selectedNodeId: selectedNode.id,
+  });
+
+  // Get data directly from node (like agents do)
+  const nodeData = selectedNode.data;
+
+  // Local state for form fields - initialize from node data
+  const [name, setName] = useState(String(nodeData.name || ''));
+  const [description, setDescription] = useState(String(nodeData.description || ''));
+  const [code, setCode] = useState(String(nodeData.code || ''));
+  const [inputSchema, setInputSchema] = useState(
+    nodeData.inputSchema ? JSON.stringify(nodeData.inputSchema, null, 2) : ''
+  );
+  const [dependencies, setDependencies] = useState(
+    nodeData.dependencies ? JSON.stringify(nodeData.dependencies, null, 2) : ''
+  );
+
+  // Sync local state with node data when node changes
+  useEffect(() => {
+    setName(String(nodeData.name || ''));
+    setDescription(String(nodeData.description || ''));
+    setCode(String(nodeData.code || ''));
+    setInputSchema(nodeData.inputSchema ? JSON.stringify(nodeData.inputSchema, null, 2) : '');
+    setDependencies(nodeData.dependencies ? JSON.stringify(nodeData.dependencies, null, 2) : '');
+  }, [nodeData]);
+
+  // Handle input schema changes with JSON validation
+  const handleInputSchemaChange = useCallback(
+    (value: string) => {
+      setInputSchema(value);
+
+      if (!value?.trim()) {
+        updatePath('inputSchema', undefined);
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(value);
+        updatePath('inputSchema', parsed);
+      } catch {
+        // Invalid JSON - don't update
+      }
+    },
+    [updatePath]
+  );
+
+  // Handle dependencies changes with JSON validation
+  const handleDependenciesChange = useCallback(
+    (value: string) => {
+      setDependencies(value);
+
+      if (!value?.trim()) {
+        updatePath('dependencies', undefined);
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(value);
+        updatePath('dependencies', parsed);
+      } catch {
+        // Invalid JSON - don't update
+      }
+    },
+    [updatePath]
+  );
+
+  // Handle name changes
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const newName = e.target.value;
+      setName(newName);
+      updatePath('name', newName);
+    },
+    [updatePath]
+  );
+
+  // Handle code changes
+  const handleCodeChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const newCode = e.target.value;
+      setCode(newCode);
+      updatePath('code', newCode);
+    },
+    [updatePath]
+  );
+
+  // Handle description changes
+  const handleDescriptionChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const newDescription = e.target.value;
+      setDescription(newDescription);
+      updatePath('description', newDescription);
+    },
+    [updatePath]
+  );
+
+  return (
+    <div className="space-y-6">
+      <InputField
+        ref={(el) => setFieldRef('name', el)}
+        id="function-tool-name"
+        name="name"
+        label="Name"
+        value={name}
+        onChange={handleNameChange}
+        placeholder="Enter function tool name..."
+        error={getFieldError('name')}
+        isRequired
+      />
+
+      <TextareaField
+        ref={(el) => setFieldRef('description', el)}
+        id="function-tool-description"
+        name="description"
+        label="Description"
+        value={description}
+        onChange={handleDescriptionChange}
+        placeholder="Enter function tool description..."
+        error={getFieldError('description')}
+        isRequired
+        maxHeight="max-h-32"
+      />
+
+      <TextareaField
+        ref={(el) => setFieldRef('code', el)}
+        id="function-tool-code"
+        name="code"
+        label="Code"
+        value={code}
+        onChange={handleCodeChange}
+        placeholder="Enter function code here..."
+        error={getFieldError('code')}
+        isRequired
+        className="min-h-[200px] font-mono text-sm"
+      />
+
+      <div className="space-y-2">
+        <div className="text-sm font-medium">
+          Input Schema <span className="text-red-500">*</span>
+        </div>
+        <StandaloneJsonEditor
+          value={inputSchema}
+          onChange={handleInputSchemaChange}
+          placeholder={`{
+  "type": "object",
+  "properties": {
+    "param1": {
+      "type": "string",
+      "description": "Description of parameter 1"
+    },
+    "param2": {
+      "type": "number",
+      "description": "Description of parameter 2"
+    }
+  },
+  "required": ["param1"]
+}`}
+        />
+        {getFieldError('inputSchema') && (
+          <p className="text-sm text-red-600">{getFieldError('inputSchema')}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-sm font-medium">Dependencies (Optional)</div>
+        <StandaloneJsonEditor
+          value={dependencies}
+          onChange={handleDependenciesChange}
+          placeholder={`{
+  "axios": "^1.6.0",
+  "lodash": "^4.17.21"
+}`}
+        />
+        {getFieldError('dependencies') && (
+          <p className="text-sm text-red-600">{getFieldError('dependencies')}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/src/components/graph/sidepane/nodes/mcp-node-editor.tsx

@@ -61,7 +61,7 @@ export function MCPServerNodeEditor({
 
   const activeTools = getActiveTools({
     availableTools: availableTools,
-    activeTools: toolData?.config?.mcp?.activeTools,
+    activeTools: toolData?.config && toolData.config.type === 'mcp' ? toolData.config.mcp.activeTools : undefined,
   });
 
   // Handle missing tool data
@@ -191,7 +191,7 @@ export function MCPServerNodeEditor({
         <Input
           id="url"
           name="url"
-          value={toolData?.config?.mcp?.server?.url || ''}
+          value={toolData?.config && toolData.config.type === 'mcp' ? toolData.config.mcp.server.url : ''}
           onChange={handleInputChange}
           placeholder="https://mcp.inkeep.com"
           disabled