- 
{ (e.target as HTMLImageElement).style.display = "none"; }}
- />
-
- )}
-
{/* Well-known logo grid */}
-
-
- {value}
-
{WELL_KNOWN_LOGOS.map((logo) => {
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx
new file mode 100644
index 00000000000..935b9bb349a
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx
@@ -0,0 +1,429 @@
+import { useEffect, useState, type FC, type KeyboardEvent, type MouseEvent } from "react";
+import { Dropdown, Tooltip, Typography, Tag } from "antd";
+import type { MenuProps } from "antd";
+import {
+ CheckOutlined,
+ DeleteOutlined,
+ ExclamationCircleFilled,
+ MoreOutlined,
+ ThunderboltOutlined,
+} from "@ant-design/icons";
+import type { MCPServer } from "./types";
+import { getMaskedAndFullUrl } from "./utils";
+import {
+ getEnvVarDefinitions,
+ getMissingUserFields,
+ subscribeEnvVarsChanged,
+} from "./mock/mockMcpEnvVars";
+
+const { Text } = Typography;
+
+interface MCPServerCardProps {
+ server: MCPServer;
+ userID: string;
+ isLoadingHealth?: boolean;
+ isRechecking?: boolean;
+ onClick: () => void;
+ onRecheckHealth?: () => void;
+ onByokConnect?: () => void;
+ onOpenFillFields?: () => void;
+ onDelete?: () => void;
+}
+
+const HEALTH_TONE: Record = {
+ healthy: { dot: "bg-green-500" },
+ unhealthy: { dot: "bg-red-500" },
+ unknown: { dot: "bg-gray-300" },
+};
+
+// Stop card-level click handler from firing when an interactive child is used.
+const stop = (e: MouseEvent | KeyboardEvent) => e.stopPropagation();
+
+const MCPServerCard: FC = ({
+ server,
+ userID,
+ isLoadingHealth,
+ isRechecking,
+ onClick,
+ onRecheckHealth,
+ onByokConnect,
+ onOpenFillFields,
+ onDelete,
+}) => {
+ // Re-render whenever the mock env var store changes, so the missing-fields
+ // badge updates as soon as the user fills in values in the modal.
+ const [, setEnvTick] = useState(0);
+ useEffect(
+ () => subscribeEnvVarsChanged(() => setEnvTick((t) => t + 1)),
+ [],
+ );
+
+ const alias = server.alias || server.server_name || "";
+ const name = server.server_name || alias || server.server_id;
+ // Logo is sourced exclusively from the admin-set `mcp_info.logo_url`.
+ // We deliberately do not guess from the server name/alias — that's brittle
+ // (renames break the icon, slug arithmetic 404s on unknown brands). The
+ // create/edit form auto-fills `logo_url` from discovery `icon_url` and
+ // from a host-keyed lookup so the common cases don't require manual work.
+ const candidateLogo = server.mcp_info?.logo_url ?? undefined;
+ const [failedLogoUrl, setFailedLogoUrl] = useState(null);
+ const logoUrl =
+ candidateLogo && failedLogoUrl !== candidateLogo ? candidateLogo : undefined;
+ const transport = server.transport || "http";
+ const displayTransport =
+ server.spec_path && transport !== "stdio" ? "openapi" : transport;
+ const authType = server.auth_type || "none";
+ const status = server.status || "unknown";
+ const healthTone = HEALTH_TONE[status] ?? HEALTH_TONE.unknown;
+ const isPublic = server.available_on_public_internet;
+ const accessGroups = (server.mcp_access_groups ?? []).filter(
+ (g): g is string => typeof g === "string",
+ );
+
+ const envDefs = alias ? getEnvVarDefinitions(alias) : [];
+ const perUserCount = envDefs.filter((d) => d.scope === "per_user").length;
+ const missingUserFields = alias ? getMissingUserFields(alias, userID) : [];
+ const needsAttention = perUserCount > 0 && missingUserFields.length > 0;
+
+ const cardClass = needsAttention
+ ? "border-2 border-red-300 bg-red-50/40 hover:border-red-400 hover:shadow-md"
+ : "border border-gray-200 bg-white hover:border-gray-300 hover:shadow-md";
+
+ const url = server.url || "";
+ const { maskedUrl } = url ? getMaskedAndFullUrl(url) : { maskedUrl: "" };
+
+ // Transport-adapted identifier shown under the title. Every transport has
+ // something useful here, which keeps the tag row vertically aligned across
+ // cards in the grid (stdio cards no longer "snap up" because they lack a URL).
+ let subtitle = "";
+ let subtitleTooltip = "";
+ if (transport === "stdio") {
+ const parts = [server.command, ...(server.args ?? [])]
+ .filter((p): p is string => typeof p === "string" && p.length > 0);
+ subtitle = parts.join(" ");
+ subtitleTooltip = subtitle;
+ } else if (server.spec_path) {
+ subtitle = server.spec_path;
+ subtitleTooltip = server.spec_path;
+ } else if (url) {
+ subtitle = maskedUrl;
+ subtitleTooltip = url;
+ }
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onClick();
+ }
+ };
+
+ const menuItems: MenuProps["items"] = [];
+ if (onRecheckHealth) {
+ menuItems.push({
+ key: "test-connection",
+ label: "Test Connection",
+ icon:
+ );
+};
+
+interface HealthChipProps {
+ status: string;
+ isLoadingHealth?: boolean;
+ isRechecking?: boolean;
+ onRecheck?: () => void;
+ lastCheck?: string | null;
+ error?: string | null;
+ dotClass: string;
+}
+
+const HealthChip: FC
+
+ );
+ return (
+ Health: {status}
+ {lastCheck && (
+
+ Last check: {new Date(lastCheck).toLocaleString()}
+
+ )}
+ {error && (
+
+
+ )}
+ {!lastCheck && !error && (
+ Error
+ {error}
+ No health data
+ )}
+ {onRecheck && Click to recheck
}
+
+ BYOK credential
+
+ );
+ }
+ return (
+
+
+
+
+ BYOK credential
+ {onConnect ? (
+
+ ) : (
+ —
+ )}
+
+ );
+};
+
+export default MCPServerCard;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
index fd366b7e8f1..8474fda3471 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
@@ -19,7 +19,11 @@ import {
EnvVarDefinition,
} from "./mock/mockMcpEnvVars";
import { isAdminRole } from "@/utils/roles";
-import { validateMCPServerUrl, validateMCPServerName } from "./utils";
+import {
+ validateMCPServerUrl,
+ validateMCPServerName,
+ guessLogoFromUrl,
+} from "./utils";
import NotificationsManager from "../molecules/notifications_manager";
import { useMcpOAuthFlow } from "@/hooks/useMcpOAuthFlow";
import { useTestMCPConnection } from "@/hooks/useTestMCPConnection";
@@ -258,6 +262,12 @@ const CreateMCPServer: React.FC
+
Cancel
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
index 1f8f7f68d33..57bcd7ffac9 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx
@@ -11,6 +11,7 @@ import { getMaskedAndFullUrl } from "./utils";
import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
import { CheckIcon, CopyIcon } from "lucide-react";
import { Button as AntdButton } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
interface MCPServerViewProps {
mcpServer: MCPServer;
@@ -21,6 +22,7 @@ interface MCPServerViewProps {
userRole: string | null;
userID: string | null;
availableAccessGroups: string[];
+ onDelete?: (serverId: string) => void;
}
export const MCPServerView: React.FC = ({
@@ -32,11 +34,18 @@ export const MCPServerView: React.FC = ({
userRole,
userID,
availableAccessGroups,
+ onDelete,
}) => {
const [editing, setEditing] = useState(isEditing);
const [showFullUrl, setShowFullUrl] = useState(false);
const [copiedStates, setCopiedStates] = useState>({});
- const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+ // When the caller opens this view directly into edit mode, jump to the
+ // Settings tab (index 2) so the edit form and the Danger zone are visible
+ // without an extra click. Non-admins don't see the Settings tab, so they
+ // stay on Overview.
+ const [selectedTabIndex, setSelectedTabIndex] = useState(
+ isEditing && isProxyAdmin ? 2 : 0,
+ );
const handleSuccess = (updated: MCPServer) => {
setEditing(false);
@@ -77,40 +86,53 @@ export const MCPServerView: React.FC = ({
- = {
+ unhealthy: 0,
+ unknown: 1,
+ healthy: 2,
+};
+
+const compareServers = (
+ a: MCPServer,
+ b: MCPServer,
+ sort: SortKey,
+): number => {
+ switch (sort) {
+ case "name_asc": {
+ const nameA = (a.server_name || a.alias || a.server_id).toLowerCase();
+ const nameB = (b.server_name || b.alias || b.server_id).toLowerCase();
+ return nameA.localeCompare(nameB);
+ }
+ case "updated_desc": {
+ const ta = a.updated_at ? new Date(a.updated_at).getTime() : 0;
+ const tb = b.updated_at ? new Date(b.updated_at).getTime() : 0;
+ return tb - ta;
+ }
+ case "health": {
+ const ra = HEALTH_RANK[a.status ?? "unknown"] ?? 1;
+ const rb = HEALTH_RANK[b.status ?? "unknown"] ?? 1;
+ if (ra !== rb) return ra - rb;
+ const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
+ const tb = b.created_at ? new Date(b.created_at).getTime() : 0;
+ return tb - ta;
+ }
+ case "created_desc":
+ default: {
+ const ta = a.created_at ? new Date(a.created_at).getTime() : 0;
+ const tb = b.created_at ? new Date(b.created_at).getTime() : 0;
+ return tb - ta;
+ }
+ }
+};
+
const { Text: AntdText, Title: AntdTitle } = Typography;
const EDIT_OAUTH_UI_STATE_KEY = "litellm-mcp-oauth-edit-state";
@@ -69,6 +116,8 @@ const MCPServers: React.FC = ({ accessToken, userRole, userID })
// PROTOTYPE: state for the per-user fields demo
const [fillFieldsServer, setFillFieldsServer] = useState(null);
const [mockDemoServer, setMockDemoServer] = useState(null);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [sortKey, setSortKey] = useState("created_desc");
const isInternalUser = userRole === "Internal User";
// PROTOTYPE: deep-link via ?fill_fields= (used by the mock Claude
@@ -185,29 +234,25 @@ const MCPServers: React.FC = ({ accessToken, userRole, userID })
filterServers(selectedTeam, selectedMcpAccessGroup);
}, [serversWithHealth, selectedTeam, selectedMcpAccessGroup, filterServers]);
- const columns = React.useMemo(
- () =>
- mcpServerColumns(
- userRole ?? "",
- (serverId: string) => {
- setSelectedServerId(serverId);
- setEditServer(false);
- },
- (serverId: string) => {
- setSelectedServerId(serverId);
- setEditServer(true);
- },
- handleDelete,
- isLoadingHealth,
- (server: MCPServer) => setByokModalServer(server),
- recheckServerHealth,
- recheckingServerIds,
- userID ?? "",
- (server: MCPServer) => setFillFieldsServer(server),
- (server: MCPServer) => setMockDemoServer(server),
- ),
- [userRole, isLoadingHealth, recheckServerHealth, recheckingServerIds, userID],
- );
+ // Search + sort layer applied on top of the team/access-group filters.
+ const displayedServers = useMemo(() => {
+ const q = searchQuery.trim().toLowerCase();
+ const matches = q
+ ? filteredServers.filter((s) => {
+ const name = (s.server_name || "").toLowerCase();
+ const alias = (s.alias || "").toLowerCase();
+ const url = (s.url || "").toLowerCase();
+ const id = s.server_id.toLowerCase();
+ return (
+ name.includes(q) ||
+ alias.includes(q) ||
+ url.includes(q) ||
+ id.includes(q)
+ );
+ })
+ : filteredServers;
+ return [...matches].sort((a, b) => compareServers(a, b, sortKey));
+ }, [filteredServers, searchQuery, sortKey]);
function handleDelete(server_id: string) {
setServerToDelete(server_id);
@@ -402,6 +447,7 @@ const MCPServers: React.FC = ({ accessToken, userRole, userID })
userID={userID}
userRole={userRole}
availableAccessGroups={uniqueMcpAccessGroups}
+ onDelete={handleDelete}
/>
) : (
-
- {mcpServer.server_name || mcpServer.alias || "Unnamed Server"}
- {mcpServer.description}
- )}
{/* TODO: magic number for index */}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
index eb5181c6c15..a2d2b93e80a 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -1,8 +1,8 @@
import { isAdminRole } from "@/utils/roles";
-import { QuestionCircleOutlined } from "@ant-design/icons";
+import { QuestionCircleOutlined, SearchOutlined } from "@ant-design/icons";
import { Button, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
import NewBadge from "../common_components/NewBadge";
-import { Descriptions, Modal, Select, Tooltip, Typography } from "antd";
+import { Descriptions, Empty, Input, Modal, Select, Spin, Tooltip, Typography } from "antd";
import React, { useEffect, useState, useMemo, useCallback } from "react";
import { useMCPServers } from "../../app/(dashboard)/hooks/mcpServers/useMCPServers";
import { useMCPServerHealth } from "../../app/(dashboard)/hooks/mcpServers/useMCPServerHealth";
@@ -10,12 +10,11 @@ import NotificationsManager from "../molecules/notifications_manager";
import { deleteMCPServer } from "../networking";
import { MCPSubmissionsTab } from "./MCPSubmissionsTab";
import { MCPToolsetsTab } from "./MCPToolsetsTab";
-import { DataTable } from "../view_logs/table";
import CreateMCPServer from "./create_mcp_server";
import MCPConnect from "./mcp_connect";
-import { mcpServerColumns } from "./mcp_server_columns";
+import MCPServerCard from "./MCPServerCard";
import { MCPServerView } from "./mcp_server_view";
-import { DiscoverableMCPServer, MCPServer, MCPServerProps, Team } from "./types";
+import type { DiscoverableMCPServer, MCPServer, MCPServerProps, Team } from "./types";
import MCPSemanticFilterSettings from "../Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings";
import MCPNetworkSettings from "./MCPNetworkSettings";
import MCPDiscovery from "./mcp_discovery";
@@ -24,6 +23,54 @@ import { getSecureItem } from "@/utils/secureStorage";
import FillUserFieldsModal from "./mock/FillUserFieldsModal";
import MockClaudeCodeModal from "./mock/MockClaudeCodeModal";
+type SortKey = "created_desc" | "updated_desc" | "name_asc" | "health";
+
+const SORT_OPTIONS: { value: SortKey; label: string }[] = [
+ { value: "created_desc", label: "Recently created" },
+ { value: "updated_desc", label: "Recently updated" },
+ { value: "name_asc", label: "Name (A→Z)" },
+ { value: "health", label: "Health (unhealthy first)" },
+];
+
+const HEALTH_RANK: Record
+
-
+ {mcpServer.description}
+ )}
+
+ {isProxyAdmin && onDelete && (
+
+ {mcpServer.server_name || mcpServer.alias || "Unnamed Server"}
+
+
+ {mcpServer.server_id}
+
+ {mcpServer.description && (
+
- {mcpServer.server_id}
-
- {mcpServer.description && (
-
@@ -446,17 +492,82 @@ const MCPServers: React.FC = ({ accessToken, userRole, userID })
- }
- getRowCanExpand={() => false}
- isLoading={isLoadingServers}
- noDataMessage="No MCP servers configured. Click '+ Add New MCP Server' to get started."
- loadingMessage="Loading MCP servers..."
- enableSorting={true}
+
)}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx
index a35b56b47bd..bb3de9e760e 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/utils.test.tsx
@@ -5,6 +5,7 @@ import {
getMaskedAndFullUrl,
validateMCPServerUrl,
validateMCPServerName,
+ guessLogoFromUrl,
} from "./utils";
describe("extractMCPToken", () => {
@@ -73,3 +74,56 @@ describe("validateMCPServerName", () => {
await expect(validateMCPServerName("my server")).rejects.toBeDefined();
});
});
+
+describe("guessLogoFromUrl", () => {
+ it("should match an exact host against the registry", () => {
+ expect(guessLogoFromUrl("https://github.com/org/repo")).toBe(
+ "/ui/assets/logos/github.svg",
+ );
+ expect(guessLogoFromUrl("https://figma.com")).toBe(
+ "/ui/assets/logos/figma.svg",
+ );
+ });
+
+ it("should match wildcard subdomains", () => {
+ expect(guessLogoFromUrl("https://api.github.com/user")).toBe(
+ "/ui/assets/logos/github.svg",
+ );
+ expect(guessLogoFromUrl("https://acme.atlassian.net/jira/api")).toBe(
+ "/ui/assets/logos/jira.svg",
+ );
+ expect(guessLogoFromUrl("https://api.linear.app/graphql")).toBe(
+ "/ui/assets/logos/linear.svg",
+ );
+ expect(guessLogoFromUrl("https://shop.myshopify.com")).toBe(
+ "/ui/assets/logos/shopify.svg",
+ );
+ });
+
+ it("should be case-insensitive on the host", () => {
+ expect(guessLogoFromUrl("https://API.GitHub.com")).toBe(
+ "/ui/assets/logos/github.svg",
+ );
+ });
+
+ it("should return undefined for unknown hosts", () => {
+ expect(
+ guessLogoFromUrl("https://internal-tools.example.com"),
+ ).toBeUndefined();
+ expect(guessLogoFromUrl("https://localhost:4000/mcp")).toBeUndefined();
+ });
+
+ it("should return undefined for unparseable URLs and empty input", () => {
+ expect(guessLogoFromUrl(undefined)).toBeUndefined();
+ expect(guessLogoFromUrl(null)).toBeUndefined();
+ expect(guessLogoFromUrl("")).toBeUndefined();
+ expect(guessLogoFromUrl("not a url")).toBeUndefined();
+ });
+
+ it("should not match a wildcard pattern against an unrelated host", () => {
+ // `*.github.com` must not match `github.com.evil.example`.
+ expect(
+ guessLogoFromUrl("https://github.com.evil.example/path"),
+ ).toBeUndefined();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx b/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx
index 44a06405615..ad385c86d04 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/utils.tsx
@@ -51,3 +51,166 @@ export const validateMCPServerName = (value: string) => {
? Promise.reject("Cannot contain '-' (hyphen) or spaces. Please use '_' (underscore) instead.")
: Promise.resolve();
};
+
+// Local SVG asset directory used for the curated logo set. Kept as a
+// constant so MCPLogoSelector and any URL-based guesser stay in sync.
+export const LOGOS_DIR = "/ui/assets/logos/";
+
+export interface WellKnownLogo {
+ /** Display name shown in tooltips / pickers. */
+ name: string;
+ /** Local SVG asset URL (served from /ui/assets/logos/). */
+ url: string;
+ /**
+ * Hostnames whose URL should pre-select this logo at create/edit time.
+ * Each entry is matched as an exact host or a `*.suffix` wildcard. The
+ * list is small and explicit on purpose — no slug arithmetic, no
+ * third-party CDN lookups, no surprise 404s. Add a host here when a
+ * brand reliably exposes its API on it.
+ */
+ hosts?: ReadonlyArray
+ }
+ placeholder="Search by name, alias, URL, or ID"
+ value={searchQuery}
+ onChange={(e) => setSearchQuery(e.target.value)}
+ style={{ maxWidth: 320 }}
/>
+
+
+
+ Sort
+
+
+
+
+ {displayedServers.length} of {filteredServers.length} servers
+
+
+ {isLoadingServers ? (
+
+
+ ) : displayedServers.length === 0 ? (
+
+
+ ) : (
+
+ {displayedServers.map((server) => (
+ {
+ setSelectedServerId(server.server_id);
+ setEditServer(true);
+ }}
+ onRecheckHealth={
+ recheckServerHealth
+ ? () => recheckServerHealth(server.server_id)
+ : undefined
+ }
+ onByokConnect={
+ server.is_byok ? () => setByokModalServer(server) : undefined
+ }
+ onOpenFillFields={() => setFillFieldsServer(server)}
+ onDelete={
+ isAdminRole(userRole)
+ ? () => handleDelete(server.server_id)
+ : undefined
+ }
+ />
+ ))}
+
+ )}