Customizable headers for the OpenAI-compatible provider

Author: mrubens

src/api/providers/openai.ts

@@ -35,12 +35,17 @@ export class OpenAiHandler extends BaseProvider implements SingleCompletionHandl
 		const urlHost = this._getUrlHost(this.options.openAiBaseUrl)
 		const isAzureOpenAi = urlHost === "azure.com" || urlHost.endsWith(".azure.com") || options.openAiUseAzure
 
+		const headers = {
+			...DEFAULT_HEADERS,
+			...(this.options.openAiHeaders || {}),
+		}
+
 		if (isAzureAiInference) {
 			// Azure AI Inference Service (e.g., for DeepSeek) uses a different path structure
 			this.client = new OpenAI({
 				baseURL,
 				apiKey,
-				defaultHeaders: DEFAULT_HEADERS,
+				defaultHeaders: headers,
 				defaultQuery: { "api-version": this.options.azureApiVersion || "2024-05-01-preview" },
 			})
 		} else if (isAzureOpenAi) {
@@ -50,19 +55,13 @@ export class OpenAiHandler extends BaseProvider implements SingleCompletionHandl
 				baseURL,
 				apiKey,
 				apiVersion: this.options.azureApiVersion || azureOpenAiDefaultApiVersion,
-				defaultHeaders: {
-					...DEFAULT_HEADERS,
-					...(this.options.openAiHostHeader ? { Host: this.options.openAiHostHeader } : {}),
-				},
+				defaultHeaders: headers,
 			})
 		} else {
 			this.client = new OpenAI({
 				baseURL,
 				apiKey,
-				defaultHeaders: {
-					...DEFAULT_HEADERS,
-					...(this.options.openAiHostHeader ? { Host: this.options.openAiHostHeader } : {}),
-				},
+				defaultHeaders: headers,
 			})
 		}
 	}
@@ -361,7 +360,7 @@ export class OpenAiHandler extends BaseProvider implements SingleCompletionHandl
 	}
 }
 
