Merge pull request #22005 from BerriAI/litellm_mcp_server_ui_fix

Fix: Transport Type for OpenAPI Spec on UI

litellm/proxy/_experimental/mcp_server/mcp_server_manager.py

@@ -2604,6 +2604,7 @@ class MCPServerManager:
                 server.mcp_info.get("description") if server.mcp_info else None
             ),
             url=server.url,
+            spec_path=server.spec_path,
             transport=server.transport,
             auth_type=server.auth_type,
             created_at=datetime.now(),

ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx

@@ -47,7 +47,13 @@ export const mcpServerColumns = (
   {
     accessorKey: "transport",
     header: "Transport",
-    cell: ({ getValue }) => <span>{((getValue() as string) || "http").toUpperCase()}</span>,
+    cell: ({ row }) => {
+      const transport = row.original.transport || "http";
+      const specPath = row.original.spec_path;
+      // If server has spec_path, display as "OPENAPI" instead of the raw transport type
+      const displayTransport = specPath && transport !== "stdio" ? "OPENAPI" : transport;
+      return <span>{displayTransport.toUpperCase()}</span>;
+    },
   },
   {
     accessorKey: "auth_type",

ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx

@@ -159,9 +159,9 @@ const MCPServerEdit: React.FC<MCPServerEditProps> = ({
   }, [mcpServer.env]);
 
 
-  // If server has spec_path and no url, show it as "openapi" transport in the UI
+  // If server has spec_path, show it as "openapi" transport in the UI
   const effectiveTransport = React.useMemo(() => {
-    if (mcpServer.spec_path && !mcpServer.url && mcpServer.transport !== "stdio") {
+    if (mcpServer.spec_path && mcpServer.transport !== "stdio") {
       return TRANSPORT.OPENAPI;
     }
     return mcpServer.transport;

ui/litellm-dashboard/src/components/mcp_tools/mcp_server_view.tsx

@@ -131,7 +131,7 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
               <Card>
                 <Text>Transport</Text>
                 <div className="mt-2">
-                  <Title>{handleTransport(mcpServer.transport ?? undefined)}</Title>
+                  <Title>{handleTransport(mcpServer.transport ?? undefined, mcpServer.spec_path ?? undefined).toUpperCase()}</Title>
                 </div>
               </Card>
 
@@ -221,7 +221,7 @@ export const MCPServerView: React.FC<MCPServerViewProps> = ({
                   </div>
                   <div>
                     <Text className="font-medium">Transport</Text>
-                    <div>{handleTransport(mcpServer.transport)}</div>
+                    <div>{handleTransport(mcpServer.transport, mcpServer.spec_path).toUpperCase()}</div>
                   </div>
                   <div>
                     <Text className="font-medium">Extra Headers</Text>

ui/litellm-dashboard/src/components/mcp_tools/types.tsx

@@ -25,11 +25,16 @@ export const TRANSPORT = {
   OPENAPI: "openapi",
 };
 
-export const handleTransport = (transport?: string | null): string => {
+export const handleTransport = (transport?: string | null, specPath?: string | null): string => {
   if (transport === null || transport === undefined) {
     return TRANSPORT.SSE;
   }
 
+  // If server has spec_path, display as "openapi" instead of the raw transport type
+  if (specPath && transport !== TRANSPORT.STDIO) {
+    return TRANSPORT.OPENAPI;
+  }
+
   return transport;
 };