-
-
-
{mcpServer.server_name}
-
:
}
- onClick={() => copyToClipboard(mcpServer.server_name, "mcp-server_name")}
- className={`left-2 z-10 transition-all duration-200 ${copiedStates["mcp-server_name"]
- ? "text-green-600 bg-green-50 border-green-200"
- : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
- }`}
- />
- {mcpServer.alias && (
- <>
-
Alias:
-
{mcpServer.alias}
-
:
}
- onClick={() => copyToClipboard(mcpServer.alias, "mcp-alias")}
- className={`left-2 z-10 transition-all duration-200 ${copiedStates["mcp-alias"]
- ? "text-green-600 bg-green-50 border-green-200"
- : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
- }`}
- />
-
- )}
-
-
-
{mcpServer.server_id}
-
:
}
- onClick={() => copyToClipboard(mcpServer.server_id, "mcp-server-id")}
- className={`left-2 z-10 transition-all duration-200 ${copiedStates["mcp-server-id"]
- ? "text-green-600 bg-green-50 border-green-200"
- : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
- }`}
- />
-
+
+
+
+
{mcpServer.server_name || mcpServer.alias || "Unnamed Server"}
+
:
}
+ onClick={() => copyToClipboard(mcpServer.server_name || mcpServer.alias, "mcp-server_name")}
+ className={`transition-all duration-200 ${copiedStates["mcp-server_name"]
+ ? "text-green-600 bg-green-50 border-green-200"
+ : "text-gray-400 hover:text-gray-600 hover:bg-gray-100"
+ }`}
+ />
+ {mcpServer.alias && mcpServer.server_name && mcpServer.alias !== mcpServer.server_name && (
+
+ {mcpServer.alias}
+
+ )}
+
+
{mcpServer.server_id}
+
:
}
+ onClick={() => copyToClipboard(mcpServer.server_id, "mcp-server-id")}
+ className={`transition-all duration-200 ${copiedStates["mcp-server-id"]
+ ? "text-green-600 bg-green-50 border-green-200"
+ : "text-gray-300 hover:text-gray-500 hover:bg-gray-50"
+ }`}
+ />
+
+ {mcpServer.description && (
+
{mcpServer.description}
+ )}
{/* TODO: magic number for index */}
@@ -127,38 +126,40 @@ export const MCPServerView: React.FC
= ({
{/* Overview Panel */}
-
-
- Transport
-
-
{handleTransport(mcpServer.transport ?? undefined, mcpServer.spec_path ?? undefined).toUpperCase()}
+
+
+ Transport
+
+ {getTransportBadge(handleTransport(mcpServer.transport ?? undefined, mcpServer.spec_path ?? undefined))}
-
- Auth Type
-
-
{handleAuth(mcpServer.auth_type ?? undefined)}
+
+ Authentication
+
+ {getAuthBadge(handleAuth(mcpServer.auth_type ?? undefined))}
-
- Host Url
-
-
+
+ Host URL
+
+
{renderUrlWithToggle(mcpServer.url, showFullUrl)}
{hasToken && (
-
-
- Cost Configuration
-
+
+ Cost Configuration
+
+
+
@@ -195,118 +196,114 @@ export const MCPServerView: React.FC = ({
availableAccessGroups={availableAccessGroups}
/>
) : (
-
-
-
Server Name
-
{mcpServer.server_name}
+
+
+
Server Name
+
{mcpServer.server_name || —}
-
-
Alias
-
{mcpServer.alias}
+
+
Alias
+
{mcpServer.alias || —}
-
-
Description
-
{mcpServer.description}
+
+
Description
+
{mcpServer.description || —}
-
-
URL
-
+
+
URL
+
{renderUrlWithToggle(mcpServer.url, showFullUrl)}
{hasToken && (
-
-
-
Transport
-
{handleTransport(mcpServer.transport, mcpServer.spec_path).toUpperCase()}
+
+
Transport
+
{getTransportBadge(handleTransport(mcpServer.transport, mcpServer.spec_path))}
-
-
Extra Headers
-
{mcpServer.extra_headers?.join(", ")}
+
+
Authentication
+
{getAuthBadge(handleAuth(mcpServer.auth_type))}
-
-
Auth Type
-
{handleAuth(mcpServer.auth_type)}
+
+
Extra Headers
+
+ {mcpServer.extra_headers && mcpServer.extra_headers.length > 0
+ ? mcpServer.extra_headers.join(", ")
+ : —}
+
-
-
Allow All LiteLLM Keys
-
+
+
Allow All Keys
+
{mcpServer.allow_all_keys ? (
-
+
+
Enabled
) : (
-
+
Disabled
)}
- {mcpServer.allow_all_keys && (
-
- All keys can access this MCP server
-
- )}
-
-
Network Access
-
+
+
Network Access
+
{mcpServer.available_on_public_internet ? (
-
- All networks
+
+
+ Public
) : (
-
+
+
Internal only
)}
- {!mcpServer.available_on_public_internet && (
-
- Restricted to internal network
-
- )}
-
-
Access Groups
-
+
+
Access Groups
+
{mcpServer.mcp_access_groups && mcpServer.mcp_access_groups.length > 0 ? (
-
+
{mcpServer.mcp_access_groups.map((group: any, index: number) => (
-
+
{typeof group === "string" ? group : group?.name ?? ""}
))}
) : (
-
No access groups defined
+
—
)}
-
-
Allowed Tools
-
+
+
Allowed Tools
+
{mcpServer.allowed_tools && mcpServer.allowed_tools.length > 0 ? (
-
+
{mcpServer.allowed_tools.map((tool: string, index: number) => (
-
+
{tool}
))}
) : (
-
All tools enabled
+
All tools enabled
)}
-
)}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx
index 173b623a2ff..8385fc7ac70 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.test.tsx
@@ -305,8 +305,8 @@ describe("MCPServers", () => {
expect(screen.getByText("Team B Server")).toBeInTheDocument();
expect(screen.getByText("Team A Server 2")).toBeInTheDocument();
- // Find the team select dropdown by looking for the "Current Team:" label
- const teamLabel = screen.getByText("Current Team:");
+ // Find the team select dropdown by looking for the "Team" label
+ const teamLabel = screen.getByText("Team");
const teamSelectContainer = teamLabel.closest("div")?.querySelector(".ant-select");
expect(teamSelectContainer).toBeTruthy();
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 f48649d6653..75e5bc8d453 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -48,17 +48,6 @@ const MCPServers: React.FC
= ({ accessToken, userRole, userID })
});
}, [mcpServers, healthStatuses]);
- // Log allowed_tools from fetched servers
- React.useEffect(() => {
- if (mcpServers) {
- console.log("MCP Servers fetched:", mcpServers);
- mcpServers.forEach((server) => {
- console.log(`Server: ${server.server_name || server.server_id}`);
- console.log(` allowed_tools:`, server.allowed_tools);
- });
- }
- }, [mcpServers]);
-
// state
const [serverIdToDelete, setServerToDelete] = useState(null);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -257,34 +246,28 @@ const MCPServers: React.FC = ({ accessToken, userRole, userID })
confirmLoading={isDeletingServer}
>
-
Are you sure you want to delete this MCP Server? This action cannot be undone.
+
This action is permanent and cannot be undone. All associated configurations will be removed.
{serverToDelete && (
-
-
- Server Information
-
-
+
+
{serverToDelete.server_name && (
- Server Name}>
- {serverToDelete.server_name}
+ Name}>
+ {serverToDelete.server_name}
)}
- {serverToDelete.alias && (
- Alias}>
- {serverToDelete.alias}
-
- )}
- Server ID}>
-
+ ID}>
+
{serverToDelete.server_id}
- URL}>
-
- {serverToDelete.url}
-
-
+ {serverToDelete.url && (
+ URL}>
+
+ {serverToDelete.url}
+
+
+ )}
+
+
+
MCP Servers
+ {filteredServers.length > 0 && (
+
+ {filteredServers.length}
+
+ )}
+
+
Configure and manage your MCP servers
+
+ {isAdminRole(userRole) && (
+
+ )}
+
-
-
-
Current Team:
-