From 0e0657b9490949fffdfb085f1bd7eea51b93c87c Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Tue, 10 Mar 2026 12:44:39 -0700
Subject: [PATCH] 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
---
 .../src/components/chat/ChatPage.tsx                 | 12 +++++++++++-
 .../src/components/chat/MCPAppsPanel.tsx             | 11 ++++++++++-
 2 files changed, 21 insertions(+), 2 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..369e8375f9f 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -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 === "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>
             );