API key from Env Var support

packages/types/src/provider-settings.ts

@@ -83,6 +83,7 @@ const apiModelIdProviderModelSchema = baseProviderSettingsSchema.extend({
 
 const anthropicSchema = apiModelIdProviderModelSchema.extend({
 	apiKey: z.string().optional(),
+	anthropicApiKeyUseEnvVar: z.boolean().optional(),
 	anthropicBaseUrl: z.string().optional(),
 	anthropicUseAuthToken: z.boolean().optional(),
 })
@@ -95,10 +96,12 @@ const claudeCodeSchema = apiModelIdProviderModelSchema.extend({
 const glamaSchema = baseProviderSettingsSchema.extend({
 	glamaModelId: z.string().optional(),
 	glamaApiKey: z.string().optional(),
+	glamaApiKeyUseEnvVar: z.boolean().optional(),
 })
 
 const openRouterSchema = baseProviderSettingsSchema.extend({
 	openRouterApiKey: z.string().optional(),
+	openRouterApiKeyUseEnvVar: z.boolean().optional(),
 	openRouterModelId: z.string().optional(),
 	openRouterBaseUrl: z.string().optional(),
 	openRouterSpecificProvider: z.string().optional(),
@@ -130,6 +133,7 @@ const vertexSchema = apiModelIdProviderModelSchema.extend({
 const openAiSchema = baseProviderSettingsSchema.extend({
 	openAiBaseUrl: z.string().optional(),
 	openAiApiKey: z.string().optional(),
+	openAiApiKeyUseEnvVar: z.boolean().optional(),
 	openAiLegacyFormat: z.boolean().optional(),
 	openAiR1FormatEnabled: z.boolean().optional(),
 	openAiModelId: z.string().optional(),
@@ -166,6 +170,7 @@ const lmStudioSchema = baseProviderSettingsSchema.extend({
 
 const geminiSchema = apiModelIdProviderModelSchema.extend({
 	geminiApiKey: z.string().optional(),
+	geminiApiKeyUseEnvVar: z.boolean().optional(),
 	googleGeminiBaseUrl: z.string().optional(),
 })
 
@@ -176,17 +181,20 @@ const geminiCliSchema = apiModelIdProviderModelSchema.extend({
 
 const openAiNativeSchema = apiModelIdProviderModelSchema.extend({
 	openAiNativeApiKey: z.string().optional(),
+	openAiNativeApiKeyUseEnvVar: z.boolean().optional(),
 	openAiNativeBaseUrl: z.string().optional(),
 })
 
 const mistralSchema = apiModelIdProviderModelSchema.extend({
 	mistralApiKey: z.string().optional(),
+	mistralApiKeyUseEnvVar: z.boolean().optional(),
 	mistralCodestralUrl: z.string().optional(),
 })
 
 const deepSeekSchema = apiModelIdProviderModelSchema.extend({
 	deepSeekBaseUrl: z.string().optional(),
 	deepSeekApiKey: z.string().optional(),
+	deepSeekApiKeyUseEnvVar: z.boolean().optional(),
 })
 
 const moonshotSchema = apiModelIdProviderModelSchema.extend({
@@ -198,11 +206,13 @@ const moonshotSchema = apiModelIdProviderModelSchema.extend({
 
 const unboundSchema = baseProviderSettingsSchema.extend({
 	unboundApiKey: z.string().optional(),
+	unboundApiKeyUseEnvVar: z.boolean().optional(),
 	unboundModelId: z.string().optional(),
 })
 
 const requestySchema = baseProviderSettingsSchema.extend({
 	requestyApiKey: z.string().optional(),
+	requestyApiKeyUseEnvVar: z.boolean().optional(),
 	requestyModelId: z.string().optional(),
 })
 
@@ -214,10 +224,12 @@ const fakeAiSchema = baseProviderSettingsSchema.extend({
 
 const xaiSchema = apiModelIdProviderModelSchema.extend({
 	xaiApiKey: z.string().optional(),
+	xaiApiKeyUseEnvVar: z.boolean().optional(),
 })
 
 const groqSchema = apiModelIdProviderModelSchema.extend({
 	groqApiKey: z.string().optional(),
+	groqApiKeyUseEnvVar: z.boolean().optional(),
 })
 
 const huggingFaceSchema = baseProviderSettingsSchema.extend({
@@ -228,11 +240,13 @@ const huggingFaceSchema = baseProviderSettingsSchema.extend({
 
 const chutesSchema = apiModelIdProviderModelSchema.extend({
 	chutesApiKey: z.string().optional(),
+	chutesApiKeyUseEnvVar: z.boolean().optional(),
 })
 
 const litellmSchema = baseProviderSettingsSchema.extend({
 	litellmBaseUrl: z.string().optional(),
 	litellmApiKey: z.string().optional(),
+	litellmApiKeyUseEnvVar: z.boolean().optional(),
 	litellmModelId: z.string().optional(),
 })
 

scripts/find-missing-translations.js

@@ -8,11 +8,14 @@
  *   --locale=<locale>   Only check a specific locale (e.g. --locale=fr)
  *   --file=<file>       Only check a specific file (e.g. --file=chat.json)
  *   --area=<area>       Only check a specific area (core, webview, or both)
+ *   --create-missing    Creates missing keys in the other locales with the EN value
  *   --help              Show this help message
  */
 
+const { set } = require("@dotenvx/dotenvx")
 const fs = require("fs")
 const path = require("path")
+let createMissing = false
 
 // Process command line arguments
 const args = process.argv.slice(2).reduce(
@@ -30,6 +33,8 @@
 				console.error(`Error: Invalid area '${acc.area}'. Must be 'core', 'webview', or 'both'.`)
 				process.exit(1)
 			}
+		} else if (arg.startsWith("--create-missing")) {
+			createMissing = true
 		}
 		return acc
 	},
@@ -54,6 +59,7 @@
                       'core' = Backend (src/i18n/locales)
                       'webview' = Frontend UI (webview-ui/src/i18n/locales)
                       'both' = Check both areas (default)
+  --create-missing    Creates missing keys in the other locales with the EN value
   --help              Show this help message
 
 Output:
@@ -105,6 +111,27 @@
 	return current
 }
 
+// Set value at a dotted path in an object
+function setValueAtPath(obj, path, value) {
+    const parts = path.split(".")
+    let current = obj
+
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i]
+
+        // If it's the last part, set the value
+        if (i === parts.length - 1) {
+            current[part] = value
+        } else {
+            // If the key doesn't exist or isn't an object, create an empty object
+            if (current[part] === undefined || typeof current[part] !== "object") {
+                current[part] = {}
+            }
+            current = current[part]
+        }
+    }
+}
+
 // Function to check translations for a specific area
 function checkAreaTranslations(area) {
 	const LOCALES_DIR = LOCALES_DIRS[area]
@@ -198,11 +225,17 @@
 						key,
 						englishValue,
 					})
+					if (createMissing === true) {
+						setValueAtPath(localeContent, key, englishValue) // Set the missing key in the locale content
+					}
 				}
 			}
 
 			if (missingKeys.length > 0) {
 				missingTranslations[locale][name] = missingKeys
+				if (createMissing === true) {
+					fs.writeFileSync(localeFilePath, JSON.stringify(localeContent, null, "\t"))
+				}
 			}
 		}
 	}

src/api/index.ts

@@ -61,17 +61,40 @@ export interface ApiHandler {
 	countTokens(content: Array<Anthropic.Messages.ContentBlockParam>): Promise<number>
 }
 
+/**
+ * Read an environment variable value, returning a default value if not set. If neither key nor default is set,
+ * returns undefined
+ * @param key The environment variable key
+ * @param defaultValue The default value to return if the variable is not set
+ * @returns The value of the environment variable or the default value
+ */
+export function getEnvVar(key: string | undefined, defaultValue?: string | undefined): string | undefined {
+	if (key === undefined) {
+		return defaultValue
+	}
+	return process.env[key as string] ?? defaultValue
+}
+
 export function buildApiHandler(configuration: ProviderSettings): ApiHandler {
 	const { apiProvider, ...options } = configuration
 
 	switch (apiProvider) {
 		case "anthropic":
+			if (options.anthropicApiKeyUseEnvVar) {
+				options.apiKey = getEnvVar("ANTHROPIC_API_KEY", options.apiKey)
+			}
 			return new AnthropicHandler(options)
 		case "claude-code":
 			return new ClaudeCodeHandler(options)
 		case "glama":
+			if (options.glamaApiKeyUseEnvVar) {
+				options.glamaApiKey = getEnvVar("GLAMA_API_KEY", options.glamaApiKey)
+			}
 			return new GlamaHandler(options)
 		case "openrouter":
+			if (options.openRouterApiKeyUseEnvVar) {
+				options.openRouterApiKey = getEnvVar("OPEN_ROUTER_API_KEY", options.openRouterApiKey)
+			}
 			return new OpenRouterHandler(options)
 		case "bedrock":
 			return new AwsBedrockHandler(options)
@@ -80,43 +103,75 @@ export function buildApiHandler(configuration: ProviderSettings): ApiHandler {
 				? new AnthropicVertexHandler(options)
 				: new VertexHandler(options)
 		case "openai":
+			if (options.openAiApiKeyUseEnvVar) {
+				options.openAiApiKey = getEnvVar("OPEN_AI_API_KEY", options.openAiApiKey)
+			}
 			return new OpenAiHandler(options)
 		case "ollama":
 			return new OllamaHandler(options)
 		case "lmstudio":
 			return new LmStudioHandler(options)
 		case "gemini":
+			if (options.geminiApiKeyUseEnvVar) {
+				options.geminiApiKey = getEnvVar("GEMINI_API_KEY", options.geminiApiKey)
+			}
 			return new GeminiHandler(options)
 		case "openai-native":
+			if (options.openAiNativeApiKeyUseEnvVar) {
+				options.openAiNativeApiKey = getEnvVar("OPEN_AI_NATIVE_API_KEY", options.openAiNativeApiKey)
+			}
 			return new OpenAiNativeHandler(options)
 		case "deepseek":
+			if (options.deepSeekApiKeyUseEnvVar) {
+				options.deepSeekApiKey = getEnvVar("DEEP_SEEK_API_KEY", options.deepSeekApiKey)
+			}
 			return new DeepSeekHandler(options)
 		case "moonshot":
 			return new MoonshotHandler(options)
 		case "vscode-lm":
 			return new VsCodeLmHandler(options)
 		case "mistral":
+			if (options.mistralApiKeyUseEnvVar) {
+				options.mistralApiKey = getEnvVar("MISTRAL_API_KEY", options.mistralApiKey)
+			}
 			return new MistralHandler(options)
 		case "unbound":
+			if (options.unboundApiKeyUseEnvVar) {
+				options.unboundApiKey = getEnvVar("UNBOUND_API_KEY", options.unboundApiKey)
+			}
 			return new UnboundHandler(options)
 		case "requesty":
+			if (options.requestyApiKeyUseEnvVar) {
+				options.requestyApiKey = getEnvVar("REQUESTY_API_KEY", options.requestyApiKey)
+			}
 			return new RequestyHandler(options)
 		case "human-relay":
 			return new HumanRelayHandler()
 		case "fake-ai":
 			return new FakeAIHandler(options)
 		case "xai":
+			if (options.xaiApiKeyUseEnvVar) {
+				options.xaiApiKey = getEnvVar("XAI_API_KEY", options.xaiApiKey)
+			}
 			return new XAIHandler(options)
 		case "groq":
+			if (options.groqApiKeyUseEnvVar) {
+				options.groqApiKey = getEnvVar("GROQ_API_KEY", options.groqApiKey)
+			}
 			return new GroqHandler(options)
 		case "huggingface":
 			return new HuggingFaceHandler(options)
 		case "chutes":
+			if (options.chutesApiKeyUseEnvVar) {
+				options.chutesApiKey = getEnvVar("CHUTES_API_KEY", options.chutesApiKey)
+			}
 			return new ChutesHandler(options)
 		case "litellm":
+			if (options.litellmApiKeyUseEnvVar) {
+				options.litellmApiKey = getEnvVar("LITELLM_API_KEY", options.litellmApiKey)
+			}
 			return new LiteLLMHandler(options)
 		default:
 			apiProvider satisfies "gemini-cli" | undefined
-			return new AnthropicHandler(options)
 	}
 }

src/core/webview/ClineProvider.ts

@@ -771,6 +771,7 @@ export class ClineProvider
 				window.IMAGES_BASE_URI = "${imagesUri}"
 				window.AUDIO_BASE_URI = "${audioUri}"
 				window.MATERIAL_ICONS_BASE_URI = "${materialIconsUri}"
+				window.PROCESS_ENV = ${JSON.stringify(process.env)}
 			</script>
             <title>Roo Code</title>
           </head>

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

@@ -0,0 +1,68 @@
+import { useState } from "react"
+import { Checkbox } from "vscrui"
+import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButtonLink } from "@src/components/common/VSCodeButtonLink"
+import { t } from "i18next"
+
+type ApiKeyProps = {
+    apiKey: string
+    apiKeyEnvVar: string
+    setApiKey: (value: string) => void
+    setApiKeyUseEnvVar: (value: boolean) => void
+    apiKeyLabel: string
+    apiKeyUseEnvVar: boolean
+    getApiKeyUrl?: string
+    getApiKeyLabel?: string
+    disabled?: boolean
+}
+
+export const ApiKey = ({
+    apiKey,
+    apiKeyEnvVar,
+    setApiKey,
+    setApiKeyUseEnvVar,
+    apiKeyLabel,
+    apiKeyUseEnvVar,
+    getApiKeyUrl,
+    getApiKeyLabel,
+    disabled = false,
+}: ApiKeyProps) => {
+
+    const env = (window as any).PROCESS_ENV || {}
+    const apiKeyEnvVarExists = !!env[apiKeyEnvVar]
+    const [useEnvVar, setUseEnvVar] = useState(apiKeyUseEnvVar && apiKeyEnvVarExists)
+
+    const handleUseEnvVarChange = (checked: boolean) => {
+        setUseEnvVar(checked)
+        setApiKeyUseEnvVar(checked)
+    }
+
+    return (
+        <>
+            <VSCodeTextField
+                value={apiKey || ""}
+                type="password"
+                onInput={e => setApiKey((e.target as HTMLInputElement).value)}
+                placeholder={t("settings:placeholders.apiKey")}
+                className="w-full"
+                disabled={useEnvVar || disabled}>
+                <label className="block font-medium mb-1">{apiKeyLabel}</label>
+            </VSCodeTextField>
+            <div className="text-sm text-vscode-descriptionForeground -mt-2">
+                {t("settings:providers.apiKeyStorageNotice")}
+            </div>
+            <Checkbox
+                checked={useEnvVar}
+                onChange={handleUseEnvVarChange}
+                className="mb-2"
+                disabled={!apiKeyEnvVarExists}>
+                {t("settings:providers.apiKeyUseEnvVar", { name: apiKeyEnvVar })}
+            </Checkbox>
+            {!(apiKey || useEnvVar) && getApiKeyUrl && getApiKeyLabel && (
+                <VSCodeButtonLink href={getApiKeyUrl} appearance="secondary">
+                    {getApiKeyLabel}
+                </VSCodeButtonLink>
+            )}
+        </>
+    )
+}

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

@@ -95,6 +95,7 @@ export interface ApiOptionsProps {
 	fromWelcomeView?: boolean
 	errorMessage: string | undefined
 	setErrorMessage: React.Dispatch<React.SetStateAction<string | undefined>>
+	env?: Record<string, string | undefined>
 }
 
 const ApiOptions = ({
@@ -104,6 +105,7 @@ const ApiOptions = ({
 	fromWelcomeView,
 	errorMessage,
 	setErrorMessage,
+	env = {}
 }: ApiOptionsProps) => {
 	const { t } = useAppTranslation()
 	const { organizationAllowList } = useExtensionState()
@@ -420,7 +422,7 @@ const ApiOptions = ({
 			)}
 
 			{selectedProvider === "anthropic" && (
-				<Anthropic apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField} />
+				<Anthropic apiConfiguration={apiConfiguration} setApiConfigurationField={setApiConfigurationField}/>
 			)}
 
 			{selectedProvider === "claude-code" && (