Pass API keys for docker build

docker/.env.example

@@ -0,0 +1,27 @@
+# Environment variables for Browser Operator DevTools
+# Copy this file to .env and set your API keys
+
+# OpenAI API Key (for GPT models)
+OPENAI_API_KEY=sk-your-openai-api-key-here
+
+# OpenRouter API Key (for multiple LLM providers)
+OPENROUTER_API_KEY=sk-or-your-openrouter-api-key-here
+
+# Groq API Key (for fast inference)
+GROQ_API_KEY=gsk_your-groq-api-key-here
+
+# LiteLLM API Key (for self-hosted LLM proxy)
+LITELLM_API_KEY=your-litellm-api-key-here
+
+# Usage:
+# 1. Copy this file: cp .env.example .env
+# 2. Set your API keys in the .env file
+# 3. Build and run: docker-compose up --build
+#
+# The API keys will be embedded into the Docker image during build time
+# and used as fallbacks when localStorage is empty.
+#
+# Priority order:
+# 1. localStorage (user settings in DevTools)
+# 2. Environment variables (this .env file)
+# 3. Empty (no API key configured)

docker/Dockerfile

@@ -1,6 +1,10 @@
 # Multi-stage build for Chrome DevTools Frontend
 FROM --platform=linux/amd64 ubuntu:22.04 AS builder
 
+# BuildKit is required for secret mounting
+# Secrets are mounted at build time but not stored in layers
+# Usage: DOCKER_BUILDKIT=1 docker-compose build
+
 # Install required packages
 RUN apt-get update && apt-get install -y \
     curl \
@@ -47,7 +51,12 @@ RUN git remote add upstream https://github.com/BrowserOperator/browser-operator-
 RUN git fetch upstream
 RUN git checkout upstream/main
 
-# Build Browser Operator version
+# Copy our local modifications into the container
+COPY front_end/panels/ai_chat/core/EnvironmentConfig.ts /workspace/devtools/devtools-frontend/front_end/panels/ai_chat/core/EnvironmentConfig.ts
+COPY front_end/panels/ai_chat/ui/SettingsDialog.ts /workspace/devtools/devtools-frontend/front_end/panels/ai_chat/ui/SettingsDialog.ts  
+COPY front_end/entrypoints/devtools_app/devtools_app.ts /workspace/devtools/devtools-frontend/front_end/entrypoints/devtools_app/devtools_app.ts
+
+# Build Browser Operator version with our modifications
 RUN npm run build
 
 # Production stage
@@ -59,4 +68,11 @@ COPY --from=builder /workspace/devtools/devtools-frontend/out/Default/gen/front_
 # Copy nginx config
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 8000
+# Copy and setup entrypoint script for runtime configuration
+COPY docker/docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
+EXPOSE 8000
+
+# Use entrypoint to generate runtime config and start nginx
+ENTRYPOINT ["/docker-entrypoint.sh"]

docker/docker-compose.yml

@@ -10,13 +10,20 @@ services:
     ports:
       - "8000:8000"
     restart: unless-stopped
-    volumes:
+    # volumes:
       # For development: mount the built files directly (optional)
-      # Uncomment the line below to use local files instead of container files
-      # - ../out/Default/gen/front_end:/usr/share/nginx/html:ro
+      # Uncomment the lines below to use local files instead of container files
+      # volumes:
+      #   - ../out/Default/gen/front_end:/usr/share/nginx/html:ro
     environment:
       - NGINX_HOST=localhost
       - NGINX_PORT=8000
+      # Runtime API key injection - keys are passed to container at runtime
+      # These are injected into the DevTools frontend via runtime-config.js
+      - OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
+      - GROQ_API_KEY=${GROQ_API_KEY:-}
+      - LITELLM_API_KEY=${LITELLM_API_KEY:-}
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8000/"]
       interval: 30s

docker/docker-entrypoint.sh

