Merge pull request #204 from kagent-dev/peterj/brokenmcp

fix the agent creation with mcp tools

Author: peterj

ui/src/app/actions/teams.ts

@@ -33,6 +33,21 @@ export async function deleteTeam(teamLabel: string) {
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function processConfigObject(config: { [key: string]: any }): { [key: string]: any } {
+  return Object.entries(config).reduce((acc, [key, value]) => {
+    // If value is an object and not null, process it recursively
+    if (typeof value === "object" && value !== null) {
+      acc[key] = processConfigObject(value);
+    } else {
+      // For primitive values, convert to string
+      acc[key] = String(value);
+    }
+    return acc;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  }, {} as { [key: string]: any });
+}
+
 function fromAgentFormDataToAgent(agentFormData: AgentFormData): Agent {
   return {
     metadata: {
@@ -45,12 +60,7 @@ function fromAgentFormDataToAgent(agentFormData: AgentFormData): Agent {
       tools: agentFormData.tools.map((tool) => ({
         provider: tool.provider,
         description: tool.description ?? "No description provided",
-        config: tool.config
-          ? Object.entries(tool.config).reduce((acc, [key, value]) => {
-              acc[key] = String(value);
-              return acc;
-            }, {} as { [key: string]: string })
-          : {},
+        config: tool.config ? processConfigObject(tool.config) : {},
       })),
     },
   };
@@ -61,6 +71,8 @@ export async function createAgent(agentConfig: AgentFormData, update: boolean =
 
   try {
     agentSpec = fromAgentFormDataToAgent(agentConfig);
+
+    console.log("Converted agent data:", agentSpec);
   } catch (ex) {
     console.error("Error converting agent data:", ex);
     return { success: false, error: "Failed to convert agent data. Please try again." };

ui/src/app/agents/new/page.tsx

@@ -16,6 +16,7 @@ import type { AgentTool } from "@/types/datamodel";
 import { LoadingState } from "@/components/LoadingState";
 import { ErrorState } from "@/components/ErrorState";
 import KagentLogo from "@/components/kagent-logo";
+import { extractSocietyOfMindAgentTools } from "@/lib/toolUtils";
 
 interface ValidationErrors {
   name?: string;
@@ -79,9 +80,7 @@ function AgentPageContent() {
               setName(agent.metadata.name || "");
               setDescription(agent.spec.description || "");
               setSystemPrompt(agent.spec.systemMessage || "");
-
-              // Extract and set tools - these are already AgentTool objects
-              setSelectedTools(agent.spec.tools || []);
+              setSelectedTools(extractSocietyOfMindAgentTools(agentResponse) || []);
 
               setSelectedModel({
                 model: agentResponse.model,
@@ -128,6 +127,9 @@ function AgentPageContent() {
     try {
       setIsSubmitting(true);
       setGeneralError("");
+      if (!selectedModel) {
+        throw new Error("Model is required to create the agent.");
+      }
 
       const agentData = {
         name,
@@ -141,24 +143,10 @@ function AgentPageContent() {
 
       if (isEditMode && agentId) {
         // Update existing agent
-        if (!selectedModel) {
-          throw new Error("Model is required to update the agent.");
-        }
-        result = await updateAgent(agentId, {
-          ...agentData,
-          model: selectedModel,
-          tools: selectedTools,
-        });
+        result = await updateAgent(agentId, agentData);
       } else {
         // Create new agent
-        if (!selectedModel) {
-          throw new Error("Model is required to create the agent.");
-        }
-        result = await createNewAgent({
-          ...agentData,
-          model: selectedModel,
-          tools: selectedTools,
-        });
+        result = await createNewAgent(agentData);
       }
 
       if (!result.success) {

ui/src/components/create/SelectToolsDialog.tsx

@@ -10,6 +10,7 @@ import { AgentTool, Component, ToolConfig } from "@/types/datamodel";
 import ProviderFilter from "./ProviderFilter";
 import ToolItem from "./ToolItem";
 import { findComponentForAgentTool } from "@/lib/toolUtils";
+import { getToolDisplayName, getToolDescription, getToolIdentifier } from "@/lib/data";
 
 // Maximum number of tools that can be selected
 const MAX_TOOLS_LIMIT = 10;
@@ -37,7 +38,6 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
   const [searchTerm, setSearchTerm] = useState("");
   const [activeTab, setActiveTab] = useState("all");
   const [localSelectedComponents, setLocalSelectedComponents] = useState<Component<ToolConfig>[]>([]);
-  const [newlyDiscoveredTools, setNewlyDiscoveredTools] = useState<Component<ToolConfig>[]>([]);
   const [providers, setProviders] = useState<Set<string>>(new Set());
   const [selectedProviders, setSelectedProviders] = useState<Set<string>>(new Set());
   const [showFilters, setShowFilters] = useState(false);
@@ -51,7 +51,6 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
         .map((agentTool) => findComponentForAgentTool(agentTool, availableTools))
         .filter((tool): tool is Component<ToolConfig> => tool !== undefined);
 
-      setNewlyDiscoveredTools([]);
       setLocalSelectedComponents(initialComponents);
       setSearchTerm("");
 
@@ -82,37 +81,29 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
     const searchLower = searchTerm.toLowerCase();
 
     return availableTools.filter((tool) => {
-      // Search matching
-      const matchesSearch = tool.provider.toLowerCase().includes(searchLower) || (tool.description?.toLowerCase().includes(searchLower) ?? false);
+      // Search matching - use getToolDisplayName and getToolDescription
+      const toolName = getToolDisplayName(tool).toLowerCase();
+      const toolDescription = getToolDescription(tool)?.toLowerCase() ?? "";
+      const matchesSearch = toolName.includes(searchLower) || toolDescription.includes(searchLower) || tool.provider.toLowerCase().includes(searchLower);
 
       // Tab matching
-      const isSelected = localSelectedComponents.some((t) => t.provider === tool.provider);
-      const isNew = newlyDiscoveredTools.some((t) => t.provider === tool.provider);
-
-      const matchesTab = activeTab === "all" || (activeTab === "selected" && isSelected) || (activeTab === "new" && isNew);
+      const isSelected = localSelectedComponents.some((t) => getToolIdentifier(t) === getToolIdentifier(tool));
+      const matchesTab = activeTab === "all" || (activeTab === "selected" && isSelected);
 
       // Provider matching
       const matchesProvider = selectedProviders.size === 0 || selectedProviders.has(tool.provider);
 
       return matchesSearch && matchesTab && matchesProvider;
     });
-  }, [availableTools, searchTerm, activeTab, localSelectedComponents, newlyDiscoveredTools, selectedProviders]);
+  }, [availableTools, searchTerm, activeTab, localSelectedComponents, selectedProviders]);
 
   // Group tools by category
   const groupedTools = useMemo(() => {
     const groups: { [key: string]: Component<ToolConfig>[] } = {};
 
     // Sort tools first - new tools at the top within each category
     const sortedTools = [...filteredTools].sort((a, b) => {
-      const aIsNew = newlyDiscoveredTools.some((t) => t.provider === a.provider);
-      const bIsNew = newlyDiscoveredTools.some((t) => t.provider === b.provider);
-
-      // Primary sort: new tools first
-      if (aIsNew && !bIsNew) return -1;
-      if (!aIsNew && bIsNew) return 1;
-
-      // Secondary sort: alphabetical by name
-      return (a.provider || "").localeCompare(b.provider || "");
+      return getToolDisplayName(a).localeCompare(getToolDisplayName(b));
     });
 
     // Group by categories
@@ -125,13 +116,13 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
     });
 
     return groups;
-  }, [filteredTools, newlyDiscoveredTools]);
+  }, [filteredTools]);
 
   // Check if selection limit is reached
   const isLimitReached = localSelectedComponents.length >= MAX_TOOLS_LIMIT;
 
   // Helper functions for tool state
-  const isToolSelected = (tool: Component<ToolConfig>) => localSelectedComponents.some((t) => t.provider === tool.provider);
+  const isToolSelected = (tool: Component<ToolConfig>) => localSelectedComponents.some((t) => getToolIdentifier(t) === getToolIdentifier(tool));
 
   // Event handlers
   const handleToggleTool = (tool: Component<ToolConfig>) => {
@@ -142,7 +133,13 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
       return;
     }
 
-    setLocalSelectedComponents((prev) => (isCurrentlySelected ? prev.filter((t) => t.provider !== tool.provider) : [...prev, tool]));
+    setLocalSelectedComponents((prev) => {
+      if (isCurrentlySelected) {
+        return prev.filter((t) => getToolIdentifier(t) !== getToolIdentifier(tool));
+      } else {
+        return [...prev, tool];
+      }
+    });
   };
 
   const handleSave = () => {
@@ -188,22 +185,21 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
   // Stats
   const totalTools = availableTools.length;
   const selectedCount = localSelectedComponents.length;
-  const newToolsCount = newlyDiscoveredTools.length;
 
   return (
     <Dialog
       open={open}
       onOpenChange={(isOpen) => {
         // Auto-save if closing with newly discovered tools
-        if (!isOpen && newToolsCount > 0) {
+        if (!isOpen) {
           onToolsSelected(localSelectedComponents);
         }
         onOpenChange(isOpen);
       }}
     >
       <DialogContent className="max-w-4xl max-h-[85vh] h-auto">
         <DialogHeader>
-          <DialogTitle className="text-xl">{newToolsCount > 0 ? "Select Discovered Tools" : "Select Tools"}</DialogTitle>
+          <DialogTitle className="text-xl">Select Tools</DialogTitle>
         </DialogHeader>
 
         {/* Tool limit warning */}
@@ -250,14 +246,6 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
                   {selectedCount}
                 </Badge>
               </TabsTrigger>
-              {newToolsCount > 0 && (
-                <TabsTrigger value="new">
-                  New
-                  <Badge variant="outline" className="ml-1 bg-background">
-                    {newToolsCount}
-                  </Badge>
-                </TabsTrigger>
-              )}
             </TabsList>
           </Tabs>
 
@@ -293,7 +281,15 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
                   {expandedCategories[category] && (
                     <div className="divide-y">
                       {tools.map((tool) => (
-                        <ToolItem key={tool.provider} tool={tool} isSelected={isToolSelected(tool)} onToggle={handleToggleTool} disabled={!isToolSelected(tool) && isLimitReached} />
+                        <ToolItem
+                          key={getToolIdentifier(tool)}
+                          tool={tool}
+                          isSelected={isToolSelected(tool)}
+                          onToggle={handleToggleTool}
+                          disabled={!isToolSelected(tool) && isLimitReached}
+                          displayName={getToolDisplayName(tool)}
+                          description={getToolDescription(tool)}
+                        />
                       ))}
                     </div>
                   )}
@@ -319,13 +315,8 @@ export const SelectToolsDialog: React.FC<SelectToolsDialogProps> = ({ open, onOp
               <span className="text-muted-foreground">(Maximum: {MAX_TOOLS_LIMIT})</span>
             </div>
             <div className="flex gap-2">
-              {newToolsCount === 0 && (
-                <Button variant="outline" onClick={() => onOpenChange(false)}>
-                  Cancel
-                </Button>
-              )}
               <Button className="bg-violet-500 hover:bg-violet-600 text-white" onClick={handleSave}>
-                {newToolsCount > 0 ? "Add Selected Tools" : "Save Selection"}
+                Save Selection
               </Button>
             </div>
           </div>

ui/src/components/create/ToolItem.tsx

@@ -1,79 +1,46 @@
-import {  isMcpTool } from "@/lib/data";
-import { Check } from "lucide-react";
+import React from "react";
+import { CheckCircle } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {  Component, ToolConfig } from "@/types/datamodel";
-
+import { Component, ToolConfig } from "@/types/datamodel";
 
 interface ToolItemProps {
   tool: Component<ToolConfig>;
   isSelected: boolean;
   onToggle: (tool: Component<ToolConfig>) => void;
   disabled?: boolean;
+  displayName?: string;
+  description?: string;
 }
 
-const ToolItem = ({ tool, isSelected, onToggle, disabled = false }: ToolItemProps) => {
-  const displayName = tool.provider; // getToolDisplayName(tool) || "Unnamed Tool";
-  const displayDescription = tool.description; // getToolDescription(tool) || "No description available";
-  const toolId = tool.provider; // getToolIdentifier(tool);
-
-  // Determine classes based on selection and disabled states
-  const containerClasses = `p-4 rounded-lg border transition-all ${
-    isSelected 
-      ? "bg-primary/10 border-primary/30" 
-      : disabled
-        ? "border-border bg-gray-50 opacity-60"
-        : "border-border hover:bg-secondary/50"
-  } ${disabled && !isSelected ? "cursor-not-allowed" : "cursor-pointer"}`;
-
-  const handleClick = () => {
-    if (!disabled || isSelected) {
-      onToggle(tool);
-    }
-  };
-
+const ToolItem: React.FC<ToolItemProps> = ({ tool, isSelected, onToggle, disabled = false, displayName, description }) => {
+  const toolName = displayName || tool.label;
+  const toolDescription = description || tool.description;
+  
   return (
     <div
-      className={containerClasses}
-      onClick={handleClick}
+      className={`p-3 hover:bg-secondary/20 transition-colors cursor-pointer ${disabled && !isSelected ? "opacity-50 cursor-not-allowed" : ""}`}
+      onClick={() => !disabled && onToggle(tool)}
     >
-      <div className="flex items-start justify-between gap-4">
+      <div className="flex items-start justify-between">
         <div className="flex-1">
-          <div className="font-medium flex items-center flex-wrap gap-2">
-            <span className="mr-1">{displayName}</span>
-            <div className="flex flex-wrap gap-1">
-              {isMcpTool(tool) ? (
-                <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20 hover:bg-blue-500/20">
-                  MCP
-                </Badge>
-              ) : (
-                <Badge variant="outline" className="bg-gray-100 text-gray-500 border-gray-200">
-                  {tool.provider}
-                </Badge>
-              )}
-            </div>
+          <div className="flex items-center">
+            <h4 className="font-medium">{toolName}</h4>
+            {tool.provider.startsWith("autogen_ext.tools.mcp") && (
+              <Badge variant="outline" className="ml-2 bg-purple-50 text-purple-700 border-purple-200">
+                MCP
+              </Badge>
+            )}
           </div>
-          <div className="text-muted-foreground mt-2">{displayDescription}</div>
-          <div className="text-xs text-muted-foreground mt-1 opacity-70">{toolId}</div>
+          <p className="text-sm text-muted-foreground mt-1">{toolDescription}</p>
+          <div className="text-xs text-muted-foreground mt-2">{tool.provider}</div>
         </div>
-        <Button
-          variant={isSelected ? "secondary" : "outline"}
-          size="sm"
-          className={`mt-0 ${isSelected ? "bg-primary text-primary-foreground hover:bg-primary/90" : ""}`}
-          disabled={disabled && !isSelected}
-          onClick={(e) => {
-            e.stopPropagation();
-            handleClick();
-          }}
-        >
+        <div className="ml-4 flex-shrink-0">
           {isSelected ? (
-            <>
-              <Check className="w-4 h-4 mr-1" /> Selected
-            </>
+            <CheckCircle className="h-5 w-5 text-primary" />
           ) : (
-            "Select"
+            <div className="h-5 w-5 rounded-full border-2 border-muted"></div>
           )}
-        </Button>
+        </div>
       </div>
     </div>
   );