Allow setting extra headers for openai compatible api (RooCodeInc#1136)

* Allow setting extra headers for openai compatible api

* Fix to the extra headers form

* Properly store header state

* fix prettier

* Cleanup styles

---------

Co-authored-by: mbradshaw <[email protected]>
Co-authored-by: frostbournesb <[email protected]>

Author: 3 people

src/api/providers/openai.ts

@@ -21,11 +21,13 @@ export class OpenAiHandler implements ApiHandler {
 				baseURL: this.options.openAiBaseUrl,
 				apiKey: this.options.openAiApiKey,
 				apiVersion: this.options.azureApiVersion || azureOpenAiDefaultApiVersion,
+				defaultHeaders: this.options.openAiHeaders,
 			})
 		} else {
 			this.client = new OpenAI({
 				baseURL: this.options.openAiBaseUrl,
 				apiKey: this.options.openAiApiKey,
+				defaultHeaders: this.options.openAiHeaders,
 			})
 		}
 	}

src/core/storage/state-keys.ts

@@ -37,6 +37,7 @@ export type GlobalStateKey =
 	| "openAiBaseUrl"
 	| "openAiModelId"
 	| "openAiModelInfo"
+	| "openAiHeaders"
 	| "ollamaModelId"
 	| "ollamaBaseUrl"
 	| "ollamaApiOptionsCtxNum"

src/core/storage/state.ts

@@ -73,6 +73,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		openAiApiKey,
 		openAiModelId,
 		openAiModelInfo,
+		openAiHeaders,
 		ollamaModelId,
 		ollamaBaseUrl,
 		ollamaApiOptionsCtxNum,
@@ -144,6 +145,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 		getSecret(context, "openAiApiKey") as Promise<string | undefined>,
 		getGlobalState(context, "openAiModelId") as Promise<string | undefined>,
 		getGlobalState(context, "openAiModelInfo") as Promise<ModelInfo | undefined>,
+		getGlobalState(context, "openAiHeaders") as Promise<Record<string, string> | undefined>,
 		getGlobalState(context, "ollamaModelId") as Promise<string | undefined>,
 		getGlobalState(context, "ollamaBaseUrl") as Promise<string | undefined>,
 		getGlobalState(context, "ollamaApiOptionsCtxNum") as Promise<string | undefined>,
@@ -256,6 +258,7 @@ export async function getAllExtensionState(context: vscode.ExtensionContext) {
 			openAiApiKey,
 			openAiModelId,
 			openAiModelInfo,
+			openAiHeaders: openAiHeaders || {},
 			ollamaModelId,
 			ollamaBaseUrl,
 			ollamaApiOptionsCtxNum,
@@ -334,6 +337,7 @@ export async function updateApiConfiguration(context: vscode.ExtensionContext, a
 		openAiApiKey,
 		openAiModelId,
 		openAiModelInfo,
+		openAiHeaders,
 		ollamaModelId,
 		ollamaBaseUrl,
 		ollamaApiOptionsCtxNum,
@@ -389,6 +393,7 @@ export async function updateApiConfiguration(context: vscode.ExtensionContext, a
 	await storeSecret(context, "openAiApiKey", openAiApiKey)
 	await updateGlobalState(context, "openAiModelId", openAiModelId)
 	await updateGlobalState(context, "openAiModelInfo", openAiModelInfo)
+	await updateGlobalState(context, "openAiHeaders", openAiHeaders || {})
 	await updateGlobalState(context, "ollamaModelId", ollamaModelId)
 	await updateGlobalState(context, "ollamaBaseUrl", ollamaBaseUrl)
 	await updateGlobalState(context, "ollamaApiOptionsCtxNum", ollamaApiOptionsCtxNum)

src/shared/api.ts

@@ -32,6 +32,7 @@ export interface ApiHandlerOptions {
 	liteLlmModelId?: string
 	liteLlmApiKey?: string
 	liteLlmUsePromptCache?: boolean
+	openAiHeaders?: Record<string, string> // Custom headers for OpenAI requests
 	anthropicBaseUrl?: string
 	openRouterApiKey?: string
 	openRouterModelId?: string

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

@@ -1,4 +1,5 @@
 import {
+	VSCodeButton,
 	VSCodeCheckbox,
 	VSCodeDropdown,
 	VSCodeLink,
@@ -803,27 +804,107 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 				<div>
 					<VSCodeTextField
 						value={apiConfiguration?.openAiBaseUrl || ""}
-						style={{ width: "100%" }}
+						style={{ width: "100%", marginBottom: 10 }}
 						type="url"
 						onInput={handleInputChange("openAiBaseUrl")}
 						placeholder={"Enter base URL..."}>
 						<span style={{ fontWeight: 500 }}>Base URL</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.openAiApiKey || ""}
-						style={{ width: "100%" }}
+						style={{ width: "100%", marginBottom: 10 }}
 						type="password"
 						onInput={handleInputChange("openAiApiKey")}
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>API Key</span>
 					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.openAiModelId || ""}
-						style={{ width: "100%" }}
+						style={{ width: "100%", marginBottom: 10 }}
 						onInput={handleInputChange("openAiModelId")}
 						placeholder={"Enter Model ID..."}>
 						<span style={{ fontWeight: 500 }}>Model ID</span>
 					</VSCodeTextField>
+
+					{/* OpenAI Compatible Custom Headers */}
+					{(() => {
+						const headerEntries = Object.entries(apiConfiguration?.openAiHeaders ?? {})
+						return (
+							<div style={{ marginBottom: 10 }}>
+								<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+									<span style={{ fontWeight: 500 }}>Custom Headers</span>
+									<VSCodeButton
+										onClick={() => {
+											const currentHeaders = { ...(apiConfiguration?.openAiHeaders || {}) }
+											const headerCount = Object.keys(currentHeaders).length
+											const newKey = `header${headerCount + 1}`
+											currentHeaders[newKey] = ""
+											handleInputChange("openAiHeaders")({
+												target: {
+													value: currentHeaders,
+												},
+											})
+										}}>
+										Add Header
+									</VSCodeButton>
+								</div>
+								<div>
+									{headerEntries.map(([key, value], index) => (
+										<div key={index} style={{ display: "flex", gap: 5, marginTop: 5 }}>
+											<VSCodeTextField
+												value={key}
+												style={{ width: "40%" }}
+												placeholder="Header name"
+												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}
+												style={{ width: "40%" }}
+												placeholder="Header value"
+												onInput={(e: any) => {
+													handleInputChange("openAiHeaders")({
+														target: {
+															value: {
+																...(apiConfiguration?.openAiHeaders ?? {}),
+																[key]: e.target.value,
+															},
+														},
+													})
+												}}
+											/>
+											<VSCodeButton
+												appearance="secondary"
+												onClick={() => {
+													const { [key]: _, ...rest } = apiConfiguration?.openAiHeaders ?? {}
+													handleInputChange("openAiHeaders")({
+														target: {
+															value: rest,
+														},
+													})
+												}}>
+												Remove
+											</VSCodeButton>
+										</div>
+									))}
+								</div>
+							</div>
+						)
+					})()}
+
 					<VSCodeCheckbox
 						checked={azureApiVersionSelected}
 						onChange={(e: any) => {