From 229d2801413e1df54ac63a741f52144c32a01291 Mon Sep 17 00:00:00 2001
From: Chesars <cesarponce19544@gmail.com>
Date: Mon, 5 Jan 2026 15:36:32 -0300
Subject: [PATCH] feat(ui): add custom proxy base URL support to Playground

Add ability to configure a custom proxy base URL in the Playground UI,
enabling control plane/data plane architecture where:
- Control Plane: Has UI but LLM APIs disabled (DISABLE_LLM_API_ENDPOINTS=true)
- Data Plane: Has LLM APIs but UI disabled

Changes:
- Add "Custom Proxy Base URL" input field in Playground settings
- Persist custom URL in sessionStorage for user convenience
- Modify getProxyBaseUrl() to check sessionStorage first
- All API calls now route to custom URL when configured

This allows users to run the UI on control plane and point API
calls to a separate data plane endpoint.
---
 .../src/components/networking.tsx             |  6 +++++
 .../components/playground/chat_ui/ChatUI.tsx  | 23 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index f0464c61f8..ed43c8aa45 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -92,6 +92,12 @@ const updateServerRootPath = (receivedServerRootPath: string) => {
 };
 
 export const getProxyBaseUrl = (): string => {
+  // Check for custom proxy base URL from sessionStorage first
+  const customProxyBaseUrl = sessionStorage.getItem("customProxyBaseUrl");
+  if (customProxyBaseUrl && customProxyBaseUrl.trim() !== "") {
+    return customProxyBaseUrl;
+  }
+
   if (proxyBaseUrl) {
     return proxyBaseUrl;
   }
diff --git a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
index a963aa706b..145560e992 100644
--- a/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/components/playground/chat_ui/ChatUI.tsx
@@ -118,6 +118,9 @@ const ChatUI: React.FC<ChatUIProps> = ({
     return disabledPersonalKeyCreation ? "custom" : "session";
   });
   const [apiKey, setApiKey] = useState<string>(() => sessionStorage.getItem("apiKey") || "");
+  const [customProxyBaseUrl, setCustomProxyBaseUrl] = useState<string>(
+    () => sessionStorage.getItem("customProxyBaseUrl") || ""
+  );
   const [inputMessage, setInputMessage] = useState("");
   const [chatHistory, setChatHistory] = useState<MessageType[]>(() => {
     try {
@@ -1112,6 +1115,26 @@ const ChatUI: React.FC<ChatUIProps> = ({
                 )}
               </div>
 
+              <div>
+                <Text className="font-medium block mb-2 text-gray-700 flex items-center">
+                  <SettingOutlined className="mr-2" /> Custom Proxy Base URL
+                </Text>
+                <TextInput
+                  placeholder="Optional: Enter custom proxy URL (e.g., http://localhost:5000)"
+                  onValueChange={(value) => {
+                    setCustomProxyBaseUrl(value);
+                    sessionStorage.setItem("customProxyBaseUrl", value);
+                  }}
+                  value={customProxyBaseUrl}
+                  icon={ApiOutlined}
+                />
+                {customProxyBaseUrl && (
+                  <Text className="text-xs text-gray-500 mt-1">
+                    API calls will be sent to: {customProxyBaseUrl}
+                  </Text>
+                )}
+              </div>
+
               <div>
                 <Text className="font-medium block mb-2 text-gray-700 flex items-center">
                   <ApiOutlined className="mr-2" /> Endpoint Type