✨ Vibe

Build Stunning Applications by Chatting with AI

No coding required. Just your imagination. Unlimited possibilities.

• Overview
• Key Features
• Screenshots
• Tech Stack
• Architecture
• Getting Started
• Environment Variables
• Database Setup
• Project Structure
• How It Works
• Development
• Deployment
• Contributing
• License

Vibe is an AI-powered web application builder that allows users to create stunning websites and applications through natural conversation. Simply describe what you want to build, and Vibe's AI agents will generate, preview, and deploy your project in real-time.

Built with modern web technologies and powered by advanced AI models, Vibe eliminates the complexity of traditional web development while maintaining professional quality and full customization capabilities.

• 🤖 AI-Driven Development: Leverage GPT-4 and AI agents to write code from natural language descriptions
• 🔄 Real-Time Previews: See your application come to life instantly in isolated sandboxes
• 💾 Project Management: Organize and manage multiple projects with persistent storage
• 🎨 Beautiful UI/UX: Modern, responsive design with smooth animations powered by Framer Motion
• 🔐 Secure Authentication: Enterprise-grade authentication with Clerk
• ⚡ Serverless Architecture: Built on Next.js 15 with App Router for optimal performance

• Conversational AI Interface: Describe your project in plain English and watch it materialize
• Multi-Project Support: Create and manage unlimited projects simultaneously
• Live Code Execution: Real-time code generation and execution in secure E2B sandboxes
• File Management: Browse, edit, and manage generated files with an intuitive file explorer
• Code Visualization: Syntax-highlighted code viewer with PrismJS integration
• Responsive Design: Fully responsive interface that works seamlessly across all devices

• Type-Safe API: End-to-end type safety with tRPC
• Database ORM: Prisma for robust database management
• Event-Driven Architecture: Inngest for reliable background job processing
• Real-Time Updates: Tanstack Query for optimistic UI updates
• Theme Support: Dark/Light mode with next-themes
• Component Library: Comprehensive UI components built on Radix UI
• Animation System: Smooth, performant animations with Framer Motion

• Intelligent Code Generation: Multi-agent system for context-aware code creation
• Error Handling: Automatic error detection and recovery
• Iterative Refinement: Continuous improvement through conversation
• Framework Support: Optimized for Next.js 15.3.3 development

The landing page with AI-powered project creation

Manage all your projects in one place

Real-time preview of your generated application

View and explore generated code with syntax highlighting

Navigate through your project's file structure

Converse with AI to build and refine your application

Note: Add your screenshots to the screenshots folder in the root directory. Recommended dimensions: 1920x1080px

• Framework: Next.js 15.3.4 - React framework with App Router
• Language: TypeScript 5 - Type-safe JavaScript
• Styling: Tailwind CSS 4 - Utility-first CSS framework
• UI Components: Radix UI - Accessible component primitives
• Animations: Framer Motion - Production-ready motion library
• 3D Graphics: Three.js + React Three Fiber - 3D visualization
• State Management: Tanstack Query - Async state management
• Form Handling: React Hook Form - Performant form validation

• API Layer: tRPC 11 - End-to-end typesafe APIs
• Database: PostgreSQL - Relational database
• ORM: Prisma 6 - Next-generation Node.js ORM
• Authentication: Clerk - User authentication and management
• Background Jobs: Inngest - Reliable event-driven workflows

• AI Model: OpenAI GPT-4 - Advanced language model
• Agent Framework: Inngest Agent Kit - AI agent orchestration
• Sandbox Environment: E2B Code Interpreter - Secure code execution sandboxes

• Package Manager: npm/yarn/pnpm/bun
• Code Quality: ESLint - Linting and code quality
• Schema Validation: Zod - TypeScript-first schema validation

Vibe follows a modern, scalable architecture designed for performance and maintainability:

