From e534c3dbc7b6417ae07954795198baf34ccb2449 Mon Sep 17 00:00:00 2001 From: Sanjaykumar S <45158568+SSK-14@users.noreply.github.com> Date: Thu, 13 Feb 2025 00:26:13 +0530 Subject: [PATCH] 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 | 5 +++++ src/api/providers/litellm.ts | 2 +- src/core/webview/ClineProvider.ts | 19 +++++++++++++------ src/shared/api.ts | 1 + .../src/components/settings/ApiOptions.tsx | 8 ++++++++ .../src/context/ExtensionStateContext.tsx | 1 + 6 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 .changeset/slimy-toes-wait.md 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 +