🚀 AI-Powered Website Builder

Build Stunning Websites with AI Assistance

Transform your ideas into fully functional websites using cutting-edge AI technology.

About The Project

Real-time Code Generation

In-built Live Preview

🌟 AI Website Builder is a cutting-edge platform that revolutionizes web development by combining the power of Gemini Flash 2.0 AI with modern web technologies. Transform your ideas into fully functional, beautiful websites using natural language - no coding experience required!

⚠️ Note: The deployed live preview may not work as expected because code generation takes longer than Vercel’s API timeout limits.

Features

AI-Powered Magic	Modern Development	Developer Experience
🧠 Smart Content Generation 🎯 Natural Language to Code 💡 Intelligent Suggestions 🔮 Component Synthesis	⚡ Lightning Fast 🎨 Beautiful by Default 🔄 Real-time Updates 📱 Fully Responsive	🛠️ Export Ready 🌗 Theme Switcher 🔧 Customizable 📊 SEO Optimized

Tech Stack

🎯 Core Technologies

🤖 AI & Backend

🛠️ Tools & Libraries

Quick Start

📋 Prerequisites

Node.js

Package Manager

Gemini API

🚀 Installation

1️⃣ Clone & Install

# Clone the repository
git clone https://github.com/Ratna-Babu/ai-website-builder.git

# Navigate to project directory
cd ai-website-builder

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

2️⃣ Environment Setup

Create a .env.local file in the root directory:

# AI Configuration
GEMINI_API_KEY=your_gemini_api_key_here

# Convex Configuration
NEXT_PUBLIC_CONVEX_URL=your_convex_deployment_url

3️⃣ Start Development

# Start the development server
npm run dev

# In a new terminal, start Convex
npx convex dev

# Open http://localhost:3000

Project Architecture

graph TB
    A[User Interface] -->|Requests| B[Next.js App Router]
    B --> C[API Routes]
    C --> D[Gemini AI API]
    C --> E[Convex Backend]
    E --> F[(Real-time Database)]
    D -->|AI Response| C
    E -->|Live Updates| B
    B -->|Server Components| G[React Components]
    G --> H[Tailwind Styling]
    
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style D fill:#4285F4,stroke:#333,stroke-width:2px
    style E fill:#FF6F61,stroke:#333,stroke-width:2px

Loading

📁 Folder Structure

ai-website-builder/
│
├── 📂 app/                    # Next.js 14 App Router
│   ├── 📂 api/               # API endpoints
│   ├── 📂 (routes)/          # Page routes
│   └── 📄 layout.tsx         # Root layout
│
├── 📂 components/            # React Components
│   ├── 📂 ai/              # AI-related components
│   ├── 📂 ui/              # UI components
│   └── 📂 layouts/         # Layout components
│
├── 📂 lib/                  # Utilities
│   ├── 📄 ai-client.ts    # AI integration
│   └── 📄 utils.ts        # Helper functions
│
├── 📂 convex/              # Backend
│   ├── 📄 schema.ts       # Database schema
│   └── 📄 functions.ts    # Server functions
│
├── 📂 styles/              # Styling
│   └── 📄 globals.css     # Global styles
│
└── 📂 public/              # Static assets

Usage Examples

💬 Natural Language to Website

Your Prompt: "Create a modern landing page for a SaaS product with a hero section, features grid, and pricing cards"

AI Generates: ✅ Complete React Components ✅ Responsive Tailwind Styling ✅ SEO-Optimized Content ✅ Interactive Elements

Deployment

🚀 Deploy to Vercel

🔧 Environment Variables Required

Variable	Description	Required
GEMINI_API_KEY	Your Gemini API key	✅ Yes
NEXT_PUBLIC_CONVEX_URL	Convex deployment URL	✅ Yes

Contributing

We love contributions! Please see our Contributing Guide for details.

🌟 How to Contribute

gitGraph
    commit id: "Fork Repository"
    branch feature
    checkout feature
    commit id: "Create Feature"
    commit id: "Write Tests"
    commit id: "Update Docs"
    checkout main
    merge feature id: "Open PR"
    commit id: "Merged! 🎉"

Loading

👥 Contributors

Support & Community

💬 Get Help

⭐ Show Your Support

Give a ⭐ if this project helped you!

Acknowledgments

Special thanks to these amazing projects and teams:

Project	Description
Google Gemini	For powerful AI capabilities
Vercel	For seamless deployment platform
Convex	For real-time backend infrastructure
Next.js	For the amazing React framework
Tailwind CSS	For beautiful utility-first CSS

⬆ Back to Top

_{Made with ❤️ by Ratna Babu and contributors}