┌─────────────────────────────────────────────────────────────┐
│                        Client (Next.js)                      │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ React Pages  │  │ UI Components│  │  tRPC Client │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└───────────────────────────┬─────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                      API Layer (tRPC)                        │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │   Routers    │  │  Procedures  │  │  Middleware  │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└───────────────────────────┬─────────────────────────────────┘
                            │
                ┌───────────┴───────────┐
                ▼                       ▼
┌──────────────────────┐   ┌──────────────────────┐
│   Database (Prisma)  │   │  Inngest Functions   │
│  ┌────────────────┐  │   │  ┌────────────────┐  │
│  │   PostgreSQL   │  │   │  │  AI Agent Kit  │  │
│  └────────────────┘  │   │  └────────────────┘  │
└──────────────────────┘   └──────────┬───────────┘
                                      │
                                      ▼
                           ┌──────────────────────┐
                           │   E2B Sandboxes      │
                           │  (Code Execution)    │
                           └──────────────────────┘

1. Frontend Layer: React components with Server/Client component separation
2. API Layer: Type-safe tRPC procedures for data fetching and mutations
3. Agent Layer: AI-powered code generation using multi-agent orchestration
4. Execution Layer: Isolated E2B sandboxes for secure code execution
5. Data Layer: Prisma ORM with PostgreSQL for persistent storage

Before you begin, ensure you have the following installed:

• Node.js 18.0 or higher
• npm / yarn / pnpm / bun
• PostgreSQL database (local or cloud)
• Git

1. Clone the repository

git clone https://github.com/Hardik180704/vibe.git
cd vibe

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Set up environment variables

Create a .env file in the root directory:

cp .env.example .env

Then configure your environment variables (see Environment Variables section).

4. Set up the database

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

5. Start the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

6. Open your browser

Navigate to http://localhost:3000 to see the application.

Create a .env file with the following variables:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/vibe?schema=public"

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# OpenAI
OPENAI_API_KEY=sk-...

# E2B Code Interpreter
E2B_API_KEY=e2b_...

# Inngest
INNGEST_EVENT_KEY=...
INNGEST_SIGNING_KEY=...

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

• Clerk: Sign up at clerk.com
• OpenAI: Get your API key from platform.openai.com
• E2B: Sign up at e2b.dev
• Inngest: Create an account at inngest.com

Vibe uses PostgreSQL with Prisma ORM. The schema includes:

• Project: Stores user projects with metadata
• Message: Chat messages with AI (user/assistant roles)
• Fragment: Generated code artifacts with sandbox URLs

# Create a new migration
npx prisma migrate dev --name your_migration_name

# Reset database (development only)
npx prisma migrate reset

# Deploy migrations to production
npx prisma migrate deploy

# Open Prisma Studio for database GUI
npx prisma studio

vibe/
├── prisma/                    # Database schema and migrations
│   ├── schema.prisma         # Prisma schema definition
│   └── migrations/           # Database migrations
├── public/                   # Static assets
│   └── logo.svg             # Application logo
├── sandbox-templates/        # E2B sandbox configurations
│   └── nextjs/              # Next.js sandbox template
├── screenshots/             # Application screenshots
├── src/
│   ├── app/                 # Next.js 15 App Router
│   │   ├── (home)/         # Home page route group
│   │   ├── api/            # API routes
│   │   │   ├── inngest/   # Inngest webhook endpoint
│   │   │   └── trpc/      # tRPC API endpoint
│   │   └── projects/       # Projects pages
│   ├── components/          # Reusable React components
│   │   ├── ui/             # UI component library
│   │   ├── animated/       # Animated components
│   │   └── code-view/      # Code visualization components
│   ├── hooks/              # Custom React hooks
│   ├── inngest/            # Inngest functions and client
│   │   ├── client.ts      # Inngest client configuration
│   │   ├── functions.ts   # AI agent functions
│   │   └── utils.ts       # Inngest utilities
│   ├── lib/                # Utility libraries
│   │   ├── db.ts          # Prisma client instance
│   │   └── utils.ts       # General utilities
│   ├── modules/            # Feature modules
│   │   ├── home/          # Home module
│   │   ├── messages/      # Messages module
│   │   └── projects/      # Projects module
│   ├── trpc/              # tRPC configuration
│   │   ├── init.ts       # tRPC initialization
│   │   ├── client.tsx    # Client-side tRPC
│   │   └── routers/      # API routers
│   ├── middleware.ts      # Next.js middleware (auth)
│   ├── prompt.ts         # AI system prompts
│   └── types.ts          # TypeScript type definitions
├── .env                   # Environment variables
├── .gitignore            # Git ignore rules
├── components.json       # shadcn/ui configuration
├── eslint.config.mjs     # ESLint configuration
├── next.config.ts        # Next.js configuration
├── package.json          # Dependencies and scripts
├── postcss.config.mjs    # PostCSS configuration
├── tailwind.config.ts    # Tailwind CSS configuration
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

