Skip to content

fix: proxy_base_url on the Proxy UI #11077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+25 −135
Open

fix: proxy_base_url on the Proxy UI #11077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4f3bfa
remove some unused functions in UI
May 23, 2025
4a239b7
more reuse on proxy_base_url across the UI
May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/litellm-dashboard/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
const nextConfig = {
output: 'export',
basePath: process.env.UI_BASE_PATH || '/ui',
baseProxyUrl: process.env.PROXY_BASE_URL || '/',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @wagnerjt could you explain what happens when this value is set on nextconfig?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since our UI is rendered from the server as static html - how is this change used ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

During the custom UI build process, nextjs will recognize if this environment variable is set and inject the variable.

Something like RUN UI_BASE_PATH=${UI_BASE_PATH} npm run build.

To be even more dynamic, we could make anl new endpoint on the python server that returns the env variables for the UI on startup. Would this be preferred?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep

};

nextConfig.experimental = {
Expand Down
5 changes: 0 additions & 5 deletions ui/litellm-dashboard/src/components/admins.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,11 +106,6 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
Record<string, string>
>>(null);

const isLocal = process.env.NODE_ENV === "development";
if (isLocal != true) {
console.log = function() {};
}

const baseUrl = useBaseUrl();
const all_ip_address_allowed = "All IP Addresses Allowed";

Expand Down
3 changes: 0 additions & 3 deletions ui/litellm-dashboard/src/components/chat_ui/llm_calls/responses_api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,6 @@ export async function makeOpenAIResponsesRequest(

// Base URL should be the current base_url
const isLocal = process.env.NODE_ENV === "development";
if (isLocal !== true) {
console.log = function () {};
}

const proxyBaseUrl = isLocal
? "http://localhost:4000"
Expand Down
1 change: 0 additions & 1 deletion ui/litellm-dashboard/src/components/create_user_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ const Createuser: React.FC<CreateuserProps> = ({
const [invitationLinkData, setInvitationLinkData] =
useState<InvitationLink | null>(null);
const router = useRouter();
const isLocal = process.env.NODE_ENV === "development";

const [baseUrl, setBaseUrl] = useState("http://localhost:4000");
// get all models
Expand Down
64 changes: 0 additions & 64 deletions ui/litellm-dashboard/src/components/enter_proxy_url.tsx
View file
Open in desktop

This file was deleted.

11 changes: 2 additions & 9 deletions ui/litellm-dashboard/src/components/general_settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
Icon,
} from "@tremor/react";
import {
proxyBaseUrl,
getCallbacksCall,
setCallbacksCall,
getGeneralSettingsCall,
Expand Down Expand Up @@ -74,15 +75,7 @@ async function testFallbackModelResponse(
selectedModel: string,
accessToken: string
) {
// base url should be the current base_url
const isLocal = process.env.NODE_ENV === "development";
if (isLocal != true) {
console.log = function() {};
}
console.log("isLocal:", isLocal);
const proxyBaseUrl = isLocal
? "http://localhost:4000"
: window.location.origin;

const client = new openai.OpenAI({
apiKey: accessToken, // Replace with your OpenAI API key
baseURL: proxyBaseUrl, // Replace with your OpenAI API base URL
Expand Down
22 changes: 18 additions & 4 deletions ui/litellm-dashboard/src/components/networking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,25 @@ import { Team } from "./key_team_helpers/key_list";
import { UserInfo } from "./view_users/types";
import { EmailEventSettingsResponse, EmailEventSettingsUpdateRequest } from "./email_events/types";

const isLocal = process.env.NODE_ENV === "development";
export const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
const stripStringFirstIf = (str: string, char: string): string => {
if (str.startsWith(char)) {
return str.slice(1);
}
return str;
}

export const getProxyUrl = (): string => {
const isLocal = process.env.NODE_ENV === "development";
if (isLocal) {
return "http://localhost:4000";
} else if (process.env.PROXY_BASE_URL === undefined) {
return "/";
} else {
return `/${stripStringFirstIf(process.env.PROXY_BASE_URL, "/")}`;
}

}
export const proxyBaseUrl = getProxyUrl();

export const DEFAULT_ORGANIZATION = "default_organization";

Expand Down
6 changes: 1 addition & 5 deletions ui/litellm-dashboard/src/components/request_model_access.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,7 @@ interface RequestAccessProps {
accessToken: string;
userID: string;
}
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

function onRequestAccess(formData: Record<string, any>): void {
// This function does nothing for now
}
Expand Down
6 changes: 1 addition & 5 deletions ui/litellm-dashboard/src/components/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,7 @@ import { Modal, Typography, Form, Input, Select, Button as Button2, message } fr
import EmailSettings from "./email_settings";

const { Title, Paragraph } = Typography;
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

import {
getCallbacksCall,
setCallbacksCall,
Expand Down
6 changes: 1 addition & 5 deletions ui/litellm-dashboard/src/components/teams.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,7 @@ import {
import { CogIcon } from "@heroicons/react/outline";
import AvailableTeamsPanel from "@/components/team/available_teams";
import type { Team } from "./key_team_helpers/key_list";
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

interface TeamProps {
teams: Team[] | null;
searchParams: any;
Expand Down
6 changes: 0 additions & 6 deletions ui/litellm-dashboard/src/components/usage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,6 @@ import {
} from "./networking";
import { start } from "repl";
import TopKeyView from "./top_key_view";
console.log("process.env.NODE_ENV", process.env.NODE_ENV);
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal !== true) {
console.log = function() {};
}

interface UsagePageProps {
accessToken: string | null;
Expand Down
7 changes: 1 addition & 6 deletions ui/litellm-dashboard/src/components/user_dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";
import React, { useState, useEffect } from "react";
import {
proxyBaseUrl,
userInfoCall,
modelAvailableCall,
getTotalSpendCall,
Expand All @@ -23,12 +24,6 @@ import { Team } from "./key_team_helpers/key_list";
import { jwtDecode } from "jwt-decode";
import { Typography } from "antd";
import { clearTokenCookies } from "@/utils/cookieUtils";
const isLocal = process.env.NODE_ENV === "development";
if (isLocal != true) {
console.log = function() {};
}
console.log("isLocal:", isLocal);
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;

export interface ProxySettings {
PROXY_BASE_URL: string | null;
Expand Down
6 changes: 0 additions & 6 deletions ui/litellm-dashboard/src/components/view_key_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,6 @@ import { AllKeysTable } from "./all_keys_table";
import { Team } from "./key_team_helpers/key_list";
import { Setter } from "@/types";

const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function () {};
}

interface EditKeyModalProps {
visible: boolean;
onCancel: () => void;
Expand Down
5 changes: 0 additions & 5 deletions ui/litellm-dashboard/src/components/view_user_spend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@ import {
} from "@tremor/react";
import { Statistic } from "antd"
import { spendUsersCall, modelAvailableCall } from "./networking";
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

// Define the props type
interface UserSpendData {
Expand Down
5 changes: 0 additions & 5 deletions ui/litellm-dashboard/src/components/view_user_team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,6 @@ import {
} from "@tremor/react";
import { Statistic } from "antd"
import { modelAvailableCall } from "./networking";
const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

interface ViewUserTeamProps {
userID: string | null;
Expand Down
6 changes: 0 additions & 6 deletions ui/litellm-dashboard/src/components/view_users.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,6 @@ interface FilterState {
sort_order: 'asc' | 'desc';
}

const isLocal = process.env.NODE_ENV === "development";
const proxyBaseUrl = isLocal ? "http://localhost:4000" : null;
if (isLocal != true) {
console.log = function() {};
}

const DEFAULT_PAGE_SIZE = 25;

const initialFilters: FilterState = {
Expand Down
Loading