Add api key for litellm api provider #1766 (#1767)

* Add api key for litellm api provider

* Added Changeset

* Update litellm.ts

* Update ApiOptions.tsx

---------

Co-authored-by: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>

.changeset/slimy-toes-wait.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added api key field for litellm api provider in settings

src/api/providers/litellm.ts

@@ -13,7 +13,7 @@ export class LiteLlmHandler implements ApiHandler {
 		this.options = options
 		this.client = new OpenAI({
 			baseURL: this.options.liteLlmBaseUrl || "http://localhost:4000",
-			apiKey: "not-needed",
+			apiKey: this.options.liteLlmApiKey || "noop",
 		})
 	}
 

src/core/webview/ClineProvider.ts

@@ -49,6 +49,7 @@ type SecretKey =
 	| "togetherApiKey"
 	| "qwenApiKey"
 	| "mistralApiKey"
+	| "liteLlmApiKey"
 	| "authToken"
 	| "authNonce"
 type GlobalStateKey =
@@ -334,15 +335,15 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 
 		// Use a nonce to only allow a specific script to be run.
 		/*
-        content security policy of your webview to only allow scripts that have a specific nonce
-        create a content security policy meta tag so that only loading scripts with a nonce is allowed
-        As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicity allow for these resources. E.g.
-                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
+				content security policy of your webview to only allow scripts that have a specific nonce
+				create a content security policy meta tag so that only loading scripts with a nonce is allowed
+				As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicity allow for these resources. E.g.
+								<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
 		- 'unsafe-inline' is required for styles due to vscode-webview-toolkit's dynamic style injection
 		- since we pass base64 images to the webview, we need to specify img-src ${webview.cspSource} data:;
 
-        in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
-        */
+				in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
+				*/
 		const nonce = getNonce()
 
 		// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
@@ -462,6 +463,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 								vsCodeLmModelSelector,
 								liteLlmBaseUrl,
 								liteLlmModelId,
+								liteLlmApiKey,
 								qwenApiLine,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
@@ -492,6 +494,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							await this.storeSecret("togetherApiKey", togetherApiKey)
 							await this.storeSecret("qwenApiKey", qwenApiKey)
 							await this.storeSecret("mistralApiKey", mistralApiKey)
+							await this.storeSecret("liteLlmApiKey", liteLlmApiKey)
 							await this.updateGlobalState("azureApiVersion", azureApiVersion)
 							await this.updateGlobalState("openRouterModelId", openRouterModelId)
 							await this.updateGlobalState("openRouterModelInfo", openRouterModelInfo)
@@ -1416,6 +1419,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			previousModeModelId,
 			previousModeModelInfo,
 			qwenApiLine,
+			liteLlmApiKey,
 		] = await Promise.all([
 			this.getGlobalState("apiProvider") as Promise<ApiProvider | undefined>,
 			this.getGlobalState("apiModelId") as Promise<string | undefined>,
@@ -1465,6 +1469,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("previousModeModelId") as Promise<string | undefined>,
 			this.getGlobalState("previousModeModelInfo") as Promise<ModelInfo | undefined>,
 			this.getGlobalState("qwenApiLine") as Promise<string | undefined>,
+			this.getSecret("liteLlmApiKey") as Promise<string | undefined>,
 		])
 
 		let apiProvider: ApiProvider
@@ -1525,6 +1530,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 				o3MiniReasoningEffort,
 				liteLlmBaseUrl,
 				liteLlmModelId,
+				liteLlmApiKey,
 			},
 			lastShownAnnouncementId,
 			customInstructions,
@@ -1617,6 +1623,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			"togetherApiKey",
 			"qwenApiKey",
 			"mistralApiKey",
+			"liteLlmApiKey",
 			"authToken",
 		]
 		for (const key of secretKeys) {

src/shared/api.ts

@@ -21,6 +21,7 @@ export interface ApiHandlerOptions {
 	apiKey?: string // anthropic
 	liteLlmBaseUrl?: string
 	liteLlmModelId?: string
+	liteLlmApiKey?: string
 	anthropicBaseUrl?: string
 	openRouterApiKey?: string
 	openRouterModelId?: string

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

@@ -900,6 +900,14 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
 
 			{selectedProvider === "litellm" && (
 				<div>
+					<VSCodeTextField
+						value={apiConfiguration?.liteLlmApiKey || ""}
+						style={{ width: "100%" }}
+						type="password"
+						onInput={handleInputChange("liteLlmApiKey")}
+						placeholder="Default: noop">
+						<span style={{ fontWeight: 500 }}>API Key</span>
+					</VSCodeTextField>
 					<VSCodeTextField
 						value={apiConfiguration?.liteLlmBaseUrl || ""}
 						style={{ width: "100%" }}

webview-ui/src/context/ExtensionStateContext.tsx

@@ -65,6 +65,7 @@ export const ExtensionStateContextProvider: React.FC<{
 							config.openAiApiKey,
 							config.ollamaModelId,
 							config.lmStudioModelId,
+							config.liteLlmApiKey,
 							config.geminiApiKey,
 							config.openAiNativeApiKey,
 							config.deepSeekApiKey,