Vibe

AI-powered development platform that lets you create web applications by chatting with AI agents in real-time sandboxes.

Features

• 🤖 AI-powered code generation with AI agents
• 💻 Real-time Next.js application development in E2B sandboxes
• 🔄 Live preview & code preview with split-pane interface
• 📁 File explorer with syntax highlighting and code theme
• 💬 Conversational project development with message history
• 🎯 Smart usage tracking and rate limiting
• 💳 Subscription management with pro features
• 🔐 Authentication with Clerk
• ⚙️ Background job processing with Inngest
• 🗃️ Project management and persistence

Tech Stack

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS v4
• Shadcn/ui
• tRPC
• Prisma ORM
• PostgreSQL
• OpenAI, Anthropic or Grok
• E2B Code Interpreter
• Clerk Authentication
• Inngest
• Prisma
• Radix UI
• Lucide React

Building E2B Template (REQUIRED)

Before running the application, you must build the E2B template that the AI agents use to create sandboxes.

Prerequisites: - Docker must be installed and running (the template build command uses Docker CLI)

# Install E2B CLI
npm i -g @e2b/cli
# or
brew install e2b

# Login to E2B
e2b auth login

# Navigate to the sandbox template directory
cd sandbox-templates/nextjs

# Build the template (replace 'your-template-name' with your desired name)
e2b template build --name your-template-name --cmd "/compile_page.sh"

After building the template, update the template name in src/inngest/functions.ts:

// Replace "vibe-nextjs-test-2" with your template name
const sandbox = await Sandbox.create("your-template-name");

Development

# Install dependencies
npm install

# Set up environment variables
cp env.example .env
# Fill in your API keys and database URL

# Set up database
npx prisma migrate dev # Enter name "init" for migration

# Start development server
npm run dev

Environment Variables

Create a .env file with the following variables:

DATABASE_URL=""
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# OpenAI
OPENAI_API_KEY=""

# E2B
E2B_API_KEY=""

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""
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="/"

Additional Commands

# Database
npm run postinstall        # Generate Prisma client
npx prisma studio          # Open database studio
npx prisma migrate dev     # Migrate schema changes
npx prisma migrate reset   # Reset database (Only for development)

# Build
npm run build          # Build for production
npm run start          # Start production server
npm run lint           # Run ESLint

Project Structure

• src/app/ - Next.js app router pages and layouts
• src/components/ - Reusable UI components and file explorer
• src/modules/ - Feature-specific modules (projects, messages, usage)
• src/inngest/ - Background job functions and AI agent logic
• src/lib/ - Utilities and database client
• src/trpc/ - tRPC router and client setup
• prisma/ - Database schema and migrations
• sandbox-templates/ - E2B sandbox configuration

How It Works

1. Project Creation: Users create projects and describe what they want to build
2. AI Processing: Messages are sent to GPT-4 agents via Inngest background jobs
3. Code Generation: AI agents use E2B sandboxes to generate and test Next.js applications
4. Real-time Updates: Generated code and previews are displayed in split-pane interface
5. File Management: Users can browse generated files with syntax highlighting
6. Iteration: Conversational development allows for refinements and additions

Created by CodeWithAntonio