Users create a new project by providing a natural language description of what they want to build.

The request is sent to an Inngest function that:

• Creates an isolated E2B sandbox environment
• Retrieves conversation history from the database
• Initializes AI agent network with custom tools

The AI agent:

• Analyzes the user's requirements
• Generates appropriate code files
• Executes terminal commands as needed
• Iteratively refines the solution

Generated code runs in a secure E2B sandbox:

• Next.js 15.3.3 environment
• 30-minute timeout
• Isolated from main application
• Live preview URL generation

The system:

• Saves generated files to database
• Creates a fragment with sandbox URL
• Generates user-friendly response
• Updates UI in real-time

# Start development server with Turbopack
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run ESLint
npm run lint

# Generate Prisma client
npm run postinstall

1. Feature Development

   • Create a new branch: git checkout -b feature/your-feature
   • Make your changes
   • Test thoroughly
   • Commit with clear messages

2. Database Changes

   • Update prisma/schema.prisma
   • Run npx prisma migrate dev --name your_change
   • Generate client: npx prisma generate

3. API Changes

   • Add/modify procedures in src/trpc/routers/
   • Types are automatically inferred
   • Test with tRPC client

4. UI Components

   • Use existing components from src/components/ui/
   • Follow Radix UI patterns
   • Ensure accessibility

• TypeScript: Strict mode enabled
• Formatting: Follow existing patterns
• Components: Use functional components with hooks
• Naming: Descriptive, consistent naming conventions

1. Push to GitHub

git push origin main

2. Import to Vercel

• Go to vercel.com
• Import your repository
• Configure environment variables
• Deploy

3. Configure Database

• Use Vercel Postgres or external PostgreSQL
• Update DATABASE_URL in environment variables
• Run migrations: npx prisma migrate deploy

Ensure all environment variables are set in your hosting platform:

• Database connection string
• API keys (Clerk, OpenAI, E2B, Inngest)
• App URL (production domain)

1. Run database migrations
2. Test authentication flow
3. Verify AI agent functionality
4. Check sandbox creation and execution

Contributions are welcome! Here's how you can help:

1. Check if the bug has already been reported
2. Create a detailed issue with:
   • Steps to reproduce
   • Expected behavior
   • Actual behavior
   • Screenshots if applicable

1. Open an issue with the enhancement label
2. Describe the feature and its benefits
3. Discuss implementation approach

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Write/update tests if applicable
5. Submit a pull request

• All PRs require review before merging
• Ensure CI/CD checks pass
• Address review comments
• Squash commits before merge

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js - The React Framework
• Vercel - Hosting and deployment
• Clerk - Authentication
• OpenAI - AI capabilities
• E2B - Code execution sandboxes
• Inngest - Event-driven workflows
• Prisma - Database toolkit
• tRPC - Type-safe APIs

• Documentation: GitHub Wiki
• Issues: GitHub Issues
• Discussions: GitHub Discussions