# Screenshot-to-Code Backend Configuration Options: Complete Environment Variable Guide

> Explore screenshot-to-code backend configuration options. Learn about environment variables for AI provider selection, generation parameters, debug output, and production settings.

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

---

**The screenshot-to-code backend reads environment variables centralized in [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py) to control AI provider selection, set generation parameters, enable debug output, and toggle production-specific behaviors.**

The `abi/screenshot-to-code` repository converts UI screenshots and videos into functional code using multi-model AI agents. To adapt the system for local development, staging, or production environments, you configure the FastAPI-based Python backend through a concise set of environment variables. These settings govern which large language models are available, how many code variants the engine produces per request, and where diagnostic files are written.

## AI Provider API Keys

The backend supports multiple LLM providers, each activated by setting the corresponding API key in your environment. All keys are imported in [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py) using `os.environ.get()` with `None` as the default, meaning providers are gracefully disabled when keys are absent.

- **OPENAI_API_KEY** – Required for GPT-4/5 series models. If omitted, OpenAI-based generation routes are disabled.
- **ANTHROPIC_API_KEY** – Enables Claude model variants for code generation.
- **GEMINI_API_KEY** – Activates Google Gemini model support.
- **REPLICATE_API_KEY** – Required for image generation (DALL-E 3, Flux) and background removal tasks handled in [`backend/agent/tools/runtime.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/agent/tools/runtime.py).

The optional **OPENAI_BASE_URL** variable allows you to redirect OpenAI calls to a custom endpoint, such as an Azure deployment or a private proxy, without modifying the application code.

## Generation Parameters

You can fine-tune the volume of output the system produces using integer parameters defined in [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py):

- **NUM_VARIANTS** – Defaults to `4`. Controls how many distinct code implementations the backend generates for a single screenshot upload.
- **NUM_VARIANTS_VIDEO** – Defaults to `2`. Specifically governs variant count for the experimental video-to-code pipeline.

Increasing these values provides more多样化 (diverse) implementation options but consumes more tokens and increases latency proportionally.

## Debug Mode and Logging Configuration

The backend includes granular controls for introspection and audit trails:

- **IS_DEBUG_ENABLED** – Boolean flag defaulting to `False`. When set to `True`, the system writes intermediate prompts and raw LLM responses to disk via [`backend/debug/DebugFileWriter.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/debug/DebugFileWriter.py).
- **DEBUG_DIR** – Filesystem path where debug artifacts are stored. Used only when `IS_DEBUG_ENABLED` is active.
- **LOGS_PATH** – Optional directory for runtime prompt/completion logs, implemented in [`backend/fs_logging/core.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/fs_logging/core.py). Defaults to the current working directory if unset.

These settings are particularly useful when troubleshooting prompt engineering issues or auditing model behavior in [`backend/routes/generate_code.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/routes/generate_code.py).

## Production Deployment Settings

Two additional flags adjust runtime behavior for hosted environments:

- **IS_PROD** – Boolean defaulting to `False`. When `True`, the backend disables certain optional diagnostics and adjusts error handling paths, as implemented in [`backend/routes/generate_code.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/routes/generate_code.py).
- **OPENAI_BASE_URL** – As mentioned above, critical for production deployments using Azure OpenAI Service or API gateways that require custom base URLs.

## Practical Configuration Examples

Create a `.env` file in the `backend/` directory to populate these variables before starting the server:

```text

# Required AI providers

OPENAI_API_KEY=sk-your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
GEMINI_API_KEY=your-gemini-key

# Optional image generation and background removal

REPLICATE_API_KEY=replicate-token

# Debug configuration

IS_DEBUG_ENABLED=1
DEBUG_DIR=./debug_output

# Custom OpenAI endpoint (e.g., Azure)

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

# Production mode

IS_PROD=1

```

To verify configuration values programmatically, import the centralized constants from [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py):

```python
from backend.config import (
    NUM_VARIANTS,
    OPENAI_API_KEY,
    IS_DEBUG_ENABLED,
    REPLICATE_API_KEY,
)

print(f"Generating {NUM_VARIANTS} variants per request")
print(f"OpenAI available: {OPENAI_API_KEY is not None}")
print(f"Debug mode active: {IS_DEBUG_ENABLED}")

```

## Summary

- **Provider selection** is controlled via `OPENAI_API_KEY`, `ANTHROPIC_API_KEY`, `GEMINI_API_KEY`, and `REPLICATE_API_KEY` in [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py).
- **Output volume** is configured through `NUM_VARIANTS` (default 4) and `NUM_VARIANTS_VIDEO` (default 2).
- **Debugging** requires setting `IS_DEBUG_ENABLED=True` and optionally specifying a `DEBUG_DIR` for artifact storage.
- **Production hardening** uses the `IS_PROD` flag to disable development diagnostics.
- **Custom endpoints** are supported via `OPENAI_BASE_URL` for Azure or proxy configurations.

## Frequently Asked Questions

### How do I enable debug logging in the screenshot-to-code backend?

Set the environment variable `IS_DEBUG_ENABLED=1` (or `True`) and optionally specify a `DEBUG_DIR` path. When enabled, [`backend/debug/DebugFileWriter.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/debug/DebugFileWriter.py) persists intermediate prompts and raw LLM responses to the filesystem for inspection.

### What is the default number of code variants generated?

By default, the backend generates **4** code variants per screenshot request, controlled by the `NUM_VARIANTS` setting in [`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py). For video inputs, the default is **2** variants via `NUM_VARIANTS_VIDEO`.

### Can I use a custom OpenAI endpoint or Azure with screenshot-to-code?

Yes. Set the `OPENAI_BASE_URL` environment variable to your custom endpoint (e.g., `https://your-resource.openai.azure.com/v1`). The backend passes this URL directly to the OpenAI client constructor, allowing compatibility with Azure OpenAI Service and API proxies.

### Which configuration file controls backend environment variables?

All primary environment variables are imported and defaulted in **[`backend/config.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/config.py)**. Specialized paths like `LOGS_PATH` are consumed in [`backend/fs_logging/core.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/fs_logging/core.py), while debug settings are handled in [`backend/debug/DebugFileWriter.py`](https://github.com/abi/screenshot-to-code/blob/main/backend/debug/DebugFileWriter.py).