From 8759d6086b4825bfd0d4c57a1c0b9a0951e52940 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaan@berri.ai>
Date: Sat, 25 Apr 2026 16:02:02 -0700
Subject: [PATCH] feat(mcp): show OAuth2 Connect/Disconnect in catalog
 Credential column

---
 .../mcp_tools/mcp_server_columns.tsx          | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index ea5ccf1c847..dc447a78d3f 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { ColumnDef } from "@tanstack/react-table";
-import { MCPServer } from "./types";
+import { AUTH_TYPE, MCPServer } from "./types";
 import { Icon } from "@tremor/react";
 import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
 import { getMaskedAndFullUrl } from "./utils";
 import { Tooltip } from "antd";
 import { CheckOutlined } from "@ant-design/icons";
+import OAuth2ConnectButton from "./OAuth2ConnectButton";
 
 const HealthStatusBadge: React.FC<{
   server: MCPServer;
@@ -92,6 +93,9 @@ export const mcpServerColumns = (
   onByokConnect?: (server: MCPServer) => void,
   onRecheckHealth?: (serverId: string) => void,
   recheckingServerIds?: Set<string>,
+  accessToken?: string,
+  onOAuthDisconnect?: (server: MCPServer) => void,
+  onRefreshServers?: () => void,
 ): ColumnDef<MCPServer>[] => [
   {
     accessorKey: "server_id",
@@ -266,6 +270,38 @@ export const mcpServerColumns = (
     header: "Credential",
     cell: ({ row }) => {
       const server = row.original;
+
+      // OAuth2 servers: show OAuth2 connect/disconnect UI
+      if (server.auth_type === AUTH_TYPE.OAUTH2 && !server.is_byok) {
+        if (server.has_user_credential) {
+          return (
+            <div className="flex items-center gap-2">
+              <span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200">
+                <CheckOutlined style={{ fontSize: 10 }} /> Connected
+              </span>
+              {onOAuthDisconnect && (
+                <button
+                  className="text-xs text-gray-400 hover:text-red-600 transition-colors"
+                  onClick={() => onOAuthDisconnect(server)}
+                >
+                  Disconnect
+                </button>
+              )}
+            </div>
+          );
+        }
+        if (accessToken && onRefreshServers) {
+          return (
+            <OAuth2ConnectButton
+              server={server}
+              accessToken={accessToken}
+              onSuccess={onRefreshServers}
+            />
+          );
+        }
+        return null;
+      }
+
       if (!server.is_byok) {
         return <span className="text-gray-300 text-xs">—</span>;
       }