NovaLens — AI Visual Code Review Agent

See what code reviews can't — AI that cross-analyzes your UI screenshots and source code to catch visual-code inconsistencies before they ship.

Comment

Inspiration

Every frontend developer has experienced this: code looks correct in the editor, but the rendered UI tells a different story. Existing code review tools analyze code OR visuals in isolation — never both at the same time. We asked: what if an AI reviewer could actually see the UI while reading the code? That question led to NovaLens, an AI agent that cross-analyzes UI screenshots and source code simultaneously to catch inconsistencies that fall through the cracks of traditional reviews.

What it does

NovaLens is an AI-powered visual code review agent. Users paste a GitHub PR URL and optionally upload a UI screenshot, then Amazon Nova 2 Lite performs a 4-step agentic analysis:

  1. UI Visual Analysis — Detects layout, color contrast, spacing, and typography issues from screenshots
  2. Code Structure Analysis — Checks semantic HTML, ARIA attributes, CSS problems, and responsive design patterns
  3. Cross-Modal Reasoning — The key differentiator: AI reasons across image and code to find inconsistencies (e.g., a button styled as primary in code but rendering with wrong contrast in the UI)
  4. Report Generation — Produces a prioritized report with WCAG violation details, severity ratings, and suggested fix code

Results can be exported as GitHub PR comments with inline code suggestions, integrating seamlessly into existing developer workflows.

How we built it

Architecture: Fully Serverless on AWS (9 Services)

We designed NovaLens as a serverless monorepo with three layers:

  • Frontend: React 19 + Vite 6 + TypeScript, styled with Tailwind CSS 4 + shadcn/ui, state managed by Zustand
  • Backend: AWS Lambda (Node.js 22) behind Amazon API Gateway, with Amazon Cognito authentication
  • AI Core: Amazon Bedrock's Converse API with Nova 2 Lite and forced tool use (toolChoice) to guarantee structured JSON output
  • Data: Amazon DynamoDB for analysis history + Amazon S3 for screenshot/report storage
  • Infrastructure: AWS CDK v2 (TypeScript) for reproducible deployments, CloudFront CDN, CloudWatch monitoring

Key Technical Decision: Converse API over Bedrock Agent

We initially prototyped with Bedrock Agent but migrated to the Converse API for several critical advantages:

  • Forced tool use (toolChoice: { tool: { name: "submitAnalysisReport" } }) guarantees the model always returns structured JSON through our predefined tool schema — no parsing failures, no prompt engineering workarounds
  • Lower latency — Direct model invocation without agent orchestration overhead
  • Full control over the multi-step reasoning pipeline while maintaining structured output reliability

The Entire Stack in One Language

Every layer — frontend, backend, infrastructure — is written in TypeScript. This enabled shared type definitions between frontend and Lambda handlers, CDK infrastructure-as-code that's reviewable like application code, and maximum developer productivity for a small team.

Challenges we ran into

  • Structured output reliability: Getting consistent JSON from LLMs is notoriously difficult. We solved this by leveraging Converse API's forced tool use, which constrains the model to respond exclusively through our predefined tool schema — eliminating JSON parsing failures entirely.
  • Cross-modal reasoning quality: Teaching the AI to meaningfully correlate visual findings (from screenshots) with code structure (from diffs) required careful prompt engineering and tool schema design. The key insight was structuring the analysis as sequential reasoning steps rather than a single prompt.
  • Async analysis UX: Bedrock inference can take 10-30 seconds. We implemented an async Lambda + polling pattern with a real-time agent reasoning trace UI, turning wait time into an engaging visualization of the AI's thought process.
  • GitHub PR integration: Fetching and filtering frontend-relevant files from PR diffs, then mapping AI findings back to specific file locations for inline code suggestions, required non-trivial data transformation.

Accomplishments that we're proud of

  • Zero direct competitors in the cross-modal (UI + Code) analysis space — this is a genuine blue ocean
  • ~$12/month operational cost for 100 users, well within AWS Free Tier
  • Guaranteed structured output via Converse API forced tool use — no JSON parsing failures
  • Full-stack TypeScript monorepo with CDK infrastructure-as-code
  • Export to GitHub PR comments with inline code suggestions — practical developer workflow integration

What we learned

  • Amazon Nova 2 Lite's multimodal capabilities are surprisingly strong for UI analysis tasks — it can identify subtle spacing inconsistencies and color contrast issues from screenshots
  • The Converse API's toolChoice parameter is a game-changer for building reliable AI features — it eliminates the biggest pain point of LLM integration (unpredictable output format)
  • Serverless architecture on AWS can achieve production-grade reliability at hobby-project costs

What's next for NovaLens

  • CLI tool for CI/CD pipeline integration (GitHub Actions)
  • VS Code Extension for in-editor analysis
  • Nova 2 Pro upgrade for enhanced reasoning capability
  • Team workspaces with shared analysis history
  • Auto-fix PRs — automatically create fix commits from AI suggestions

Built With

Share this project:

Updates

Submission history