From 6faad2919a53f020b444a88895d5becf3261856d Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 10 Mar 2026 14:37:32 -0700
Subject: [PATCH] feat(chat-ui): add MCP OAuth2 value prop and server auth
 badges (#23291)

* feat(chat-ui): add MCP OAuth2 value prop and OAuth2 pill on server cards

- Add subtitle in chat empty state explaining MCP OAuth2 value prop with 'Open Apps' link
- Update MCPAppsPanel header copy to explain the flow more clearly
- Show OAuth2 pill badge on server cards where auth_type is oauth2

* fix(chat-ui): use AUTH_TYPE.OAUTH2 constant instead of hardcoded string
---
 .../src/components/chat/ChatPage.tsx                | 12 +++++++++++-
 .../src/components/chat/MCPAppsPanel.tsx            | 13 +++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 40b41f561ce..34473165bb1 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -944,10 +944,20 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
                   : greeting}
               </h1>
 
-              {isComparisonMode && (
+              {isComparisonMode ? (
                 <p style={{ margin: "-16px 0 24px", fontSize: 14, color: "#6b7280", textAlign: "center" }}>
                   Send a message to see responses side-by-side
                 </p>
+              ) : (
+                <p style={{ margin: "-16px 0 28px", fontSize: 14, color: "#6b7280", textAlign: "center", maxWidth: 520, lineHeight: 1.6 }}>
+                  Chat with 100+ LLMs + MCP tools — authenticate once, use them here.{" "}
+                  <button
+                    onClick={() => setSidebarView("apps")}
+                    style={{ background: "none", border: "none", cursor: "pointer", color: "#1677ff", fontSize: 14, padding: 0, fontWeight: 500 }}
+                  >
+                    Open Apps →
+                  </button>
+                </p>
               )}
 
               {/* Input card */}
diff --git a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
index 926d6697bca..f3a387c02bd 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { Switch, Spin, Input, Button } from "antd";
 import { SearchOutlined, ArrowLeftOutlined, RightOutlined } from "@ant-design/icons";
 import { fetchMCPServers, listMCPTools } from "../networking";
-import { MCPServer } from "../mcp_tools/types";
+import { AUTH_TYPE, MCPServer } from "../mcp_tools/types";
 import { message } from "antd";
 
 interface Props {
@@ -174,7 +174,7 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
             }}>Beta</span>
           </div>
           <p style={{ margin: 0, fontSize: 13, color: "#6b7280" }}>
-            Connect tools to your chat.
+            Browse tools, authenticate once, use in chat — no setup needed.
           </p>
         </div>
         <Input
@@ -261,6 +261,15 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
                 {isConnected && (
                   <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#1677ff", flexShrink: 0 }} />
                 )}
+                {server.auth_type === AUTH_TYPE.OAUTH2 && (
+                  <span style={{
+                    fontSize: 10, fontWeight: 600, color: "#7c3aed",
+                    background: "#f3e8ff", borderRadius: 4, padding: "1px 5px",
+                    letterSpacing: "0.03em", flexShrink: 0, whiteSpace: "nowrap",
+                  }}>
+                    OAuth2
+                  </span>
+                )}
                 <RightOutlined style={{ fontSize: 11, color: "#d1d5db", flexShrink: 0 }} />
               </div>
             );