@@ -0,0 +1,65 @@
+#!/bin/sh
+# Docker entrypoint script for Browser Operator DevTools
+# This script generates runtime configuration from environment variables
+# and starts nginx to serve the DevTools frontend
+
+set -e
+
+# Log configuration status to container logs
+echo "DevTools runtime configuration generated:"
+[ -n "${OPENAI_API_KEY}" ] && echo "  ✓ OPENAI_API_KEY configured" || echo "  ✗ OPENAI_API_KEY not set"
+[ -n "${OPENROUTER_API_KEY}" ] && echo "  ✓ OPENROUTER_API_KEY configured" || echo "  ✗ OPENROUTER_API_KEY not set"
+[ -n "${GROQ_API_KEY}" ] && echo "  ✓ GROQ_API_KEY configured" || echo "  ✗ GROQ_API_KEY not set"
+[ -n "${LITELLM_API_KEY}" ] && echo "  ✓ LITELLM_API_KEY configured" || echo "  ✗ LITELLM_API_KEY not set"
+
+# Inject API keys directly into DevTools JavaScript files
+echo "🔧 Injecting API keys directly into JavaScript files..."
+
+# Find and modify the main DevTools entry point files
+for js_file in /usr/share/nginx/html/entrypoints/*/devtools_app.js /usr/share/nginx/html/entrypoints/*/inspector_main.js; do
+  if [ -f "$js_file" ]; then
+    echo "  ✓ Injecting into $(basename "$js_file")"
+    # Inject a global configuration object at the beginning of the file
+    sed -i '1i\
+// Runtime API key injection\
+window.__RUNTIME_CONFIG__ = {\
+  OPENAI_API_KEY: "'"${OPENAI_API_KEY:-}"'",\
+  OPENROUTER_API_KEY: "'"${OPENROUTER_API_KEY:-}"'",\
+  GROQ_API_KEY: "'"${GROQ_API_KEY:-}"'",\
+  LITELLM_API_KEY: "'"${LITELLM_API_KEY:-}"'",\
+  timestamp: "'"$(date -Iseconds)"'",\
+  source: "docker-runtime"\
+};\
+// Auto-save to localStorage\
+if (window.__RUNTIME_CONFIG__.OPENAI_API_KEY) localStorage.setItem("ai_chat_api_key", window.__RUNTIME_CONFIG__.OPENAI_API_KEY);\
+if (window.__RUNTIME_CONFIG__.OPENROUTER_API_KEY) localStorage.setItem("ai_chat_openrouter_api_key", window.__RUNTIME_CONFIG__.OPENROUTER_API_KEY);\
+if (window.__RUNTIME_CONFIG__.GROQ_API_KEY) localStorage.setItem("ai_chat_groq_api_key", window.__RUNTIME_CONFIG__.GROQ_API_KEY);\
+if (window.__RUNTIME_CONFIG__.LITELLM_API_KEY) localStorage.setItem("ai_chat_litellm_api_key", window.__RUNTIME_CONFIG__.LITELLM_API_KEY);\
+console.log("[RUNTIME-CONFIG] API keys injected directly into JavaScript:", {hasOpenAI: !!window.__RUNTIME_CONFIG__.OPENAI_API_KEY, hasOpenRouter: !!window.__RUNTIME_CONFIG__.OPENROUTER_API_KEY, hasGroq: !!window.__RUNTIME_CONFIG__.GROQ_API_KEY, hasLiteLLM: !!window.__RUNTIME_CONFIG__.LITELLM_API_KEY});\
+' "$js_file"
+  fi
+done
+
+# Also inject into AI Chat panel files specifically
+for js_file in /usr/share/nginx/html/panels/ai_chat/*.js; do
+  if [ -f "$js_file" ]; then
+    echo "  ✓ Injecting into AI Chat panel $(basename "$js_file")"
+    sed -i '1i\
+// Runtime API key injection for AI Chat\
+if (typeof window !== "undefined" && !window.__RUNTIME_CONFIG__) {\
+  window.__RUNTIME_CONFIG__ = {\
+    OPENAI_API_KEY: "'"${OPENAI_API_KEY:-}"'",\
+    OPENROUTER_API_KEY: "'"${OPENROUTER_API_KEY:-}"'",\
+    GROQ_API_KEY: "'"${GROQ_API_KEY:-}"'",\
+    LITELLM_API_KEY: "'"${LITELLM_API_KEY:-}"'",\
+    timestamp: "'"$(date -Iseconds)"'",\
+    source: "docker-runtime"\
+  };\
+}\
+' "$js_file"
+  fi
+done
+
+# Start nginx in foreground
+echo "Starting nginx..."
+exec nginx -g 'daemon off;'

front_end/entrypoints/devtools_app/devtools_app.ts

@@ -32,6 +32,9 @@ import '../../panels/ai_chat/ai_chat-meta.js';
 import * as Root from '../../core/root/root.js';
 import * as Main from '../main/main.js';
 
+// Runtime config is loaded via HTML script injection (docker-entrypoint.sh)
+// No need for dynamic loading since it's already in the HTML head
+
 // @ts-expect-error Exposed for legacy layout tests
 self.runtime = Root.Runtime.Runtime.instance({forceNew: true});
 new Main.MainImpl.MainImpl();

front_end/panels/ai_chat/BUILD.gn

@@ -28,6 +28,7 @@ devtools_module("ai_chat") {
     "core/Types.ts",
     "core/AgentService.ts",
     "core/Constants.ts",
+    "core/EnvironmentConfig.ts",
     "core/GraphConfigs.ts",
     "core/ConfigurableGraph.ts",
     "core/BaseOrchestratorAgent.ts",
@@ -133,6 +134,7 @@ _ai_chat_sources = [
     "core/Types.ts",
     "core/AgentService.ts",
     "core/Constants.ts",
+    "core/EnvironmentConfig.ts",
     "core/GraphConfigs.ts",
     "core/ConfigurableGraph.ts",
     "core/BaseOrchestratorAgent.ts",

front_end/panels/ai_chat/LLM/GroqProvider.ts

@@ -7,6 +7,7 @@ import { LLMBaseProvider } from './LLMProvider.js';
 import { LLMRetryManager } from './LLMErrorHandler.js';
 import { LLMResponseParser } from './LLMResponseParser.js';
 import { createLogger } from '../core/Logger.js';
+import { getEnvironmentConfig } from '../core/EnvironmentConfig.js';
 
 const logger = createLogger('GroqProvider');
 
@@ -38,10 +39,29 @@ export class GroqProvider extends LLMBaseProvider {
 
   readonly name: LLMProvider = 'groq';
 
+  private readonly envConfig = getEnvironmentConfig();
+
   constructor(private readonly apiKey: string) {
     super();
   }
 
+  /**
+   * Get the API key with fallback hierarchy:
+   * 1. Constructor parameter (for backward compatibility)
+   * 2. localStorage (user-configured)
+   * 3. Build-time environment config
+   * 4. Empty string
+   */
+  private getApiKey(): string {
+    // Constructor parameter (highest priority for backward compatibility)
+    if (this.getApiKey() && this.getApiKey().trim() !== '') {
+      return this.getApiKey().trim();
+    }
+
+    // Use environment config which handles localStorage -> build-time -> empty fallback
+    return this.envConfig.getApiKey('groq');
+  }
+
   /**
    * Get the chat completions endpoint URL
    */
