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:
Chesars 2026-01-05 15:36:32 -03:00
parent 6dc11deeac
commit 229d280141
2 changed files with 29 additions and 0 deletions

View file

@ -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;
}

View file

@ -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