diff --git a/litellm/proxy/_experimental/mcp_server/byok_oauth_endpoints.py b/litellm/proxy/_experimental/mcp_server/byok_oauth_endpoints.py index 60cbc7cb560..d4b09770750 100644 --- a/litellm/proxy/_experimental/mcp_server/byok_oauth_endpoints.py +++ b/litellm/proxy/_experimental/mcp_server/byok_oauth_endpoints.py @@ -175,7 +175,12 @@ def _build_authorize_html( display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: white; }} - .logo-l {{ background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); }} + .logo-img {{ + width: 52px; height: 52px; + border-radius: 14px; + object-fit: cover; + border: 1.5px solid #e2e8f0; + }} .logo-s {{ background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%); }} .logo-arrow {{ color: #cbd5e1; font-size: 20px; font-weight: 300; }} /* Headings */ @@ -258,8 +263,9 @@ def _build_authorize_html( background: #e0f2fe; border-radius: 12px; display: flex; align-items: center; justify-content: center; - font-size: 20px; margin-bottom: 14px; + margin-bottom: 14px; }} + .key-icon-wrap svg {{ width: 22px; height: 22px; color: #0284c7; }} /* Form elements */ .field-label {{ font-size: 13.5px; font-weight: 600; @@ -382,16 +388,18 @@ def _build_authorize_html(
- + LiteLLM →
-

Connect {server_name}

+

Connect {server_name} MCP

LiteLLM needs access to {server_name} to complete your request.

- ⓘ + + +

How it works

LiteLLM acts as a secure bridge. Your requests are routed through our MCP client directly to {server_name}’s API.

@@ -417,7 +425,9 @@ def _build_authorize_html(
-
🔑
+
+ +

Provide API Key

Enter your {server_name} API key to authorize this connection.

@@ -446,7 +456,6 @@ def _build_authorize_html(
- 💾 Save key for future use
- 🔒 + + +

Your key is encrypted at rest and transmitted securely. It is never shared with third parties.

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tools/byok-demo/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tools/byok-demo/page.tsx index 2ca66e0c51c..93ed7a39ad1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/tools/byok-demo/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/tools/byok-demo/page.tsx @@ -31,7 +31,7 @@ interface ServerConnectionStatus { // Constants // --------------------------------------------------------------------------- -const DEMO_VIRTUAL_KEY = "sk-3GWHDBM9B37bBIsl3dhuAg"; +const DEMO_VIRTUAL_KEY = "sk-rJGGhNOSHLXi8OwdDAIX8Q"; const CLIENT_ID = "user-alice-123"; const PROXY_BASE_URL = process.env.NEXT_PUBLIC_LITELLM_PROXY_BASE_URL || "http://localhost:4000";