From ff6dc519875b384337d324a41b9b9064af39b2d2 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Sat, 7 Mar 2026 15:06:28 -0800
Subject: [PATCH] fix(ui): fix playground banner Open Chat UI button 404

The banner's href was hardcoded to /chat, missing both the /ui/ prefix
and any server_root_path prefix. Use useUIConfig to build the same
chatHref as the navbar does.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/app/(dashboard)/playground/page.tsx               | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
index 6a694d9bee9..693dc6b20ee 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
@@ -8,6 +8,7 @@ import ComplianceUI from "@/components/playground/complianceUI/ComplianceUI";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { fetchProxySettings } from "@/utils/proxyUtils";
+import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";
 import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
 
 interface ProxySettings {
@@ -19,6 +20,11 @@ export default function PlaygroundPage() {
   const { accessToken, userRole, userId, disabledPersonalKeyCreation, token } = useAuthorized();
   const [proxySettings, setProxySettings] = useState<ProxySettings | undefined>(undefined);
   const [chatBannerDismissed, setChatBannerDismissed] = useState(false);
+  const { data: uiConfig } = useUIConfig();
+  const uiRoot = uiConfig?.server_root_path && uiConfig.server_root_path !== "/"
+    ? uiConfig.server_root_path.replace(/\/+$/, "")
+    : "";
+  const chatHref = `${uiRoot}/ui/chat`;
 
   useEffect(() => {
     const initializeProxySettings = async () => {
@@ -67,7 +73,7 @@ export default function PlaygroundPage() {
             {" "}— a ChatGPT-like interface for your users to chat with AI models and MCP tools. Share it with your team.
           </span>
           <a
-            href="/chat"
+            href={chatHref}
             target="_blank"
             rel="noopener noreferrer"
             style={{