🚀 Vibe Clone - AI-Powered App Builder

An advanced AI-powered application builder that generates full-stack applications from simple prompts. Built with cutting-edge technologies including Next.js 15, React 19, Inngest agent toolkit, and secure cloud sandboxes with E2B.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

🤖 AI-Powered Generation

• 🧱 Component Generation - Create React components from natural language prompts
• 🖥️ Full App Generation - Build complete full-stack applications with AI
• 🧠 Multi-Model Support - Leverage OpenAI, Anthropic, and Grok models
• 🔁 Background Job Processing - Efficient generation with Inngest orchestration
• 🤖 AI Agent Toolkit - Programmable AI agents for intelligent code generation

🛠️ Development Features

• 🗂️ Live Project Preview - Real-time preview with accessible URLs
• 📦 E2B Cloud Sandboxes - Secure runtime execution in isolated environments
• 🐳 Docker-Based Templates - Customizable sandbox environments
• 📝 Code Explorer - Toggle between preview and source code
• 🤖 CodeRabbit PR Reviews - AI-assisted code reviews on pull requests

💎 Platform Features

• 🔐 Clerk Authentication - Secure sign-in/sign-up with social logins
• 💳 Clerk Billing - Integrated subscription management
• 🧾 Credit System - Usage tracking and credit management
• 📊 Project Dashboard - Manage all your AI-generated projects
• 📱 Mobile Responsive - Seamless experience across all devices

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router & Turbopack
• React 19 - Latest React with improved performance
• TypeScript - Type safety
• Tailwind CSS v4 - Modern utility-first CSS
• Shadcn UI - Beautiful component library
• Lucide React - Icon library

Backend & Database

• tRPC - End-to-end typesafe APIs
• Prisma ORM - Type-safe database ORM
• Neon PostgreSQL - Serverless Postgres database
• SuperJSON - JSON serialization
• Next.js API Routes & Server Actions

AI & Agent Orchestration

• Inngest - Background job orchestration
• Inngest Agent Kit - Programmable AI agents
• OpenAI - GPT models for code generation
• E2B Code Interpreter - Secure code execution sandboxes

Authentication & Billing

• Clerk - Complete authentication solution
• Clerk Billing - Subscription management
• Rate limiting with rate-limiter-flexible

Development Tools

• CodeRabbit - AI-powered PR reviews
• Docker - Containerization for sandboxes
• React Error Boundary - Error handling

Additional Libraries

• TanStack Query - Data fetching & caching
• React Hook Form - Form management
• Zod - Schema validation
• Prism.js - Syntax highlighting
• date-fns - Date utilities

📋 Prerequisites

Before you begin, ensure you have:

• Node.js v20.18.0 or higher
• npm 11.3.0 or higher
• Docker (for E2B sandbox templates)
• Git
• Accounts for:
  • Clerk (Authentication & Billing)
  • Neon (Database)
  • OpenAI (AI Models)
  • E2B (Code Sandboxes)
  • Inngest (Background Jobs)
  • CodeRabbit (Optional - AI PR Reviews)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/vibe-clone.git
cd vibe-clone

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env file in the root directory:

# Database (Neon PostgreSQL)
DATABASE_URL='postgresql://user:password@host/database?sslmode=require'

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

# OpenAI
OPENAI_API_KEY=your_openai_api_key

# E2B Code Sandboxes
E2B_API_KEY=your_e2b_api_key

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Clerk Redirect URLs
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# Inngest
INNGEST_EVENT_KEY=your_inngest_event_key
INNGEST_SIGNING_KEY=your_inngest_signing_key

4. Setup Prisma Database

Note: If you're on Windows and encounter permission errors, use WSL (Windows Subsystem for Linux):

# In WSL
wsl
cd /mnt/e/your-project-path/vibe-clone
sudo rm -rf node_modules .next
npm install

Generate Prisma Client and setup database:

# Generate Prisma Client
npx prisma generate

# Push database schema
npx prisma db push

# (Optional) Reset database
npx prisma migrate reset

# (Optional) Run migrations
npx prisma migrate dev

# (Optional) Open Prisma Studio to manage database
npx prisma studio

Windows Users: Update prisma/schema.prisma with binaryTargets:

generator client {
  provider      = "prisma-client-js"
  output        = "../src/generated/prisma"
  binaryTargets = ["native", "debian-openssl-3.0.x"]
}

5. Setup E2B Sandbox Templates

# Install E2B CLI globally
npm i -g @e2b/cli

# Login to E2B
e2b auth login

# Build sandbox template (use a unique name)
cd sandbox-templates/nextjs
e2b template build --name your-unique-template-name --cmd "/compile_page.sh"

# Publish template (copy the template ID from build output)
e2b template publish -t your-template-id

# (Optional) Unpublish template
e2b template unpublish

6. Setup Inngest Dev Server

Open a new terminal and run:

npx inngest-cli@1.8.0 dev

This starts the Inngest dev server for local development and testing of background jobs.

7. Start the development server

npm run dev

Open http://localhost:3000 in your browser.

📦 Available Scripts

Command	Description
npm run dev	Start development server with Turbopack
npm run build	Build for production
npm start	Start production server
npm run lint	Run ESLint
npx prisma studio	Open Prisma Studio
npx prisma generate	Generate Prisma Client
npx prisma db push	Push schema to database
npx prisma migrate dev	Run database migrations
npx prisma migrate reset	Reset database
npx inngest-cli dev	Start Inngest dev server

🔑 Key Features Explained

🤖 AI Agent System

• Programmable Agents: Built with Inngest Agent Kit for intelligent code generation
• Multi-Model Support: Seamlessly switch between OpenAI, Anthropic, and Grok models
• Background Processing: Long-running generation tasks handled by Inngest
• Error Handling: Robust error boundaries with React Error Boundary

🗂️ E2B Cloud Sandboxes

• Secure Execution: Run generated code in isolated Docker containers
• Live Preview: Access sandbox URLs for real-time preview
• Custom Templates: Build and deploy your own sandbox environments
• Persistent State: Sandboxes maintain state during active sessions

💳 Credit & Billing System

• Usage Tracking: Monitor generation credits per user
• Clerk Billing: Integrated subscription management
• Rate Limiting: Protect API endpoints with flexible rate limits
• Expiration System: Credit expiry system built into the database

🎨 Component Generation

• Natural Language Prompts: Describe components in plain English
• Full-Stack Apps: Generate complete applications with backend + frontend
• Code Explorer: View and edit generated source code
• Syntax Highlighting: Beautiful code display with Prism.js

📚 Resources

• Next.js Documentation
• tRPC Documentation
• Prisma Documentation
• Inngest Documentation
• Inngest Agent Kit
• E2B Documentation
• E2B Template Build
• Clerk Documentation
• Clerk Billing Guide
• Shadcn UI Documentation

🙏 Acknowledgments

• YouTube Tutorial - Step-by-step guide
• Free Assets from Code With Antonio
• Inngest - Agent orchestration
• Clerk - Authentication & billing
• CodeRabbit - AI code reviews
• Neon Database - Serverless PostgreSQL
• Vercel - Deployment platform
• Shadcn - Beautiful UI components

---

⭐ If you found this project helpful, please give it a star!