diff --git a/dashboard/frontend/src/pages/PlaygroundPage.tsx b/dashboard/frontend/src/pages/PlaygroundPage.tsx index e0eadc78ab..5dcf0a08ca 100644 --- a/dashboard/frontend/src/pages/PlaygroundPage.tsx +++ b/dashboard/frontend/src/pages/PlaygroundPage.tsx @@ -3,14 +3,26 @@ import styles from './PlaygroundPage.module.css' const PlaygroundPage: React.FC = () => { // Detect OpenWebUI URL based on current hostname - // Assumes openwebui and dashboard have matching hostname patterns const getOpenWebUIUrl = () => { const hostname = window.location.hostname + const protocol = window.location.protocol + + // Build-time configurable port (e.g., for All-in-One deployment) + const configuredPort = import.meta.env.VITE_OPENWEBUI_PORT + if (configuredPort) { + return `${protocol}//${hostname}:${configuredPort}` + } + + // Assumes openwebui and dashboard have matching hostname patterns const openwebuiHost = hostname.replace('dashboard', 'openwebui') - return `${window.location.protocol}//${openwebuiHost}` + if (openwebuiHost === hostname) { + // hostname doesn't contain 'dashboard', cannot determine Open WebUI URL + return '' + } + return `${protocol}//${openwebuiHost}` } - const [openWebUIUrl] = useState(getOpenWebUIUrl()) + const [openWebUIUrl] = useState(() => getOpenWebUIUrl()) const [currentUrl, setCurrentUrl] = useState('') // Auto-load on mount @@ -30,7 +42,7 @@ const PlaygroundPage: React.FC = () => { Test your LLM models and semantic routing with Open WebUI.

- Note: Open WebUI needs to be deployed separately. Check the dashboard README for instructions. + If unable to load, please check Open WebUI deployment and port configuration.

)} diff --git a/dashboard/frontend/src/vite-env.d.ts b/dashboard/frontend/src/vite-env.d.ts index c9fb129443..0ae9c9474c 100644 --- a/dashboard/frontend/src/vite-env.d.ts +++ b/dashboard/frontend/src/vite-env.d.ts @@ -1,6 +1,14 @@ /// -declare module '*.module.css' { - const classes: { [key: string]: string } - export default classes +interface ImportMetaEnv { + readonly VITE_OPENWEBUI_PORT?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + +declare module "*.module.css" { + const classes: { [key: string]: string }; + export default classes; }