+
+
+
+
{mcpServer.alias}
+ {mcpServer.server_id}
+
+
+
+ {/* TODO: magic number for index */}
+
+
+ {[
+ Overview,
+ MCP Tools,
+ ...(isProxyAdmin ? [Settings] : []),
+ ]}
+
+
+
+ {/* Overview Panel */}
+
+
+
+ Transport
+
+
{handleTransport(mcpServer.transport)}
+
+
+
+
+ Auth Type
+
+ {handleAuth(mcpServer.auth_type)}
+
+
+
+
+ Host Url
+ {mcpServer.url}
+
+
+
+
+ {/* Tool Panel */}
+
+
+
+
+ {/* Settings Panel */}
+
+
+
+
Editing MCP Servers coming soon!
+
+
+
+
+
+
+ );
+};
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
new file mode 100644
index 000000000000..6b5a66c11692
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -0,0 +1,449 @@
+import React, { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+
+import {
+ Modal,
+ Tooltip,
+ Form,
+ Select,
+ message,
+ Button as AntdButton,
+} from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+ Icon,
+ Button,
+ Grid,
+ Col,
+ Title,
+ TextInput,
+} from "@tremor/react";
+
+import {
+ createMCPServer,
+ deleteMCPServer,
+ fetchMCPServers,
+} from "../networking";
+import {
+ MCPServer,
+ MCPServerProps,
+ handleAuth,
+ handleTransport,
+} from "./types";
+import { isAdminRole } from "@/utils/roles";
+import { MCPServerView } from "./mcp_server_view";
+
+const displayFriendlyId = (id: string) => {
+ return `${id.slice(0, 7)}...`;
+};
+
+interface CreateMCPServerProps {
+ userRole: string;
+ accessToken: string | null;
+ onCreateSuccess: (newMcpServer: MCPServer) => void;
+}
+
+const CreateMCPServer: React.FC