mirror of
https://github.com/BerriAI/litellm.git
synced 2026-09-07 08:26:10 +00:00
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.
This commit is contained in:
parent
6dc11deeac
commit
229d280141
2 changed files with 29 additions and 0 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue