Professional AI Website Builder

Create stunning, production-ready websites with AI:

• Next.js frontend with live editor
• Express backend API
• Monaco code editor with auto-save
• Groq AI for intelligent generation
• Free Unsplash images integration
• Modern CSS with animations
• Professional, semantic code
• Filesystem-based storage

Features

• 🎨 Professional Design: Modern layouts, gradients, animations
• 🖼️ Free Images: Automatic Unsplash integration
• 💻 Clean Code: Semantic HTML5, modern CSS, ES6+ JavaScript
• ⚡ Live Editing: Auto-save with instant preview
• 🤖 AI Powered: Natural language generation and editing
• 📱 Responsive: Mobile-first, production-ready
• 🎯 Smart Content: AI-generated professional copy

Requirements

• Node.js 20+
• npm 10+
• Groq API key (free at https://console.groq.com)

Quick Start

1. Install dependencies:

npm install

2. Get your free Groq API key:

   • Visit https://console.groq.com
   • Sign up for a free account
   • Create an API key

3. Configure environment:

cp server/.env.example server/.env

Edit server/.env and add your Groq API key

4. Launch:

npm run dev

Frontend: http://localhost:3000
Backend: http://localhost:4000

Usage

1. Generate: Describe your website in natural language
2. Edit: Use AI to refine and modify
3. Code: Edit directly in Monaco editor with auto-save
4. Preview: See changes instantly
5. Download: Export as ZIP

Generated projects: ./projects/<project-id>

Examples

Try these prompts:

• "Modern SaaS landing page with pricing tiers and testimonials"
• "Restaurant website with menu, gallery, and reservation form"
• "Portfolio for a photographer with image grid and about section"
• "Tech startup page with animated hero and feature showcase"