Environment Variables Required for Configuring AI Providers in Screenshot-to-Code

To configure AI providers in Screenshot-to-Code, set OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY, or REPLICATE_API_KEY in your backend .env file or via the frontend settings dialog.

The Screenshot-to-Code repository by abi uses environment variables to authenticate with large language model (LLM) providers and image-processing services. These variables are centrally defined in backend/config.py and consumed by provider-specific wrappers and route handlers throughout the FastAPI backend.

Required Environment Variables by Provider

Each supported AI service requires a specific API key environment variable to be set before the backend can initialize the corresponding client.

OpenAI (OPENAI_API_KEY)

The OPENAI_API_KEY is the primary credential for GPT-4 Vision and other OpenAI models. According to backend/config.py (lines 7‑11), this variable is mandatory for OpenAI-based code generation.

The key is passed to the AsyncOpenAI client in backend/agent/providers/openai.py and validated during request handling in backend/routes/generate_code.py. If you are running a non-production deployment (IS_PROD is false), you can optionally specify OPENAI_BASE_URL to redirect requests to a custom endpoint such as Azure OpenAI.

Anthropic (ANTHROPIC_API_KEY)

To use Claude models, you must provide the ANTHROPIC_API_KEY. This variable is injected into the Anthropic provider wrapper located at backend/agent/providers/anthropic.py and checked by the model selector in backend/routes/generate_code.py.

Google Gemini (GEMINI_API_KEY)

The GEMINI_API_KEY enables Gemini-based models, including video processing capabilities. The backend loads this key in backend/agent/providers/gemini.py and consults it during the model-selection stage in backend/routes/generate_code.py.

Replicate (REPLICATE_API_KEY)

For optional image background removal functionality, the backend requires the REPLICATE_API_KEY. This key is consumed by the runtime tool helper in backend/agent/tools/runtime.py. If the variable is unset, the background removal tool is automatically disabled and returns an error message to the client.

Variable Priority: Environment vs. Settings Dialog

The backend supports runtime API key injection through the frontend settings dialog, taking precedence over environment variables. In backend/routes/generate_code.py, the _get_from_settings_dialog_or_env method extracts parameters using this hierarchy:

# backend/routes/generate_code.py – Parameter extraction

openai_api_key = self._get_from_settings_dialog_or_env(params, "openAiApiKey", OPENAI_API_KEY)
anthropic_api_key = self._get_from_settings_dialog_or_env(params, "anthropicApiKey", ANTHROPIC_API_KEY)

If a key is supplied via the web UI, that value overrides the corresponding environment variable. This allows users to switch providers without restarting the backend server.

Model Selection and Validation Logic

The backend validates the presence of API keys before attempting generation. If none of the primary LLM keys are detected, the system raises a user-friendly error:

# backend/routes/generate_code.py (excerpt)

await self.throw_error(
    "No OpenAI, Anthropic, or Gemini API key found. Please add the environment variable "
    "OPENAI_API_KEY, ANTHROPIC_API_KEY, or GEMINI_API_KEY to backend/.env or in the settings dialog."
)

Based on which keys are available, the backend filters the model roster:

# backend/routes/generate_code.py (excerpt)

if gemini_api_key and anthropic_api_key and openai_api_key:
    models = list(ALL_KEYS_MODELS_TEXT_CREATE)
elif gemini_api_key and anthropic_api_key:
    models = list(GEMINI_ANTHROPIC_MODELS)
elif gemini_api_key and openai_api_key:
    models = list(GEMINI_OPENAI_MODELS)

Configuring the Backend Environment File

For local development, create a .env file inside the backend/ directory. The Poetry-managed FastAPI server automatically loads these variables on startup.

# backend/.env

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxx
ANTHROPIC_API_KEY=sk-ant-api03-xxxxxxxxxxxxxxxxxxxxxxxxxxxx
GEMINI_API_KEY=AIzaSyxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REPLICATE_API_KEY=r8_xxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Optional – for Azure OpenAI or custom endpoints

OPENAI_BASE_URL=https://my-azure-openai.openai.azure.com/

The central configuration module reads these values using os.getenv:

# backend/config.py

import os

OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
ANTHROPIC_API_KEY = os.getenv("ANTHROPIC_API_KEY")
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
REPLICATE_API_KEY = os.getenv("REPLICATE_API_KEY")
OPENAI_BASE_URL = os.getenv("OPENAI_BASE_URL")

When instantiating the OpenAI client, the backend passes both the key and the optional base URL:

# backend/agent/providers/openai.py (excerpt)

client = AsyncOpenAI(
    api_key=self.openai_api_key,
    base_url=self.openai_base_url,   # None if not set, uses default endpoint

)

Summary

• OPENAI_API_KEY is required for OpenAI GPT models, with optional OPENAI_BASE_URL for custom endpoints.
• ANTHROPIC_API_KEY and GEMINI_API_KEY are required for Claude and Gemini models respectively.
• REPLICATE_API_KEY enables background removal; without it, the tool returns an error.
• The backend checks backend/config.py for variable definitions and prioritizes frontend settings over environment variables.
• Missing keys trigger a validation error in backend/routes/generate_code.py before any generation begins.

Frequently Asked Questions

Can I use multiple AI providers simultaneously?

Yes. If you provide multiple API keys (for example, both OPENAI_API_KEY and ANTHROPIC_API_KEY), the backend exposes models from all available providers. The specific model used depends on the selection logic in backend/routes/generate_code.py, which constructs the available model list based on the combination of keys detected.

How do I configure Azure OpenAI instead of the standard OpenAI endpoint?

Set the OPENAI_API_KEY to your Azure API key and define OPENAI_BASE_URL pointing to your Azure OpenAI deployment URL (e.g., https://my-resource.openai.azure.com/). The backend applies the custom base URL when OPENAI_BASE_URL is present and IS_PROD is false, as implemented in the OpenAI provider initialization code.

What happens if I don't set the Replicate API key?

The background removal feature is gracefully disabled. In backend/agent/tools/runtime.py, the code checks for REPLICATE_API_KEY before executing the API call. If the variable is missing, the function returns a JSON error object indicating that the feature requires the key, allowing the rest of the generation pipeline to continue.

Can I override environment variables without restarting the server?

Yes. The backend reads API keys from the incoming request parameters via the _get_from_settings_dialog_or_env helper. If a user provides a key through the frontend settings dialog, that value overrides the environment variable for that specific request, enabling dynamic provider switching without server redeployment.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}