abi/screenshot-to-code · error · ValueError

Invalid generated code config: {generated_code_config}

Error message

Invalid generated code config: {generated_code_config}

What it means

Error emitted through the WebSocket throw_error channel by ExtractedParams.extract_and_validate in backend/routes/generate_code.py:292 when params['generatedCodeConfig'] is not one of the allowed Stack literals (e.g. 'react'/'react_tailwind'/'html', per the Stack type). A plain ValueError is raised afterwards as a backstop, so this is a strict allowlist check on the stack parameter.

Source

Thrown at backend/routes/generate_code.py:292

    """Handles parameter extraction and validation from WebSocket requests"""

    def __init__(
        self,
        throw_error: Callable[[str], Coroutine[Any, Any, None]],
        asset_base_url: str = "",
    ):
        self.throw_error = throw_error
        self.asset_base_url = asset_base_url

    async def extract_and_validate(self, params: Dict[str, Any]) -> ExtractedParams:
        """Extract and validate all parameters from the request"""
        # Read the code config settings (stack) from the request.
        generated_code_config = params.get("generatedCodeConfig", "")
        if generated_code_config not in get_args(Stack):
            await self.throw_error(
                f"Invalid generated code config: {generated_code_config}"
            )
            raise ValueError(f"Invalid generated code config: {generated_code_config}")
        validated_stack = cast(Stack, generated_code_config)

        # Validate the input mode
        input_mode = params.get("inputMode")
        if input_mode not in get_args(InputMode):
            await self.throw_error(f"Invalid input mode: {input_mode}")
            raise ValueError(f"Invalid input mode: {input_mode}")
        validated_input_mode = cast(InputMode, input_mode)

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

        # If neither is provided, we throw an error later only if Claude is used.
        anthropic_api_key = self._get_from_settings_dialog_or_env(
            params, "anthropicApiKey", ANTHROPIC_API_KEY
        )
        gemini_api_key = self._get_from_settings_dialog_or_env(

View on GitHub (pinned to d026163f58)

Solutions

1. Send one of the stack values the backend defines (check the Stack Literal in video/utils/constants or the settings UI).
2. Refresh the frontend so its stack list matches the backend build.
3. If you maintain a custom client, fetch the supported stacks from the backend config/UI instead of hardcoding.

Example fix

// before
ws.send(JSON.stringify({ generatedCodeConfig: 'react-tailwind', ... }));

// after
ws.send(JSON.stringify({ generatedCodeConfig: 'react_tailwind', ... })); // exact Stack literal

type Stack = 'react' | 'react_tailwind' | 'html' | 'mock' | 'vue' | 'angular' | 'svelte' | 'html_tailwind';
const STACKS: Stack[] = ['react', 'react_tailwind', 'html', /* ... */];
function isStack(v: unknown): v is Stack {
  return typeof v === 'string' && (STACKS as string[]).includes(v);
}

ws.onmessage = (ev) => {
  const msg = JSON.parse(ev.data);
  if (msg.type === 'error' && msg.message.startsWith('Invalid generated code config')) {
    // refresh supported stacks / fix the payload before retry
  }
};

When it happens

Trigger: Sending a generation request over the WebSocket with generatedCodeConfig missing (defaults to ''), misspelled, or from a newer/older frontend that uses a stack name this backend build does not know.

Common situations: Frontend/backend version skew after a new stack was added on one side only; stale open browser tab after a backend upgrade; hand-crafted WebSocket client.

Related errors

• Invalid input mode: {input_mode}
• Invalid generation type: {generation_type}
• No OpenAI, Anthropic, or Gemini API key found. Please add th
• --iou-threshold must be between 0 and 1
• No stack was provided

AI-assisted analysis of abi/screenshot-to-code@d026163f58 (2026-08-14). Data as JSON: /api/errors/9c60a24f16c2a97d. Report an issue: GitHub.