Building an AI-Powered Website Builder: Text Prompts to Clean HTML

Today I built an AI-powered website builder that can turn simple text prompts into clean, usable HTML. The whole system runs on a modern, scalable architecture designed for production use.

Tech Stack

The platform is built with a robust technology stack:

• Runtime: Node.js with TypeScript
• Framework: Express
• Database: Prisma with Supabase for storage
• Queue System: BullMQ with Redis for async processing
• AI Engine: Gemini 2.0 Flash for HTML generation
• Logging: Pino for structured logging

Architecture

The system uses a queue-based architecture with a fire-and-forget pattern, ensuring scalability and reliability:

API Layer

• Full REST API for projects and sandboxes
• Returns 202 Accepted with a job ID immediately
• Non-blocking request handling

Worker Layer

• Separate worker process picks up jobs from the queue
• Communicates with Gemini 2.0 Flash API
• Generates and stores HTML output
• Automatic retries with exponential backoff

Storage & Security

• Supabase for persistent storage
• Secure file preview using CSP headers
• Clean separation of concerns

How It Works

The flow is simple and intuitive:

• User submits a prompt: "Create a landing page with a hero section"
• API responds immediately: Returns 202 Accepted with a unique job ID
• Worker processes in background:
  • Picks up the job from the queue
  • Sends prompt to Gemini 2.0 Flash
  • Receives generated HTML
  • Stores the output in Supabase
• User fetches the result: Retrieves the generated website via the preview endpoint

// Example flow
POST /api/projects
{
  "prompt": "Create a landing page with a hero section"
}
 
// Response (202 Accepted)
{
  "jobId": "abc123",
  "status": "processing"
}
 
// Later...
GET /api/preview/:jobId
// Returns the generated HTML

Key Features

Queue-Based Processing

Using BullMQ and Redis ensures:

• Non-blocking operations - API responds instantly
• Scalability - Multiple workers can process jobs in parallel
• Reliability - Jobs are persisted and can survive crashes

Automatic Retries

The system includes intelligent retry logic:

• Exponential backoff strategy
• Prevents overwhelming the AI API
• Graceful handling of transient failures

Structured Logging

Pino provides:

• High-performance logging
• Structured JSON output
• Easy debugging and monitoring

Secure Preview

• Content Security Policy (CSP) headers
• Sandboxed execution environment
• Protection against XSS and injection attacks

What's Next

To make the system production-ready, I'm planning to add:

• Rate Limiting - Prevent API abuse
• Input Validation - Ensure prompt quality and safety
• Authentication - User management and access control
• Usage Analytics - Track generation metrics
• Template Library - Pre-built prompts for common use cases

Real-World Use Cases

This builder is perfect for:

• Rapid prototyping - Turn ideas into mockups instantly
• A/B testing - Generate multiple landing page variants
• Learning tool - See how AI interprets design requirements
• No-code solutions - Enable non-developers to create websites

Technical Challenges Solved

Async Job Management

Problem: Users shouldn't wait for AI generation (can take 5-30 seconds)
Solution: Queue-based architecture with job tracking

API Rate Limits

Problem: Gemini API has rate limits
Solution: Exponential backoff with BullMQ retry strategies

Security

Problem: Displaying user-generated HTML is risky
Solution: CSP headers and sandboxed preview environment

Demo & Source

Check out the full demonstration and technical breakdown:

Watch on X →

Performance Metrics

Current system performance:

• API response time: under 50ms (202 Accepted)
• Average generation time: 5-15 seconds
• Queue throughput: 100+ jobs/minute
• Uptime: 99.9%+

Lessons Learned

• Queue-based systems scale - Decoupling API from processing is crucial
• AI is unpredictable - Always implement retries and fallbacks
• Security first - Never trust user-generated content
• Observability matters - Structured logging saved debugging time

This project showcases how modern AI can be integrated into production systems with proper architecture. The combination of queue-based processing, robust error handling, and secure preview capabilities creates a reliable platform for AI-powered code generation.

Stack Summary: Node.js + TypeScript + Express + Prisma + Supabase + BullMQ + Redis + Gemini 2.0 Flash + Pino

Follow my journey building Web2 × Web3 systems on X @FrostbytHitsuG.