Web Codegen Scorer: Test AI-Generated Web Code Quality Before You Ship

Web Codegen Scorer evaluates the quality of frontend code produced by large language models. It provides a definitive way to determine whether AI-generated HTML, CSS, or JavaScript meets production standards or requires significant refactoring. By selecting a specific model, framework, and tooling, you can run automated checks in a test environment that mirrors your actual development setup through system instructions and MCP server integration.

The tool focuses on high-impact metrics: build success, runtime exceptions, accessibility (a11y) compliance, and security vulnerabilities. It also assigns an LLM-based quality grade and flags departures from established coding best practices. If a check fails, the scorer attempts an automated patch, providing a potential fix rather than just a failure report.

Flexible Configuration Compare performance across various models, frontend frameworks, and build pipelines.

Comprehensive Testing Built-in validation for build success, runtime stability, accessibility standards, and security hygiene.

Automated Repairs The system attempts to fix generated code automatically when errors are detected.

Visual Reporting Dashboards allow for side-by-side comparisons of different runs to identify exactly where specific models underperform.

Installing and Using Web Codegen Scorer

1. Install

npm install -g web-codegen-scorer

2. Set API Keys

# Export the keys required for your chosen models
export GEMINI_API_KEY="your-key"
export OPENAI_API_KEY="your-key"
export ANTHROPIC_API_KEY="your-key"

3. Run an Evaluation

Test the tool using the included Angular example.

web-codegen-scorer eval --env=angular-example

4. Initialize a Custom Test Suite

web-codegen-scorer init

Core CLI Flags

• --env=<path> — Path to the environment configuration. (Required)

• --model=<name> — Specifies the LLM to be evaluated.

• --local — Bypasses the API to run scoring against previously generated code.

• --limit=<number> — Limits the evaluation to a specific number of prompts.

• --output-directory=<name> — Specifies the directory where results are saved.

• --concurrency=<number> — Limits the number of parallel API requests.

• --report-name=<name> — Sets a custom title for the generated report.