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

> Configure AI providers for Screenshot-to-Code by setting required environment variables like OPENAI API KEY, ANTHROPIC API KEY, or GEMINI API KEY through your .env file or frontend settings.

- Repository: [Abi Raja/screenshot-to-code](https://github.com/abi/screenshot-to-code)
- Tags: how-to-guide
- Published: 2026-03-02

---

**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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/backend/agent/providers/openai.py) and validated during request handling in [`backend/routes/generate_code.py`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/backend/agent/providers/anthropic.py) and checked by the model selector in [`backend/routes/generate_code.py`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/backend/agent/providers/gemini.py) and consults it during the model-selection stage in [`backend/routes/generate_code.py`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/backend/routes/generate_code.py), the `_get_from_settings_dialog_or_env` method extracts parameters using this hierarchy:

```python

# 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:

```python

# 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:

```python

# 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.

```bash

# 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`:

```python

# 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:

```python

# 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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/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`](https://github.com/abi/screenshot-to-code/blob/main/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.