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

The screenshot-to-code backend reads environment variables centralized in 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 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.

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:

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

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.
• 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:

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

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.
• 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 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. 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. Specialized paths like LOGS_PATH are consumed in backend/fs_logging/core.py, while debug settings are handled in backend/debug/DebugFileWriter.py.

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