From c05af7a12f1eb68c0a4cb287c099a0ad6f684f54 Mon Sep 17 00:00:00 2001 From: yassin Date: Tue, 15 Sep 2026 22:12:06 +0000 Subject: [PATCH] feat(ui): add custom request headers to the API Playground Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../chat_ui/ChatUI.integration.test.tsx | 63 ++++++++++++++++++- .../playground/components/chat_ui/ChatUI.tsx | 45 ++++++++++--- .../playground/llm_calls/a2a_send_message.tsx | 3 + .../llm_calls/anthropic_messages.test.tsx | 23 +++++++ .../llm_calls/anthropic_messages.tsx | 8 +-- .../playground/llm_calls/audio_speech.tsx | 4 +- .../llm_calls/audio_transcriptions.tsx | 4 +- .../llm_calls/embeddings_api.test.tsx | 20 ++++++ .../playground/llm_calls/embeddings_api.tsx | 8 +-- .../playground/llm_calls/image_edits.tsx | 4 +- .../playground/llm_calls/image_generation.tsx | 4 +- .../playground/llm_calls/interactions_api.tsx | 6 +- .../components/chat_ui/CodeSnippets.test.tsx | 22 +++++++ .../src/components/chat_ui/CodeSnippets.tsx | 12 +++- .../llm_calls/chat_completion.test.tsx | 45 +++++++++++++ .../components/llm_calls/chat_completion.tsx | 8 +-- .../llm_calls/request_headers.test.ts | 44 +++++++++++++ .../components/llm_calls/request_headers.ts | 27 ++++++++ .../llm_calls/responses_api.test.tsx | 44 +++++++++++++ .../components/llm_calls/responses_api.tsx | 8 +-- 20 files changed, 364 insertions(+), 38 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/llm_calls/request_headers.test.ts create mode 100644 ui/litellm-dashboard/src/components/llm_calls/request_headers.ts diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx index 984996351df..e79d382ae39 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx @@ -35,10 +35,12 @@ beforeEach(() => { Element.prototype.scrollIntoView = () => {}; }); -const CHAT_REQUEST_ARG_COUNT = 26; +const CHAT_REQUEST_ARG_COUNT = 27; const STREAMING_ENABLED_ARG_INDEX = 25; -const MESSAGES_REQUEST_ARG_COUNT = 19; +const CHAT_CUSTOM_HEADERS_ARG_INDEX = 26; +const MESSAGES_REQUEST_ARG_COUNT = 20; const MESSAGES_STREAMING_ENABLED_ARG_INDEX = 18; +const MESSAGES_CUSTOM_HEADERS_ARG_INDEX = 19; async function openComboboxByPlaceholder(placeholder: string) { const user = userEvent.setup(); @@ -447,6 +449,63 @@ describe("ChatUI", () => { expect(requestArgs[MESSAGES_STREAMING_ENABLED_ARG_INDEX]).toBe(false); }); + it("should send custom headers entered in the sidebar with /v1/chat/completions and /v1/messages requests", async () => { + const user = userEvent.setup(); + render( + , + ); + + await waitFor(() => { + expect(screen.getByText("Test Key")).toBeInTheDocument(); + }); + + await selectComboboxOption("Select a Model", "Model 1"); + await user.click(screen.getByRole("button", { name: "Add Header" })); + await user.click(screen.getByRole("button", { name: "Add Header" })); + const [firstName] = screen.getAllByPlaceholderText("Header Name"); + const [firstValue, secondValue] = screen.getAllByPlaceholderText("Header Value"); + fireEvent.change(firstName, { target: { value: "anthropic-beta" } }); + fireEvent.change(firstValue, { target: { value: "context-1m-2025-08-07" } }); + fireEvent.change(secondValue, { target: { value: "ignored because the name is blank" } }); + + const messageInput = screen.getByPlaceholderText("Type your message... (Shift+Enter for new line)"); + await act(async () => { + fireEvent.change(messageInput, { target: { value: "hello" } }); + }); + await act(async () => { + fireEvent.keyDown(messageInput, { key: "Enter", code: "Enter" }); + }); + + await waitFor(() => { + expect(makeOpenAIChatCompletionRequest).toHaveBeenCalledTimes(1); + }); + const chatArgs = vi.mocked(makeOpenAIChatCompletionRequest).mock.calls[0]; + expect(chatArgs).toHaveLength(CHAT_REQUEST_ARG_COUNT); + expect(chatArgs[CHAT_CUSTOM_HEADERS_ARG_INDEX]).toEqual({ "anthropic-beta": "context-1m-2025-08-07" }); + + await selectComboboxOption("Select an endpoint", "/v1/messages"); + await selectComboboxOption("Select a Model", "Model 1"); + await act(async () => { + fireEvent.change(messageInput, { target: { value: "hello again" } }); + }); + await act(async () => { + fireEvent.keyDown(messageInput, { key: "Enter", code: "Enter" }); + }); + + await waitFor(() => { + expect(makeAnthropicMessagesRequest).toHaveBeenCalledTimes(1); + }); + const messagesArgs = vi.mocked(makeAnthropicMessagesRequest).mock.calls[0]; + expect(messagesArgs).toHaveLength(MESSAGES_REQUEST_ARG_COUNT); + expect(messagesArgs[MESSAGES_CUSTOM_HEADERS_ARG_INDEX]).toEqual({ "anthropic-beta": "context-1m-2025-08-07" }); + }); + it("should force streaming in simplified mode even when the playground setting is off", async () => { sessionStorage.setItem("streamingEnabled", "false"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx index ed8679cfdc1..ae0fabe5ef2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx @@ -9,6 +9,7 @@ import { Info, Key, Link2, + ListPlus, Loader2, Settings, Shield, @@ -40,6 +41,8 @@ import { makeAnthropicMessagesRequest } from "../../llm_calls/anthropic_messages import { makeOpenAIAudioSpeechRequest } from "../../llm_calls/audio_speech"; import { makeOpenAIAudioTranscriptionRequest } from "../../llm_calls/audio_transcriptions"; import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion"; +import { customHeadersFromPairs, parseStoredHeaderPairs } from "@/components/llm_calls/request_headers"; +import KeyValueInput, { type KeyValuePair } from "@/components/key_value_input"; import { makeOpenAIEmbeddingsRequest } from "../../llm_calls/embeddings_api"; import { Agent, fetchAvailableAgents } from "../../llm_calls/fetch_agents"; import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; @@ -220,6 +223,10 @@ const ChatUI: React.FC = ({ return []; } }); + const [customHeaderPairs, setCustomHeaderPairs] = useState(() => + parseStoredHeaderPairs(getSecureItem("customHeaders")), + ); + const customHeaders = useMemo(() => customHeadersFromPairs(customHeaderPairs), [customHeaderPairs]); const [selectedVoice, setSelectedVoice] = useState(() => { const saved = sessionStorage.getItem("selectedVoice"); if (!saved) return "alloy"; @@ -346,6 +353,7 @@ const ChatUI: React.FC = ({ selectedSdk, selectedVoice, proxySettings, + customHeaders, }); setGeneratedCode(code); } @@ -367,12 +375,14 @@ const ChatUI: React.FC = ({ endpointType, selectedModel, proxySettings, + customHeaders, ]); useEffect(() => { try { setSecureItem("apiKeySource", JSON.stringify(apiKeySource)); setSecureItem("apiKey", apiKey); + setSecureItem("customHeaders", JSON.stringify(customHeaderPairs)); } catch { // Storage full or unavailable — non-critical, skip persisting. } @@ -410,6 +420,7 @@ const ChatUI: React.FC = ({ mcpServerToolRestrictions, selectedVoice, streamingEnabled, + customHeaderPairs, ]); useEffect(() => { @@ -921,6 +932,7 @@ const ChatUI: React.FC = ({ mockTestFallbacks, mcpToolsets, streamingEnabled, + customHeaders, ); } else if (endpointType === EndpointType.IMAGE) { // For image generation @@ -932,6 +944,7 @@ const ChatUI: React.FC = ({ selectedTags, signal, customProxyBaseUrl || undefined, + customHeaders, ); } else if (endpointType === EndpointType.SPEECH) { // For audio speech @@ -946,6 +959,7 @@ const ChatUI: React.FC = ({ undefined, // responseFormat undefined, // speed customProxyBaseUrl || undefined, + customHeaders, ); } else if (endpointType === EndpointType.IMAGE_EDITS) { // For image edits @@ -959,6 +973,7 @@ const ChatUI: React.FC = ({ selectedTags, signal, customProxyBaseUrl || undefined, + customHeaders, ); } } else if (endpointType === EndpointType.RESPONSES) { @@ -1004,6 +1019,7 @@ const ChatUI: React.FC = ({ mcpToolsets, streamingEnabled, updateTotalLatency, + customHeaders, ); } else if (endpointType === EndpointType.ANTHROPIC_MESSAGES) { const apiChatHistory = [ @@ -1033,6 +1049,7 @@ const ChatUI: React.FC = ({ mcpServerToolRestrictions, mcpToolsets, streamingEnabled, + customHeaders, ); } else if (endpointType === EndpointType.EMBEDDINGS) { await makeOpenAIEmbeddingsRequest( @@ -1042,6 +1059,7 @@ const ChatUI: React.FC = ({ effectiveApiKey, selectedTags, customProxyBaseUrl || undefined, + customHeaders, ); } else if (endpointType === EndpointType.TRANSCRIPTION) { // For audio transcriptions @@ -1058,6 +1076,7 @@ const ChatUI: React.FC = ({ undefined, // responseFormat undefined, // temperature customProxyBaseUrl || undefined, + customHeaders, ); } } else if (endpointType === EndpointType.INTERACTIONS) { @@ -1069,6 +1088,8 @@ const ChatUI: React.FC = ({ selectedTags, signal, customProxyBaseUrl || undefined, + undefined, + customHeaders, ); } } @@ -1086,13 +1107,10 @@ const ChatUI: React.FC = ({ resolvedServerId = toolEntry?.server_id ?? rawSelected; } if (resolvedServerId && !resolvedServerId.startsWith("toolset:") && selectedMCPDirectTool) { - const result = await callMCPTool( - effectiveApiKey, - resolvedServerId, - selectedMCPDirectTool, - mcpToolArguments, - selectedGuardrails.length > 0 ? { guardrails: selectedGuardrails } : undefined, - ); + const result = await callMCPTool(effectiveApiKey, resolvedServerId, selectedMCPDirectTool, mcpToolArguments, { + ...(selectedGuardrails.length > 0 ? { guardrails: selectedGuardrails } : {}), + customHeaders, + }); const resultText = result?.content?.length > 0 ? JSON.stringify( @@ -1118,6 +1136,7 @@ const ChatUI: React.FC = ({ updateA2AMetadata, customProxyBaseUrl || undefined, selectedGuardrails.length > 0 ? selectedGuardrails : undefined, + customHeaders, ); } } catch (error) { @@ -1485,6 +1504,18 @@ const ChatUI: React.FC = ({ /> + {endpointType !== EndpointType.REALTIME && ( +
+ + +

+ Sent with every playground request, e.g. provider-specific headers like anthropic-beta. +

+
+ )} +