Loading repository data…
Ratna-Babu / repository
Instantly create beautiful, responsive websites with AI. This AI-powered website builder transforms natural language prompts into fully functional React components using Next.js, Tailwind CSS, and Gemini AI. Features real-time collaboration with Convex backend, theme customization, and export-ready code.
🌟 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!
| 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
# 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
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
# Start the development server
npm run dev
# In a new terminal, start Convex
npx convex dev
# Open http://localhost:3000
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
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
Your Prompt:
"Create a modern landing page for a
SaaS product with a hero section,
features grid, and pricing cards"
AI Generates:
| Variable | Description | Required |
|---|---|---|
GEMINI_API_KEY | Your Gemini API key | ✅ Yes |
NEXT_PUBLIC_CONVEX_URL | Convex deployment URL | ✅ Yes |
We love contributions! Please see our Contributing Guide for details.
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! 🎉"
Selected from shared topics, language and repository description—not editorial ratings.
Dilawarkhandeveloper /
AI-Powered Color Palette Generator Web App built with HTML, CSS, JavaScript, and Claude AI. Instantly create, lock, copy, and save beautiful color combinations with a modern, responsive design.