)}
{!isLoadingTools && !toolsError && tools.length > 0 && (
-
-
-
Connected
+
)}
{toolsError && !isPreviewForbidden && (
-
{isLoadingTools && (
-
-
-
Testing connection and loading tools...
+
+
+
Testing connection and loading tools...
)}
{toolsError && isPreviewForbidden && (
-
+
+ Tool preview unavailable
+ {toolsError}
+
)}
{toolsError && !isPreviewForbidden && (
-
- {toolsError}
- {toolsErrorStackTrace && (
-
- {toolsErrorStackTrace}
-
- ),
- },
- ]}
- style={{ marginTop: "12px" }}
+
+ Connection Failed
+
+ {toolsError}
+ {toolsErrorStackTrace && (
+
+
+ Stack Trace
+
+ }
/>
- )}
-
- }
- type="error"
- showIcon
- action={
-
} onClick={fetchTools} size="small">
+
+
+ {toolsErrorStackTrace}
+
+
+
+ )}
+
+
+
+
- }
- />
+
+
)}
{!isLoadingTools && tools.length === 0 && !toolsError && (
-
-
-
Connection successful!
-
-
No tools found for this MCP server
+
+
+
Connection successful!
+
No tools found for this MCP server
)}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
new file mode 100644
index 00000000000..4e2456ab7a4
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.test.tsx
@@ -0,0 +1,118 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import MCPDiscovery from "./mcp_discovery";
+import { fetchDiscoverableMCPServers } from "@/components/networking";
+import type { DiscoverableMCPServer } from "@/components/mcp_tools/types";
+
+vi.mock("@/components/networking", () => ({
+ fetchDiscoverableMCPServers: vi.fn(),
+}));
+
+const githubServer = {
+ name: "github",
+ title: "GitHub",
+ description: "Code hosting",
+ category: "Developer Tools",
+ icon_url: "",
+} as DiscoverableMCPServer;
+
+const slackServer = {
+ name: "slack",
+ title: "Slack",
+ description: "Team chat",
+ category: "Communication",
+ icon_url: "",
+} as DiscoverableMCPServer;
+
+const defaultProps = {
+ isVisible: true,
+ onClose: vi.fn(),
+ onSelectServer: vi.fn(),
+ onCustomServer: vi.fn(),
+ accessToken: "tok",
+};
+
+describe("MCPDiscovery", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(fetchDiscoverableMCPServers).mockResolvedValue({
+ servers: [githubServer, slackServer],
+ categories: ["Developer Tools", "Communication"],
+ });
+ });
+
+ // Each category name renders twice: once as a filter pill (a button) and once
+ // as the heading of its group. Only the heading is not a button.
+ const groupHeading = (category: string) => screen.getAllByText(category).filter((el) => el.tagName !== "BUTTON");
+
+ it("lists every discoverable server grouped under its category", async () => {
+ render(
);
+
+ expect(await screen.findByText("GitHub")).toBeInTheDocument();
+ expect(screen.getByText("Slack")).toBeInTheDocument();
+ expect(groupHeading("Developer Tools")).toHaveLength(1);
+ expect(groupHeading("Communication")).toHaveLength(1);
+ expect(screen.getByText("Add MCP Server")).toBeInTheDocument();
+ });
+
+ it("filters the list down to the chosen category", async () => {
+ render(
);
+ await screen.findByText("GitHub");
+
+ await userEvent.click(screen.getByRole("button", { name: "Communication" }));
+
+ await waitFor(() => expect(screen.queryByText("GitHub")).not.toBeInTheDocument());
+ expect(screen.getByText("Slack")).toBeInTheDocument();
+ });
+
+ it("filters the list by the search term", async () => {
+ render(
);
+ await screen.findByText("GitHub");
+
+ await userEvent.type(screen.getByPlaceholderText("Search servers..."), "chat");
+
+ await waitFor(() => expect(screen.queryByText("GitHub")).not.toBeInTheDocument());
+ expect(screen.getByText("Slack")).toBeInTheDocument();
+ });
+
+ it("hands the picked server back to the caller", async () => {
+ const onSelectServer = vi.fn();
+ render(
);
+
+ await userEvent.click(await screen.findByText("GitHub"));
+
+ expect(onSelectServer).toHaveBeenCalledWith(githubServer);
+ });
+
+ it("offers a custom-server escape hatch", async () => {
+ const onCustomServer = vi.fn();
+ render(
);
+
+ await userEvent.click(await screen.findByRole("button", { name: "+ Custom Server" }));
+
+ expect(onCustomServer).toHaveBeenCalled();
+ });
+
+ it("surfaces a fetch failure", async () => {
+ vi.mocked(fetchDiscoverableMCPServers).mockRejectedValue(new Error("registry down"));
+
+ render(
);
+
+ expect(await screen.findByText(/Failed to load servers: registry down/)).toBeInTheDocument();
+ });
+
+ it("offers the custom-server link when nothing matches", async () => {
+ vi.mocked(fetchDiscoverableMCPServers).mockResolvedValue({ servers: [], categories: [] });
+
+ render(
);
+
+ expect(await screen.findByText(/No servers found/)).toBeInTheDocument();
+ });
+
+ it("does not fetch while hidden", () => {
+ render(
);
+
+ expect(fetchDiscoverableMCPServers).not.toHaveBeenCalled();
+ });
+});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
index 6fcff011ba6..b2c181a9112 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx
@@ -1,13 +1,15 @@
import React, { useState, useMemo, useEffect } from "react";
-import { Modal, Input, Typography } from "antd";
+import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/cva.config";
import { fetchDiscoverableMCPServers } from "@/components/networking";
import { DiscoverableMCPServer, DiscoverMCPServersResponse } from "@/components/mcp_tools/types";
import { mcpLogoImg } from "./create_mcp_server";
import { resolveLogoSrc } from "@/lib/assetPaths";
-const { Search } = Input;
-const { Text } = Typography;
-
interface MCPDiscoveryProps {
isVisible: boolean;
onClose: () => void;
@@ -16,12 +18,21 @@ interface MCPDiscoveryProps {
accessToken: string | null;
}
-const INITIAL_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#EC4899", "#06B6D4", "#84CC16"];
+const INITIAL_COLORS = [
+ "bg-blue-500",
+ "bg-emerald-500",
+ "bg-amber-500",
+ "bg-red-500",
+ "bg-violet-500",
+ "bg-pink-500",
+ "bg-cyan-500",
+ "bg-lime-500",
+];
function getInitialAvatar(name: string) {
const initial = name.charAt(0).toUpperCase();
const colorIndex = name.split("").reduce((acc, ch) => acc + ch.charCodeAt(0), 0) % INITIAL_COLORS.length;
- return { initial, backgroundColor: INITIAL_COLORS[colorIndex] };
+ return { initial, backgroundClass: INITIAL_COLORS[colorIndex] };
}
const MCPDiscovery: React.FC
= ({
@@ -91,214 +102,126 @@ const MCPDiscovery: React.FC = ({
}, [filteredServers]);
return (
-
-
-
-
Add MCP Server
-
- + Custom Server
-
-
- }
- open={isVisible}
- onCancel={onClose}
- footer={null}
- width={1000}
- className="top-8"
- styles={{
- body: { padding: "24px", maxHeight: "70vh", overflowY: "auto" },
- header: { padding: "24px 24px 0 24px", border: "none" },
- }}
- >
- {/* Filter pills */}
-
- {["All", ...categories].map((cat) => {
- const isSelected = selectedCategory === cat;
- return (
- setSelectedCategory(cat)}
- style={{
- padding: "4px 12px",
- borderRadius: 4,
- border: isSelected ? "1px solid #111827" : "1px solid #e5e7eb",
- background: isSelected ? "#111827" : "#fff",
- color: isSelected ? "#fff" : "#4b5563",
- cursor: "pointer",
- fontSize: 12,
- fontWeight: isSelected ? 500 : 400,
- lineHeight: "20px",
- }}
- >
- {cat}
-
- );
- })}
-