@@ -92,7 +112,7 @@ export class GroqProvider extends LLMBaseProvider {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
         body: JSON.stringify(payloadBody),
       });
@@ -259,7 +279,7 @@ export class GroqProvider extends LLMBaseProvider {
       const response = await fetch(this.getModelsEndpoint(), {
         method: 'GET',
         headers: {
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
       });
 
@@ -432,29 +452,15 @@ export class GroqProvider extends LLMBaseProvider {
    * Validate that required credentials are available for Groq
    */
   validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
-    const storageKeys = this.getCredentialStorageKeys();
-    const apiKey = localStorage.getItem(storageKeys.apiKey!);
-
-    if (!apiKey) {
-      return {
-        isValid: false,
-        message: 'Groq API key is required. Please add your API key in Settings.',
-        missingItems: ['API Key']
-      };
-    }
-
-    return {
-      isValid: true,
-      message: 'Groq credentials are configured correctly.'
-    };
+    return this.envConfig.validateCredentials('groq');
   }
 
   /**
    * Get the storage keys this provider uses for credentials
    */
   getCredentialStorageKeys(): {apiKey: string} {
     return {
-      apiKey: 'ai_chat_groq_api_key'
+      apiKey: this.envConfig.getStorageKey('groq')
     };
   }
 }

front_end/panels/ai_chat/LLM/OpenAIProvider.ts

@@ -7,6 +7,7 @@ import { LLMBaseProvider } from './LLMProvider.js';
 import { LLMRetryManager } from './LLMErrorHandler.js';
 import { LLMResponseParser } from './LLMResponseParser.js';
 import { createLogger } from '../core/Logger.js';
+import { getEnvironmentConfig } from '../core/EnvironmentConfig.js';
 
 const logger = createLogger('OpenAIProvider');
 
@@ -42,10 +43,29 @@ export class OpenAIProvider extends LLMBaseProvider {
 
   readonly name: LLMProvider = 'openai';
 
+  private readonly envConfig = getEnvironmentConfig();
+
   constructor(private readonly apiKey: string) {
     super();
   }
 
+  /**
+   * Get the API key with fallback hierarchy:
+   * 1. Constructor parameter (for backward compatibility)
+   * 2. localStorage (user-configured)
+   * 3. Build-time environment config
+   * 4. Empty string
+   */
+  private getApiKey(): string {
+    // Constructor parameter (highest priority for backward compatibility)
+    if (this.apiKey && this.apiKey.trim() !== '') {
+      return this.apiKey.trim();
+    }
+
+    // Use environment config which handles localStorage -> build-time -> empty fallback
+    return this.envConfig.getApiKey('openai');
+  }
+
   /**
    * Determines the model family based on the model name
    */
@@ -280,7 +300,7 @@ export class OpenAIProvider extends LLMBaseProvider {
           metadata: {
             provider: 'openai',
             errorType: 'api_error',
-            hasApiKey: !!this.apiKey
+            hasApiKey: !!this.getApiKey()
           }
         }, context.traceId);
       }
@@ -299,7 +319,7 @@ export class OpenAIProvider extends LLMBaseProvider {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${this.apiKey}`,
+          Authorization: `Bearer ${this.getApiKey()}`,
         },
         body: JSON.stringify(payloadBody),
       });