diff --git a/.changeset/slimy-toes-wait.md b/.changeset/slimy-toes-wait.md
new file mode 100644
index 0000000000..059978604f
--- /dev/null
+++ b/.changeset/slimy-toes-wait.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Added api key field for litellm api provider in settings
diff --git a/src/api/providers/litellm.ts b/src/api/providers/litellm.ts
index 80ad5e2c75..2e69c43880 100644
--- a/src/api/providers/litellm.ts
+++ b/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",
})
}
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index 397e11eb80..1977dfaf99 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/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.
-
+ 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.
+
- '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,
this.getGlobalState("apiModelId") as Promise,
@@ -1465,6 +1469,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
this.getGlobalState("previousModeModelId") as Promise,
this.getGlobalState("previousModeModelInfo") as Promise,
this.getGlobalState("qwenApiLine") as Promise,
+ this.getSecret("liteLlmApiKey") as Promise,
])
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) {
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 1297e6b155..0eee68b19e 100644
--- a/src/shared/api.ts
+++ b/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
diff --git a/webview-ui/src/components/settings/ApiOptions.tsx b/webview-ui/src/components/settings/ApiOptions.tsx
index 5e39320092..1633e4abea 100644
--- a/webview-ui/src/components/settings/ApiOptions.tsx
+++ b/webview-ui/src/components/settings/ApiOptions.tsx
@@ -900,6 +900,14 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage, modelIdErrorMessage, is
{selectedProvider === "litellm" && (
+
+ API Key
+