chore(ui): refactor mcp config ui

2025-05-30 16:33:53 +05:30 · 2025-05-30 16:33:53 +05:30 · 6fded94026
parent fdd42cf9aa
commit 6fded94026
15 changed files with 784 additions and 3 deletions
--- a/frontend/src/app/(dashboard)/agents/_components/agent-mcp-configuration.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/agent-mcp-configuration.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import { Sparkles } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { MCPConfiguration } from './mcp-configuration';
+import { MCPConfigurationNew } from './mcp/mcp-configuration-new';

 interface AgentMCPConfigurationProps {
  mcps: Array<{ name: string; qualifiedName: string; config: any; enabledTools?: string[] }>;
@ -12,7 +13,7 @@ export const AgentMCPConfiguration = ({ mcps, onMCPsChange }: AgentMCPConfigurat
  return (
    <Card className='px-0 bg-transparent border-none shadow-none'>
      <CardContent className='px-0'>
-        <MCPConfiguration
+        <MCPConfigurationNew
          configuredMCPs={mcps}
          onConfigurationChange={onMCPsChange}
        />
--- a/frontend/src/app/(dashboard)/agents/_components/create-agent-dialog.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/create-agent-dialog.tsx
@ -10,6 +10,7 @@ import { Loader2, Search, Settings2, Sparkles } from 'lucide-react';
 import { DEFAULT_AGENTPRESS_TOOLS, getToolDisplayName } from '../_data/tools';
 import { useCreateAgent } from '@/hooks/react-query/agents/use-agents';
 import { MCPConfiguration } from './mcp-configuration';
+import { MCPConfigurationNew } from './mcp/mcp-configuration-new';

 interface AgentCreateRequest {
  name: string;
@ -276,7 +277,7 @@ export const CreateAgentDialog = ({ isOpen, onOpenChange, onAgentCreated }: Crea
                </TabsContent>

                <TabsContent value="mcp" className="flex-1 m-0 p-6 overflow-y-auto">
-                  <MCPConfiguration
+                  <MCPConfigurationNew
                    configuredMCPs={formData.configured_mcps}
                    onConfigurationChange={handleMCPConfigurationChange}
                  />
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/_loaders/mcp-list-loader.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/_loaders/mcp-list-loader.tsx
@ -0,0 +1,59 @@
+import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card } from '@/components/ui/card';
+
+export const McpListLoader: React.FC = () => {
+  return (
+    <div className="space-y-4">
+      <div className="w-76 flex-shrink-0">
+        <Skeleton className="h-5 w-20 mb-3" />
+        <div className="space-y-1">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-2 p-2">
+              <Skeleton className="h-4 w-4 rounded" />
+              <Skeleton className="h-4 flex-1" />
+              <Skeleton className="h-4 w-8 rounded-full" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 space-y-6">
+        {Array.from({ length: 3 }).map((_, categoryIndex) => (
+          <div key={categoryIndex} className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-5" />
+                <Skeleton className="h-5 w-32" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-8 w-16" />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {Array.from({ length: 6 }).map((_, cardIndex) => (
+                <Card key={cardIndex} className="p-4">
+                  <div className="flex items-start gap-3">
+                    <Skeleton className="h-6 w-6 rounded" />
+                    <div className="flex-1 space-y-2">
+                      <div className="flex items-center gap-2">
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-4 w-16 rounded-full" />
+                      </div>
+                      <Skeleton className="h-3 w-full" />
+                      <Skeleton className="h-3 w-2/3" />
+                      <Skeleton className="h-3 w-20" />
+                    </div>
+                    <Skeleton className="h-4 w-4" />
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/_loaders/mcp-search-loader.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/_loaders/mcp-search-loader.tsx
@ -0,0 +1,38 @@
+import React from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card } from '@/components/ui/card';
+
+export const McpSearchLoader: React.FC = () => {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-5 w-32" />
+        <Skeleton className="h-4 w-16" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {Array.from({ length: 8 }).map((_, index) => (
+          <Card key={index} className="p-4">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-6 w-6 rounded" />
+              <div className="flex-1 space-y-2">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-28" />
+                  <Skeleton className="h-3 w-3 rounded-full" />
+                  <Skeleton className="h-4 w-16 rounded-full" />
+                </div>
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-4/5" />
+                <div className="flex items-center gap-4">
+                  <Skeleton className="h-3 w-16" />
+                  <Skeleton className="h-3 w-3" />
+                </div>
+              </div>
+              <Skeleton className="h-4 w-4" />
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/browse-dialog.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/browse-dialog.tsx
@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Search } from 'lucide-react';
+import { usePopularMCPServers, usePopularMCPServersV2, useMCPServers } from '@/hooks/react-query/mcp/use-mcp-servers';
+import { McpServerCard } from './mcp-server-card';
+import { CategorySidebar } from './category-sidebar';
+import { SearchResults } from './search-results';
+import { CategorizedServersList } from './categorized-servers';
+import { McpListLoader } from './_loaders/mcp-list-loader';
+
+interface BrowseDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onServerSelect: (server: any) => void;
+}
+
+export const BrowseDialog: React.FC<BrowseDialogProps> = ({
+  open,
+  onOpenChange,
+  onServerSelect,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const { data: popularServers } = usePopularMCPServers();
+  const { data: popularServersV2, isLoading: isLoadingV2 } = usePopularMCPServersV2();
+  const { data: searchResults, isLoading: isSearching } = useMCPServers(
+    searchQuery.length > 2 ? searchQuery : undefined
+  );
+
+  const categories = popularServersV2?.success ? Object.keys(popularServersV2.categorized) : [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-6xl max-h-[85vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Browse MCP Servers</DialogTitle>
+          <DialogDescription>
+            Discover and add Model Context Protocol servers from Smithery
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search MCP servers..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+
+        <div className="flex flex-1 gap-4 overflow-hidden">
+          {!searchQuery && categories.length > 0 && (
+            <CategorySidebar
+              categories={categories}
+              selectedCategory={selectedCategory}
+              onCategorySelect={setSelectedCategory}
+              categorizedServers={popularServersV2?.categorized || {}}
+            />
+          )}
+          <div className="flex-1 overflow-hidden">
+            <ScrollArea className="h-full">
+              <div className="space-y-4 p-1">
+                {searchQuery && (
+                  <SearchResults
+                    searchResults={searchResults}
+                    isSearching={isSearching}
+                    onServerSelect={onServerSelect}
+                  />
+                )}
+                {!searchQuery && (
+                  <>
+                    {isLoadingV2 ? (
+                      <McpListLoader />
+                    ) : popularServersV2?.success ? (
+                      <CategorizedServersList
+                        categorizedServers={popularServersV2.categorized}
+                        selectedCategory={selectedCategory}
+                        onServerSelect={onServerSelect}
+                        onCategorySelect={setSelectedCategory}
+                      />
+                    ) : popularServers ? (
+                      <div className="space-y-3">
+                        <h3 className="text-sm font-semibold text-muted-foreground">Popular Servers</h3>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                          {popularServers.servers.map((server) => (
+                            <McpServerCard
+                              key={server.qualifiedName}
+                              server={server}
+                              onClick={onServerSelect}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+                  </>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/categorized-servers.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/categorized-servers.tsx
@ -0,0 +1,78 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { categoryIcons } from './constants';
+import { McpServerCard } from './mcp-server-card';
+
+interface CategorizedServersListProps {
+  categorizedServers: Record<string, any[]>;
+  selectedCategory: string | null;
+  onServerSelect: (server: any) => void;
+  onCategorySelect: (category: string) => void;
+}
+
+export const CategorizedServersList: React.FC<CategorizedServersListProps> = ({
+  categorizedServers,
+  selectedCategory,
+  onServerSelect,
+  onCategorySelect,
+}) => {
+  if (selectedCategory) {
+    const servers = categorizedServers[selectedCategory] || [];
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <span className="text-lg">{categoryIcons[selectedCategory] || "🧩"}</span>
+          <h3 className="text-lg font-semibold">{selectedCategory}</h3>
+          <Badge variant="outline" className="ml-auto">
+            {servers.length} servers
+          </Badge>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {servers.map((server) => (
+            <McpServerCard
+              key={server.qualifiedName}
+              server={server}
+              onClick={onServerSelect}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {Object.entries(categorizedServers).map(([category, servers]) => (
+        <div key={category} className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="text-lg">{categoryIcons[category] || "🧩"}</span>
+              <h3 className="text-sm font-semibold text-muted-foreground">{category}</h3>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-muted-foreground">{servers.length} servers</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onCategorySelect(category)}
+                className="text-xs"
+              >
+                View All
+              </Button>
+            </div>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+            {servers.slice(0, 6).map((server) => (
+              <McpServerCard
+                key={server.qualifiedName}
+                server={server}
+                onClick={onServerSelect}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/category-sidebar.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/category-sidebar.tsx
@ -0,0 +1,61 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { categoryIcons } from './constants';
+
+interface CategorySidebarProps {
+  categories: string[];
+  selectedCategory: string | null;
+  onCategorySelect: (category: string | null) => void;
+  categorizedServers: Record<string, any[]>;
+}
+
+export const CategorySidebar: React.FC<CategorySidebarProps> = ({
+  categories,
+  selectedCategory,
+  onCategorySelect,
+  categorizedServers,
+}) => {
+  return (
+    <div className="w-76 flex-shrink-0">
+      <h3 className="text-sm font-semibold mb-3">Categories</h3>
+      <ScrollArea className="h-full">
+        <div className="space-y-1">
+          <Button
+            size="sm"
+            className={cn(
+              "w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary",
+              selectedCategory === null && "bg-primary/5 text-foreground"
+            )}
+            onClick={() => onCategorySelect(null)}
+          >
+            <span>🌐</span>
+            All Categories
+          </Button>
+          {categories.map((category) => {
+            const count = categorizedServers[category]?.length || 0;
+            return (
+              <Button
+                key={category}
+                size="sm"
+                className={cn(
+                  "w-full justify-start shadow-none bg-transparent text-primary hover:bg-muted hover:text-primary",
+                  selectedCategory === category && "bg-primary/5 text-foreground"
+                )}
+                onClick={() => onCategorySelect(category)}
+              >
+                <span>{categoryIcons[category] || "🧩"}</span>
+                <span className="flex-1 text-left">{category}</span>
+                <Badge variant="outline" className="ml-auto text-xs">
+                  {count}
+                </Badge>
+              </Button>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/config-dialog.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/config-dialog.tsx
@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Loader2 } from 'lucide-react';
+import { useMCPServerDetails } from '@/hooks/react-query/mcp/use-mcp-servers';
+import { cn } from '@/lib/utils';
+import { MCPConfiguration } from './types';
+
+interface ConfigDialogProps {
+  server: any;
+  existingConfig?: MCPConfiguration;
+  onSave: (config: MCPConfiguration) => void;
+  onCancel: () => void;
+}
+
+export const ConfigDialog: React.FC<ConfigDialogProps> = ({ 
+  server, 
+  existingConfig, 
+  onSave, 
+  onCancel 
+}) => {
+  const [config, setConfig] = useState<Record<string, any>>(existingConfig?.config || {});
+  const [selectedTools, setSelectedTools] = useState<Set<string>>(
+    new Set(existingConfig?.enabledTools || [])
+  );
+
+  const { data: serverDetails, isLoading } = useMCPServerDetails(server.qualifiedName);
+
+  const handleSave = () => {
+    onSave({
+      name: server.displayName || server.name || server.qualifiedName,
+      qualifiedName: server.qualifiedName,
+      config,
+      enabledTools: Array.from(selectedTools),
+    });
+  };
+
+  const handleToolToggle = (toolName: string) => {
+    const newTools = new Set(selectedTools);
+    if (newTools.has(toolName)) {
+      newTools.delete(toolName);
+    } else {
+      newTools.add(toolName);
+    }
+    setSelectedTools(newTools);
+  };
+
+  return (
+    <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+      <DialogHeader>
+        <DialogTitle>Configure {server.displayName || server.name}</DialogTitle>
+        <DialogDescription>
+          Set up the connection and select which tools to enable for this MCP server.
+        </DialogDescription>
+      </DialogHeader>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <ScrollArea className="flex-1 px-1">
+          <div className="space-y-6">
+            {serverDetails?.connections?.[0]?.configSchema?.properties && (
+              <div className="space-y-4">
+                <h3 className="text-sm font-semibold">Connection Settings</h3>
+                {Object.entries(serverDetails.connections[0].configSchema.properties).map(([key, schema]: [string, any]) => (
+                  <div key={key} className="space-y-2">
+                    <Label htmlFor={key}>
+                      {schema.title || key}
+                      {serverDetails.connections[0].configSchema.required?.includes(key) && (
+                        <span className="text-destructive ml-1">*</span>
+                      )}
+                    </Label>
+                    <Input
+                      id={key}
+                      type={schema.format === 'password' ? 'password' : 'text'}
+                      placeholder={schema.description || `Enter ${key}`}
+                      value={config[key] || ''}
+                      onChange={(e) => setConfig({ ...config, [key]: e.target.value })}
+                    />
+                    {schema.description && (
+                      <p className="text-xs text-muted-foreground">{schema.description}</p>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {serverDetails?.tools && serverDetails.tools.length > 0 && (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-sm font-semibold">Available Tools</h3>
+                  <span className="text-xs text-muted-foreground">
+                    {selectedTools.size} of {serverDetails.tools.length} selected
+                  </span>
+                </div>
+                <div className="space-y-2 max-h-[300px] overflow-y-auto">
+                  {serverDetails.tools.map((tool: any) => (
+                    <div
+                      key={tool.name}
+                      className={cn(
+                        "flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors",
+                        selectedTools.has(tool.name)
+                          ? "bg-primary/5 border-primary"
+                          : "hover:bg-muted/50"
+                      )}
+                      onClick={() => handleToolToggle(tool.name)}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={selectedTools.has(tool.name)}
+                        onChange={() => {}}
+                        className="mt-1"
+                      />
+                      <div className="flex-1">
+                        <div className="font-medium text-sm">{tool.name}</div>
+                        {tool.description && (
+                          <div className="text-xs text-muted-foreground mt-1">
+                            {tool.description}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      )}
+
+      <DialogFooter>
+        <Button variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button 
+          onClick={handleSave}
+          disabled={isLoading}
+        >
+          Save Configuration
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/configured-mcp-list.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/configured-mcp-list.tsx
@ -0,0 +1,58 @@
+import React from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Settings, X, Sparkles } from 'lucide-react';
+import { MCPConfiguration } from './types';
+
+
+interface ConfiguredMcpListProps {
+  configuredMCPs: MCPConfiguration[];
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+}
+
+export const ConfiguredMcpList: React.FC<ConfiguredMcpListProps> = ({
+  configuredMCPs,
+  onEdit,
+  onRemove,
+}) => {
+  if (configuredMCPs.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      {configuredMCPs.map((mcp, index) => (
+        <Card key={index} className="p-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+                <Sparkles className="h-4 w-4 text-primary" />
+              </div>
+              <div>
+                <div className="font-medium text-sm">{mcp.name}</div>
+                <div className="text-xs text-muted-foreground">
+                  {mcp.enabledTools?.length || 0} tools enabled
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onEdit(index)}
+              >
+                <Settings className="h-4 w-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => onRemove(index)}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/constants.ts
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/constants.ts
@ -0,0 +1,28 @@
+export const categoryIcons = {
+  "AI & Search": "🤖",
+  "Development & Version Control": "🔧",
+  "Automation & Productivity": "⚡",
+  "Communication & Collaboration": "💬",
+  "Project Management": "📅",
+  "Data & Analytics": "📊",
+  "Cloud & Infrastructure": "☁️",
+  "File Storage": "📁",
+  "Marketing & Sales": "🛒",
+  "Customer Support": "🎧",
+  "Finance": "💰",
+  "Utilities": "🔨",
+  "Other": "🧩",
+
+  "development": "🔧",
+  "ai": "🤖",
+  "automation": "⚡",
+  "search": "🔍",
+  "Database": "📊",
+  "Web": "🌐",
+  "File": "📄",
+  "Development": "💻",
+  "AI": "🤖",
+  "Cloud": "☁️",
+  "Utility": "⚡",
+  "Integration": "🧩",
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/mcp-configuration-new.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/mcp-configuration-new.tsx
@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
+import { Dialog } from '@/components/ui/dialog';
+import { MCPConfigurationProps, MCPConfiguration as MCPConfigurationType } from './types';
+import { ConfiguredMcpList } from './configured-mcp-list';
+import { BrowseDialog } from './browse-dialog';
+import { ConfigDialog } from './config-dialog';
+
+export const MCPConfigurationNew: React.FC<MCPConfigurationProps> = ({
+  configuredMCPs,
+  onConfigurationChange,
+}) => {
+  const [showBrowseDialog, setShowBrowseDialog] = useState(false);
+  const [configuringServer, setConfiguringServer] = useState<any>(null);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+  const handleAddMCP = (server: any) => {
+    setConfiguringServer(server);
+    setEditingIndex(null);
+    setShowBrowseDialog(false);
+  };
+
+  const handleEditMCP = (index: number) => {
+    const mcp = configuredMCPs[index];
+    setConfiguringServer({
+      qualifiedName: mcp.qualifiedName,
+      displayName: mcp.name,
+      name: mcp.name,
+    });
+    setEditingIndex(index);
+  };
+
+  const handleRemoveMCP = (index: number) => {
+    const newMCPs = [...configuredMCPs];
+    newMCPs.splice(index, 1);
+    onConfigurationChange(newMCPs);
+  };
+
+  const handleSaveConfiguration = (config: MCPConfigurationType) => {
+    if (editingIndex !== null) {
+      const newMCPs = [...configuredMCPs];
+      newMCPs[editingIndex] = config;
+      onConfigurationChange(newMCPs);
+    } else {
+      onConfigurationChange([...configuredMCPs, config]);
+    }
+    setConfiguringServer(null);
+    setEditingIndex(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-semibold">MCP Servers</h3>
+          <p className="text-xs text-muted-foreground mt-1">
+            Connect Model Context Protocol servers to extend agent capabilities
+          </p>
+        </div>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => setShowBrowseDialog(true)}
+        >
+          <Plus className="h-4 w-4 mr-1" />
+          Add MCP
+        </Button>
+      </div>
+      <ConfiguredMcpList
+        configuredMCPs={configuredMCPs}
+        onEdit={handleEditMCP}
+        onRemove={handleRemoveMCP}
+      />
+      <BrowseDialog
+        open={showBrowseDialog}
+        onOpenChange={setShowBrowseDialog}
+        onServerSelect={handleAddMCP}
+      />
+      {configuringServer && (
+        <Dialog open={!!configuringServer} onOpenChange={() => setConfiguringServer(null)}>
+          <ConfigDialog
+            server={configuringServer}
+            existingConfig={editingIndex !== null ? configuredMCPs[editingIndex] : undefined}
+            onSave={handleSaveConfiguration}
+            onCancel={() => setConfiguringServer(null)}
+          />
+        </Dialog>
+      )}
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/mcp-server-card.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/mcp-server-card.tsx
@ -0,0 +1,51 @@
+import React from 'react';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Shield, ExternalLink, ChevronRight, Sparkles } from 'lucide-react';
+
+interface McpServerCardProps {
+  server: any;
+  onClick: (server: any) => void;
+}
+
+export const McpServerCard: React.FC<McpServerCardProps> = ({ server, onClick }) => {
+  return (
+    <Card
+      className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
+      onClick={() => onClick(server)}
+    >
+      <div className="flex items-start gap-3">
+        {server.iconUrl ? (
+          <img src={server.iconUrl} alt={server.displayName || server.name} className="w-6 h-6 rounded" />
+        ) : (
+          <div className="w-6 h-6 rounded bg-primary/10 flex items-center justify-center">
+            <Sparkles className="h-3 w-3 text-primary" />
+          </div>
+        )}
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <h4 className="font-medium text-sm">{server.displayName || server.name}</h4>
+            {server.security?.scanPassed && (
+              <Shield className="h-3 w-3 text-green-500" />
+            )}
+            {server.isDeployed && (
+              <Badge variant="secondary" className="text-xs">
+                Deployed
+              </Badge>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+            {server.description}
+          </p>
+          <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
+            <span>Used {server.useCount} times</span>
+            {server.homepage && (
+              <ExternalLink className="h-3 w-3" />
+            )}
+          </div>
+        </div>
+        <ChevronRight className="h-4 w-4 text-muted-foreground" />
+      </div>
+    </Card>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/search-results.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/search-results.tsx
@ -0,0 +1,44 @@
+import React from 'react';
+import { McpSearchLoader } from './_loaders/mcp-search-loader';
+import { McpServerCard } from './mcp-server-card';
+
+interface SearchResultsProps {
+  searchResults: any;
+  isSearching: boolean;
+  onServerSelect: (server: any) => void;
+}
+
+export const SearchResults: React.FC<SearchResultsProps> = ({
+  searchResults,
+  isSearching,
+  onServerSelect,
+}) => {
+  if (isSearching) {
+    return <McpSearchLoader />;
+  }
+
+  if (!searchResults?.servers || searchResults.servers.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-sm text-muted-foreground">No servers found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold text-muted-foreground">
+        Search Results ({searchResults.pagination.totalCount})
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {searchResults.servers.map((server) => (
+          <McpServerCard
+            key={server.qualifiedName}
+            server={server}
+            onClick={onServerSelect}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/app/(dashboard)/agents/_components/mcp/types.ts
+++ b/frontend/src/app/(dashboard)/agents/_components/mcp/types.ts
@ -0,0 +1,11 @@
+export interface MCPConfiguration {
+  name: string;
+  qualifiedName: string;
+  config: Record<string, any>;
+  enabledTools?: string[];
+}
+  
+export interface MCPConfigurationProps {
+  configuredMCPs: MCPConfiguration[];
+  onConfigurationChange: (mcps: MCPConfiguration[]) => void;
+}
--- a/frontend/src/app/(dashboard)/agents/_components/update-agent-dialog.tsx
+++ b/frontend/src/app/(dashboard)/agents/_components/update-agent-dialog.tsx
@ -12,6 +12,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { DEFAULT_AGENTPRESS_TOOLS, getToolDisplayName } from '../_data/tools';
 import { useAgent, useUpdateAgent } from '@/hooks/react-query/agents/use-agents';
 import { MCPConfiguration } from './mcp-configuration';
+import { MCPConfigurationNew } from './mcp/mcp-configuration-new';

 interface AgentUpdateRequest {
  name?: string;
@ -347,7 +348,7 @@ export const UpdateAgentDialog = ({ agentId, isOpen, onOpenChange, onAgentUpdate
                </TabsContent>

                <TabsContent value="mcp" className="flex-1 m-0 p-6 overflow-y-auto">
-                  <MCPConfiguration
+                  <MCPConfigurationNew
                    configuredMCPs={formData.configured_mcps || []}
                    onConfigurationChange={handleMCPConfigurationChange}
                  />