AI-Powered Website Builder
Build Stunning Websites with AI Assistance
Transform your ideas into fully functional websites using cutting-edge AI technology.
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 |
Node.js | Package Manager | Gemini API |
Installation
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
Environment SetupCreate 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
Start Development# Start the development server
npm run dev
# In a new terminal, start Convex
npx convex dev
# Open http://localhost:3000
Project Architecture
Folder Structureai-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| 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
İçeriği görüntülemek için Giriş yapın veya Kayıt olun.
- Meta Title
- Gerçek zamanlı kod üretimi, canlı önizleme, React ve Tailwind tabanlı bileşenler ile hem geliştiriciler hem de kodlama bilmeyen kullanıcılar için hızlı ve esnek bir website oluşturma deneyimi sunar.
- Meta Description
- AI-Powered Website Builder, Gemini Flash 2.0 destekli yapay zekâ ile doğal dil kullanarak modern, responsive ve SEO uyumlu web siteleri oluşturmanıza olanak tanıyan yenilikçi bir platformdu
