AI Site Builder

Generate a complete, multi-page website from a single text description using AI.

schedule 6 min read auto_awesome AI Feature

tips_and_updates

Pro Tip

The more detail you provide in your description, the better the AI output. Include business name, industry, pages needed, color preferences, and tone.

How It Works

The AI Builder uses a large language model to parse your description and generate a complete JSON website structure — including page names, section types, content, colors, and fonts. This JSON is then saved to the database and rendered into static HTML files.

The 4 Screens

Screen 1: Input

The starting screen where you describe your website. Key elements:

Description textarea — type your website description (or paste a detailed brief)
Improve description — AI expands a short description into a detailed brief
Category chips — click a chip (Business, E-commerce, Portfolio, School, Blog, Restaurant, Agency) to auto-fill a template prompt
Submit button — sends the description to the AI API

Screen 2: Loading

Shows a progress bar and status messages while the AI generates your site. Typical generation takes 5–30 seconds depending on description length and AI model speed.

Screen 3: Preview

Shows a live iframe preview of the generated site. The right sidebar contains:

Sidebar Element	What it does
Site Name input	Required. Sets the display name and URL slug. Max 80 chars.
Idea Summary textarea	Edit the description and click "Regenerate Preview" to re-generate
Primary / Secondary color pickers	Change colors live — preview updates instantly
Preset palettes	12 color presets — click to apply
Page list	Click any page to preview it in the iframe
Device buttons	Switch between desktop, tablet, mobile preview
Continue to Editor	Saves the site to DB and opens the visual editor

warning

Site Name is Required

You must enter a site name before clicking "Continue to Editor". The name becomes the URL slug — keep it short and descriptive.

Screen 4: Editor

After saving, you're redirected to the Visual Editor for the generated site where you can edit content, add sections, and publish.

Writing Better Prompts

A good prompt includes:

Business name — "for Sunrise Academy" or "called La Cucina"
Industry/type — school, restaurant, agency, portfolio, etc.
Pages needed — "Include Home, About, Services, Gallery, Contact"
Color preferences — "Use blue and gold colors" or "dark and professional"
Tone — "professional", "friendly", "luxury", "minimal"
Key content — "We offer 3 courses: Python, Web Dev, Data Science"

Example prompt:

Create a website for Sunrise Academy, a CBSE school in Chennai.
Include pages: Home, About Us, Academics, Admissions, Facilities,
Gallery, Events, and Contact. Use blue and gold colors with a
professional, trustworthy tone. The school was founded in 2005
and has 1200 students.

AI Fallback

If the AI API is not configured or times out, the system uses a rule-based fallback generator that creates a complete site structure based on keywords in your description. The fallback is fast but produces more generic content.

To configure the AI API, set these environment variables in your .env file:

AI_API_KEY=your_openai_or_compatible_key
AI_API_URL=https://api.openai.com/v1/chat/completions
AI_MODEL=gpt-4o-mini
# Or for Google Gemini:
GEMINI_API_KEY=your_gemini_key

Usage Limits

Plan	AI Generations/month
Free	10
Starter	50
Pro	200
Business	Unlimited