-export async function getOpenAiModels(baseUrl?: string, apiKey?: string, hostHeader?: string) {
+export async function getOpenAiModels(baseUrl?: string, apiKey?: string, openAiHeaders?: Record<string, string>) {
 	try {
 		if (!baseUrl) {
 			return []
@@ -372,16 +371,15 @@ export async function getOpenAiModels(baseUrl?: string, apiKey?: string, hostHea
 		}
 
 		const config: Record<string, any> = {}
-		const headers: Record<string, string> = {}
+		const headers: Record<string, string> = {
+			...DEFAULT_HEADERS,
+			...(openAiHeaders || {}),
+		}
 
 		if (apiKey) {
 			headers["Authorization"] = `Bearer ${apiKey}`
 		}
 
-		if (hostHeader) {
-			headers["Host"] = hostHeader
-		}
-
 		if (Object.keys(headers).length > 0) {
 			config["headers"] = headers
 		}

src/core/config/ContextProxy.ts

@@ -192,6 +192,16 @@ export class ContextProxy {
 		// If a value is not present in the new configuration, then it is assumed
 		// that the setting's value should be `undefined` and therefore we
 		// need to remove it from the state cache if it exists.
+
+		// Ensure openAiHeaders is always an object even when empty
+		// This is critical for proper serialization/deserialization through IPC
+		if (values.openAiHeaders !== undefined) {
+			// Check if it's empty or null
+			if (!values.openAiHeaders || Object.keys(values.openAiHeaders).length === 0) {
+				values.openAiHeaders = {}
+			}
+		}
+
 		await this.setValues({
 			...PROVIDER_SETTINGS_KEYS.filter((key) => !isSecretStateKey(key))
 				.filter((key) => !!this.stateCache[key])

src/core/config/ProviderSettingsManager.ts

@@ -17,6 +17,7 @@ export const providerProfilesSchema = z.object({
 		.object({
 			rateLimitSecondsMigrated: z.boolean().optional(),
 			diffSettingsMigrated: z.boolean().optional(),
+			openAiHeadersMigrated: z.boolean().optional(),
 		})
 		.optional(),
 })
@@ -38,6 +39,7 @@ export class ProviderSettingsManager {
 		migrations: {
 			rateLimitSecondsMigrated: true, // Mark as migrated on fresh installs
 			diffSettingsMigrated: true, // Mark as migrated on fresh installs
+			openAiHeadersMigrated: true, // Mark as migrated on fresh installs
 		},
 	}
 
@@ -90,6 +92,7 @@ export class ProviderSettingsManager {
 					providerProfiles.migrations = {
 						rateLimitSecondsMigrated: false,
 						diffSettingsMigrated: false,
+						openAiHeadersMigrated: false,
 					} // Initialize with default values
 					isDirty = true
 				}
@@ -106,6 +109,12 @@ export class ProviderSettingsManager {
 					isDirty = true
 				}
 
+				if (!providerProfiles.migrations.openAiHeadersMigrated) {
+					await this.migrateOpenAiHeaders(providerProfiles)
+					providerProfiles.migrations.openAiHeadersMigrated = true
+					isDirty = true
+				}
+
 				if (isDirty) {
 					await this.store(providerProfiles)
 				}
@@ -175,6 +184,30 @@ export class ProviderSettingsManager {
 		}
 	}
 
+	private async migrateOpenAiHeaders(providerProfiles: ProviderProfiles) {
+		try {
+			for (const [_name, apiConfig] of Object.entries(providerProfiles.apiConfigs)) {
+				// Use type assertion to access the deprecated property safely
+				const configAny = apiConfig as any
+
+				// Check if openAiHostHeader exists but openAiHeaders doesn't
+				if (
+					configAny.openAiHostHeader &&
+					(!apiConfig.openAiHeaders || Object.keys(apiConfig.openAiHeaders || {}).length === 0)
+				) {
+					// Create the headers object with the Host value
+					apiConfig.openAiHeaders = { Host: configAny.openAiHostHeader }
+
+					// Delete the old property to prevent re-migration
+					// This prevents the header from reappearing after deletion
+					configAny.openAiHostHeader = undefined
+				}
+			}
+		} catch (error) {
+			console.error(`[MigrateOpenAiHeaders] Failed to migrate OpenAI headers:`, error)
+		}
+	}
+
 	/**
 	 * List all available configs with metadata.
 	 */

src/core/config/__tests__/ProviderSettingsManager.test.ts

@@ -56,6 +56,7 @@ describe("ProviderSettingsManager", () => {
 					migrations: {
 						rateLimitSecondsMigrated: true,
 						diffSettingsMigrated: true,
+						openAiHeadersMigrated: true,
 					},
 				}),
 			)

src/core/webview/webviewMessageHandler.ts

@@ -310,7 +310,7 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 				const openAiModels = await getOpenAiModels(
 					message?.values?.baseUrl,
 					message?.values?.apiKey,
-					message?.values?.hostHeader,
+					message?.values?.openAiHeaders,
 				)
 
 				provider.postMessageToWebview({ type: "openAiModels", openAiModels })

src/exports/roo-code.d.ts

@@ -50,7 +50,6 @@ type ProviderSettings = {
 	vertexRegion?: string | undefined
 	openAiBaseUrl?: string | undefined
 	openAiApiKey?: string | undefined
-	openAiHostHeader?: string | undefined
 	openAiLegacyFormat?: boolean | undefined
 	openAiR1FormatEnabled?: boolean | undefined
 	openAiModelId?: string | undefined
@@ -88,6 +87,12 @@ type ProviderSettings = {
 	azureApiVersion?: string | undefined
 	openAiStreamingEnabled?: boolean | undefined
 	enableReasoningEffort?: boolean | undefined
+	openAiHostHeader?: string | undefined
+	openAiHeaders?:
+		| {
+				[x: string]: string
+		  }
+		| undefined
 	ollamaModelId?: string | undefined
 	ollamaBaseUrl?: string | undefined
 	vsCodeLmModelSelector?:

src/exports/types.ts

@@ -51,7 +51,6 @@ type ProviderSettings = {
 	vertexRegion?: string | undefined
 	openAiBaseUrl?: string | undefined
 	openAiApiKey?: string | undefined
-	openAiHostHeader?: string | undefined
 	openAiLegacyFormat?: boolean | undefined
 	openAiR1FormatEnabled?: boolean | undefined
 	openAiModelId?: string | undefined
@@ -89,6 +88,12 @@ type ProviderSettings = {
 	azureApiVersion?: string | undefined
 	openAiStreamingEnabled?: boolean | undefined
 	enableReasoningEffort?: boolean | undefined
+	openAiHostHeader?: string | undefined
+	openAiHeaders?:
+		| {
+				[x: string]: string
+		  }
+		| undefined
 	ollamaModelId?: string | undefined
 	ollamaBaseUrl?: string | undefined
 	vsCodeLmModelSelector?:

src/schemas/index.ts

@@ -370,7 +370,6 @@ export const providerSettingsSchema = z.object({
 	// OpenAI
 	openAiBaseUrl: z.string().optional(),
 	openAiApiKey: z.string().optional(),
-	openAiHostHeader: z.string().optional(),
 	openAiLegacyFormat: z.boolean().optional(),
 	openAiR1FormatEnabled: z.boolean().optional(),
 	openAiModelId: z.string().optional(),
@@ -379,6 +378,8 @@ export const providerSettingsSchema = z.object({
 	azureApiVersion: z.string().optional(),
 	openAiStreamingEnabled: z.boolean().optional(),
 	enableReasoningEffort: z.boolean().optional(),
+	openAiHostHeader: z.string().optional(), // Keep temporarily for backward compatibility during migration
+	openAiHeaders: z.record(z.string(), z.string()).optional(),
 	// Ollama
 	ollamaModelId: z.string().optional(),
 	ollamaBaseUrl: z.string().optional(),
@@ -469,7 +470,6 @@ const providerSettingsRecord: ProviderSettingsRecord = {
 	// OpenAI
 	openAiBaseUrl: undefined,
 	openAiApiKey: undefined,
-	openAiHostHeader: undefined,
 	openAiLegacyFormat: undefined,
 	openAiR1FormatEnabled: undefined,
 	openAiModelId: undefined,
@@ -478,6 +478,8 @@ const providerSettingsRecord: ProviderSettingsRecord = {
 	azureApiVersion: undefined,
 	openAiStreamingEnabled: undefined,
 	enableReasoningEffort: undefined,
+	openAiHostHeader: undefined, // Keep temporarily for backward compatibility during migration
+	openAiHeaders: undefined,
 	// Ollama
 	ollamaModelId: undefined,
 	ollamaBaseUrl: undefined,

webview-ui/src/components/settings/ApiOptions.tsx

@@ -3,7 +3,13 @@ import { useDebounce, useEvent } from "react-use"
 import { Trans } from "react-i18next"
 import { LanguageModelChatSelector } from "vscode"
 import { Checkbox } from "vscrui"
-import { VSCodeLink, VSCodeRadio, VSCodeRadioGroup, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import {
+	VSCodeButton,
+	VSCodeLink,
+	VSCodeRadio,
+	VSCodeRadioGroup,
+	VSCodeTextField,
+} from "@vscode/webview-ui-toolkit/react"
 import { ExternalLinkIcon } from "@radix-ui/react-icons"
 
 import { ReasoningEffort as ReasoningEffortType } from "@roo/schemas"
@@ -77,7 +83,6 @@ const ApiOptions = ({
 	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
 	const [azureApiVersionSelected, setAzureApiVersionSelected] = useState(!!apiConfiguration?.azureApiVersion)
 	const [openRouterBaseUrlSelected, setOpenRouterBaseUrlSelected] = useState(!!apiConfiguration?.openRouterBaseUrl)
-	const [openAiHostHeaderSelected, setOpenAiHostHeaderSelected] = useState(!!apiConfiguration?.openAiHostHeader)
 	const [openAiLegacyFormatSelected, setOpenAiLegacyFormatSelected] = useState(!!apiConfiguration?.openAiLegacyFormat)
 	const [googleGeminiBaseUrlSelected, setGoogleGeminiBaseUrlSelected] = useState(
 		!!apiConfiguration?.googleGeminiBaseUrl,
@@ -123,7 +128,8 @@ const ApiOptions = ({
 					values: {
 						baseUrl: apiConfiguration?.openAiBaseUrl,
 						apiKey: apiConfiguration?.openAiApiKey,
-						hostHeader: apiConfiguration?.openAiHostHeader,
+						customHeaders: {}, // Reserved for any additional headers
+						openAiHeaders: apiConfiguration?.openAiHeaders,
 					},
 				})
 			} else if (selectedProvider === "ollama") {
@@ -829,25 +835,90 @@ const ApiOptions = ({
 						)}
 					</div>
 
-					<div>
-						<Checkbox
-							checked={openAiHostHeaderSelected}
-							onChange={(checked: boolean) => {
-								setOpenAiHostHeaderSelected(checked)
-
-								if (!checked) {
-									setApiConfigurationField("openAiHostHeader", "")
-								}
-							}}>
-							{t("settings:providers.useHostHeader")}
-						</Checkbox>
-						{openAiHostHeaderSelected && (
-							<VSCodeTextField
-								value={apiConfiguration?.openAiHostHeader || ""}
-								onInput={handleInputChange("openAiHostHeader")}
-								placeholder="custom-api-hostname.example.com"
-								className="w-full mt-1"
-							/>
+					{/* Custom Headers UI */}
+					<div className="mb-4">
+						<div className="flex justify-between items-center mb-2">
+							<label className="block font-medium">{t("settings:providers.customHeaders")}</label>
+							<VSCodeButton
+								appearance="icon"
+								title={t("settings:common.add")}
+								onClick={() => {
+									const currentHeaders = { ...(apiConfiguration?.openAiHeaders || {}) }
+									// Use an empty string as key - user will fill it in
+									// The key will be properly set when the user types in the field
+									currentHeaders[""] = ""
+									handleInputChange("openAiHeaders")({
+										target: {
+											value: currentHeaders,
+										},
+									})
+								}}>
+								<span className="codicon codicon-add"></span>
+							</VSCodeButton>
+						</div>
+						{Object.keys(apiConfiguration?.openAiHeaders || {}).length === 0 ? (
+							<div className="text-sm text-vscode-descriptionForeground">
+								{t("settings:providers.noCustomHeaders")}
+							</div>
+						) : (
+							Object.entries(apiConfiguration?.openAiHeaders || {}).map(([key, value], index) => (
+								<div key={index} className="flex items-center mb-2">
+									<VSCodeTextField
+										value={key}
+										className="flex-1 mr-2"
+										placeholder={t("settings:providers.headerName")}
+										onInput={(e: any) => {
+											const currentHeaders = apiConfiguration?.openAiHeaders ?? {}
+											const newValue = e.target.value
+
+											if (newValue && newValue !== key) {
+												const { [key]: _, ...rest } = currentHeaders
+												handleInputChange("openAiHeaders")({
+													target: {
+														value: {
+															...rest,
+															[newValue]: value,
+														},
+													},
+												})
+											}
+										}}
+									/>
+									<VSCodeTextField
+										value={value}
+										className="flex-1 mr-2"
+										placeholder={t("settings:providers.headerValue")}
+										onInput={(e: any) => {
+											handleInputChange("openAiHeaders")({
+												target: {
+													value: {
+														...(apiConfiguration?.openAiHeaders ?? {}),
+														[key]: e.target.value,
+													},
+												},
+											})
+										}}
+									/>
+									<VSCodeButton
+										appearance="icon"
+										title={t("settings:common.remove")}
+										onClick={() => {
+											const { [key]: _, ...rest } = apiConfiguration?.openAiHeaders ?? {}
+
+											// Ensure we always maintain an empty object even when removing the last header
+											// This prevents the field from becoming undefined or null
+											const newHeaders = Object.keys(rest).length === 0 ? {} : rest
+
+											handleInputChange("openAiHeaders")({
+												target: {
+													value: newHeaders,
+												},
+											})
+										}}>
+										<span className="codicon codicon-trash"></span>
+									</VSCodeButton>
+								</div>
+							))
 						)}
 					</div>