-
-
Server Name
-
{mcpServer.alias}
+
+
+
Server Name
+
{mcpServer.alias}
+
+
+
Description
+
{mcpServer.description}
+
+
+
URL
+
+ {renderUrlWithToggle(mcpServer.url, showFullUrl)}
+ {hasToken && (
+
+ )}
+
+
+
Transport
+
{handleTransport(mcpServer.transport)}
+
+
+
Auth Type
+
{handleAuth(mcpServer.auth_type)}
+
+
+
Spec Version
+
{mcpServer.spec_version}
+
+
+
Access Groups
-
Description
-
{mcpServer.description}
+ {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
+ )}
-
-
URL
-
- {renderUrlWithToggle(mcpServer.url, showFullUrl)}
- {hasToken && (
-
- )}
-
-
-
-
Transport
-
{handleTransport(mcpServer.transport)}
-
-
-
Auth Type
-
{handleAuth(mcpServer.auth_type)}
-
-
-
Spec Version
-
{mcpServer.spec_version}
-
-
-
- {/* Cost Configuration Section */}
-
+
)}
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 8835ce12b3..5b89c8fc44 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -1,13 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
-
import {
Modal,
- Tooltip,
message,
Select,
- Space,
- Typography
} from "antd";
import {
TabPanel,
@@ -16,8 +12,6 @@ import {
TabList,
Tab,
} from "@tremor/react";
-import { LinkIcon } from "lucide-react";
-
import {
Grid,
Col,
@@ -26,7 +20,6 @@ import {
} from "@tremor/react";
import { DataTable } from "../view_logs/table";
import { mcpServerColumns } from "./mcp_server_columns";
-
import {
deleteMCPServer,
fetchMCPServers,
@@ -35,8 +28,6 @@ import {
MCPServer,
MCPServerProps,
Team,
- handleAuth,
- handleTransport,
} from "./types";
import { isAdminRole } from "@/utils/roles";
import { MCPServerView } from "./mcp_server_view";
@@ -45,21 +36,18 @@ import MCPConnect from "./mcp_connect";
const { Option } = Select;
-interface DeleteModalProps {
+const DeleteModal: React.FC<{
isModalOpen: boolean;
title: string;
confirmDelete: () => void;
cancelDelete: () => void;
-}
-
-const DeleteModal: React.FC
= ({
+}> = ({
isModalOpen,
title,
confirmDelete,
cancelDelete,
}) => {
if (!isModalOpen) return null;
-
return (
= ({
userRole,
userID,
}) => {
- // Query to fetch MCP tools
const {
data: mcpServers,
isLoading: isLoadingServers,
@@ -96,26 +83,21 @@ const MCPServers: React.FC = ({
enabled: !!accessToken,
}) as { data: MCPServer[]; isLoading: boolean; refetch: () => void };
- const createMCPServer = (newMcpServer: any) => {
- refetch();
- };
-
// state
const [serverIdToDelete, setServerToDelete] = useState(null);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedServerId, setSelectedServerId] = useState(null);
const [editServer, setEditServer] = useState(false);
const [selectedTeam, setSelectedTeam] = useState("all");
+ const [selectedMcpAccessGroup, setSelectedMcpAccessGroup] = useState("all");
const [filteredServers, setFilteredServers] = useState([]);
- const [currentTeam, setCurrentTeam] = useState("all");
- const [modelViewMode, setModelViewMode] = useState("all");
+
// Get unique teams from all servers
const uniqueTeams = React.useMemo(() => {
if (!mcpServers) return [];
const teamsSet = new Set();
const uniqueTeamsArray: Team[] = [];
-
mcpServers.forEach((server: MCPServer) => {
if (server.teams) {
server.teams.forEach((team: Team) => {
@@ -130,48 +112,63 @@ const MCPServers: React.FC = ({
return uniqueTeamsArray;
}, [mcpServers]);
+ // Get unique MCP access groups from all servers
+ const uniqueMcpAccessGroups = React.useMemo(() => {
+ if (!mcpServers) return [];
+ return Array.from(new Set(
+ mcpServers.flatMap(server => server.mcp_access_groups)
+ ));
+ }, [mcpServers]);
+
// Handle team filter change
const handleTeamChange = (teamId: string) => {
setSelectedTeam(teamId);
- setCurrentTeam(teamId);
-
- if (!mcpServers) return;
-
- if (teamId === "all") {
- setFilteredServers(mcpServers);
- } else if (teamId === "personal") {
- // For now, show empty list for personal servers
- setFilteredServers([]);
- } else {
- const filtered = mcpServers.filter(server =>
- server.teams?.some(team => team.team_id === teamId)
- );
- setFilteredServers(filtered);
- }
+ filterServers(teamId, selectedMcpAccessGroup);
};
- React.useEffect(() => {
- if (mcpServers) {
- // Filter servers based on current team selection
- if (currentTeam === "all") {
- setFilteredServers(mcpServers);
- } else if (currentTeam === "personal") {
- // For now, show empty list for personal servers
- setFilteredServers([]);
- } else {
- const filtered = mcpServers.filter(server =>
- server.teams?.some(team => team.team_id === currentTeam)
- );
- setFilteredServers(filtered);
- }
+ // Handle MCP access group filter change
+ const handleMcpAccessGroupChange = (group: string) => {
+ setSelectedMcpAccessGroup(group);
+ filterServers(selectedTeam, group);
+ };
+
+ // Filtering logic for both team and access group
+ const filterServers = (teamId: string, group: string) => {
+ if (!mcpServers) return setFilteredServers([]);
+ let filtered = mcpServers;
+ if (teamId === "personal") {
+ setFilteredServers([]);
+ return;
}
- }, [mcpServers, currentTeam]);
+ if (teamId !== "all") {
+ filtered = filtered.filter(server =>
+ server.teams?.some(team => team.team_id === teamId)
+ );
+ }
+ if (group !== "all") {
+ filtered = filtered.filter(server =>
+ server.mcp_access_groups?.some((g: any) =>
+ typeof g === 'string' ? g === group : g && g.name === group
+ )
+ );
+ }
+ setFilteredServers(filtered);
+ };
+
+ // Initial and effect-based filtering
+ useEffect(() => {
+ filterServers(selectedTeam, selectedMcpAccessGroup);
+ // eslint-disable-next-line
+ }, [mcpServers]);
const columns = React.useMemo(
() =>
mcpServerColumns(
userRole ?? "",
- (serverId: string) => setSelectedServerId(serverId),
+ (serverId: string) => {
+ setSelectedServerId(serverId);
+ setEditServer(false);
+ },
(serverId: string) => {
setSelectedServerId(serverId);
setEditServer(true);
@@ -182,7 +179,6 @@ const MCPServers: React.FC = ({
);
function handleDelete(server_id: string) {
- // Set the team to delete and open the confirmation modal
setServerToDelete(server_id);
setIsDeleteModalOpen(true);
}
@@ -191,31 +187,22 @@ const MCPServers: React.FC = ({
if (serverIdToDelete == null || accessToken == null) {
return;
}
-
try {
await deleteMCPServer(accessToken, serverIdToDelete);
- // Successfully completed the deletion. Update the state to trigger a rerender.
message.success("Deleted MCP Server successfully");
refetch();
} catch (error) {
console.error("Error deleting the mcp server:", error);
- // Handle any error situations, such as displaying an error message to the user.
}
-
- // Close the confirmation modal and reset the serverToDelete
setIsDeleteModalOpen(false);
setServerToDelete(null);
};
const cancelDelete = () => {
- // Close the confirmation modal and reset the serverToDelete
setIsDeleteModalOpen(false);
setServerToDelete(null);
};
- // Check if user is internal or admin
- const canAccessMCPServers = isAdminRole(userRole!) || (userRole && userRole.includes('internal'));
-
if (!accessToken || !userRole || !userID) {
return (
@@ -228,7 +215,7 @@ const MCPServers: React.FC = ({
selectedServerId ? (
server.server_id === selectedServerId
) || {
server_id: '',
@@ -267,7 +254,7 @@ const MCPServers: React.FC = ({
)}
@@ -277,7 +264,7 @@ const MCPServers: React.FC = ({
Current Team:
+
Access Group:
+