From ca4ad1d0b321154677f831a8343fdf7f01625f55 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 7 Sep 2024 07:31:29 -0400
Subject: [PATCH] Add anthropicBaseUrl option

---
 src/api/anthropic.ts                     |  5 +++-
 src/providers/ClaudeDevProvider.ts       |  6 +++++
 src/shared/api.ts                        |  1 +
 webview-ui/src/components/ApiOptions.tsx | 29 +++++++++++++++++++++++-
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/api/anthropic.ts b/src/api/anthropic.ts
index f43496fc96..a5368c5a2e 100644
--- a/src/api/anthropic.ts
+++ b/src/api/anthropic.ts
@@ -8,7 +8,10 @@ export class AnthropicHandler implements ApiHandler {
 
 	constructor(options: ApiHandlerOptions) {
 		this.options = options
-		this.client = new Anthropic({ apiKey: this.options.apiKey })
+		this.client = new Anthropic({
+			apiKey: this.options.apiKey,
+			baseURL: this.options.anthropicBaseUrl || undefined,
+		})
 	}
 
 	async createMessage(
diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts
index ae10d72c63..734af17004 100644
--- a/src/providers/ClaudeDevProvider.ts
+++ b/src/providers/ClaudeDevProvider.ts
@@ -32,6 +32,7 @@ type GlobalStateKey =
 	| "openAiModelId"
 	| "ollamaModelId"
 	| "ollamaBaseUrl"
+	| "anthropicBaseUrl"
 
 export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	public static readonly sideBarId = "claude-dev.SidebarProvider" // used in package.json as the view's id. This value cannot be changed due to how vscode caches views based on their id, and updating the id would break existing instances of the extension.
@@ -326,6 +327,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 								openAiModelId,
 								ollamaModelId,
 								ollamaBaseUrl,
+								anthropicBaseUrl,
 							} = message.apiConfiguration
 							await this.updateGlobalState("apiProvider", apiProvider)
 							await this.updateGlobalState("apiModelId", apiModelId)
@@ -342,6 +344,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 							await this.updateGlobalState("openAiModelId", openAiModelId)
 							await this.updateGlobalState("ollamaModelId", ollamaModelId)
 							await this.updateGlobalState("ollamaBaseUrl", ollamaBaseUrl)
+							await this.updateGlobalState("anthropicBaseUrl", anthropicBaseUrl)
 							this.claudeDev?.updateApi(message.apiConfiguration)
 						}
 						await this.postStateToWebview()
@@ -656,6 +659,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			openAiModelId,
 			ollamaModelId,
 			ollamaBaseUrl,
+			anthropicBaseUrl,
 			lastShownAnnouncementId,
 			customInstructions,
 			alwaysAllowReadOnly,
@@ -676,6 +680,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 			this.getGlobalState("openAiModelId") as Promise<string | undefined>,
 			this.getGlobalState("ollamaModelId") as Promise<string | undefined>,
 			this.getGlobalState("ollamaBaseUrl") as Promise<string | undefined>,
+			this.getGlobalState("anthropicBaseUrl") as Promise<string | undefined>,
 			this.getGlobalState("lastShownAnnouncementId") as Promise<string | undefined>,
 			this.getGlobalState("customInstructions") as Promise<string | undefined>,
 			this.getGlobalState("alwaysAllowReadOnly") as Promise<boolean | undefined>,
@@ -713,6 +718,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 				openAiModelId,
 				ollamaModelId,
 				ollamaBaseUrl,
+				anthropicBaseUrl,
 			},
 			lastShownAnnouncementId,
 			customInstructions,
diff --git a/src/shared/api.ts b/src/shared/api.ts
index fa71b1827e..0d64a786d9 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -3,6 +3,7 @@ export type ApiProvider = "anthropic" | "openrouter" | "bedrock" | "vertex" | "o
 export interface ApiHandlerOptions {
 	apiModelId?: string
 	apiKey?: string // anthropic
+	anthropicBaseUrl?: string
 	openRouterApiKey?: string
 	awsAccessKey?: string
 	awsSecretKey?: string
diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx
index c207894c01..81f49504f3 100644
--- a/webview-ui/src/components/ApiOptions.tsx
+++ b/webview-ui/src/components/ApiOptions.tsx
@@ -5,6 +5,7 @@ import {
 	VSCodeRadio,
 	VSCodeRadioGroup,
 	VSCodeTextField,
+	VSCodeCheckbox,
 } from "@vscode/webview-ui-toolkit/react"
 import { memo, useCallback, useEffect, useMemo, useState } from "react"
 import {
@@ -34,6 +35,7 @@ interface ApiOptionsProps {
 const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 	const { apiConfiguration, setApiConfiguration, uriScheme } = useExtensionState()
 	const [ollamaModels, setOllamaModels] = useState<string[]>([])
+	const [anthropicBaseUrlSelected, setAnthropicBaseUrlSelected] = useState(!!apiConfiguration?.anthropicBaseUrl)
 
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		setApiConfiguration({ ...apiConfiguration, [field]: event.target.value })
@@ -126,10 +128,35 @@ const ApiOptions = ({ showModelOptions, apiErrorMessage }: ApiOptionsProps) => {
 						placeholder="Enter API Key...">
 						<span style={{ fontWeight: 500 }}>Anthropic API Key</span>
 					</VSCodeTextField>
+
+					<div style={{ marginTop: 2 }}>
+						<VSCodeCheckbox
+							checked={anthropicBaseUrlSelected}
+							onChange={(e: any) => {
+								const isChecked = e.target.checked === true
+								setAnthropicBaseUrlSelected(isChecked)
+								if (!isChecked) {
+									setApiConfiguration({ ...apiConfiguration, anthropicBaseUrl: "" })
+								}
+							}}>
+							Use custom base URL
+						</VSCodeCheckbox>
+					</div>
+
+					{anthropicBaseUrlSelected && (
+						<VSCodeTextField
+							value={apiConfiguration?.anthropicBaseUrl || ""}
+							style={{ width: "100%", marginTop: 2 }}
+							type="url"
+							onInput={handleInputChange("anthropicBaseUrl")}
+							placeholder="Default: https://api.anthropic.com"
+						/>
+					)}
+
 					<p
 						style={{
 							fontSize: "12px",
-							marginTop: "5px",
+							marginTop: 3,
 							color: "var(--vscode-descriptionForeground)",
 						}}>
 						This key is stored locally and only used to make API requests from this extension.