An AI-powered code generation and project management platform built with Next.js, Prisma, and Inngest.

Vibe is a modern web application that empowers developers to create, manage, and execute code projects with AI-assisted features. It combines real-time code execution, user authentication, and intelligent project organization into a seamless development experience.

• AI-Powered Code Generation: Generate and execute code snippets with AI assistance
• Project Management: Create and organize multiple projects with intuitive interfaces
• Real-Time Code Execution: Execute code in isolated sandboxes using E2B Code Interpreter
• Message-Based Architecture: Structured message system for tracking code generation and execution results
• Code Fragments: Save and manage code fragments with sandboxes and file tracking
• Usage Tracking: Monitor API usage with rate limiting and point-based system
• User Authentication: Secure authentication with Clerk
• Dark/Light Theme Support: Built-in theme switching with next-themes
• Responsive UI: Comprehensive component library with Radix UI and custom styling

• Framework: Next.js 15 with Turbopack
• UI Components: Radix UI - Accessible component primitives
• Styling: Tailwind CSS 4
• Forms: React Hook Form with Zod validation
• Data Fetching: TanStack React Query
• RPC: tRPC - End-to-end typesafe APIs

• Runtime: Next.js API Routes
• ORM: Prisma with PostgreSQL
• Job Processing: Inngest - Serverless event-driven workflows
• Code Execution: E2B Code Interpreter - Sandboxed code execution
• Rate Limiting: rate-limiter-flexible

• User Management: Clerk
• Theme Management: next-themes

• Language: TypeScript 5
• Linting: ESLint
• Runtime: tsx for TypeScript execution

vibe/
├── prisma/                 # Database schema and migrations
│   ├── schema.prisma       # Prisma data models
│   ├── seed.ts            # Database seeding script
│   └── migrations/        # Migration history
├── src/
│   ├── app/               # Next.js app router
│   │   ├── (home)/        # Home page routes
│   │   ├── api/           # API routes and webhooks
│   │   ├── projects/      # Project-related pages
│   │   └── layout.tsx     # Root layout
│   ├── components/        # React components
│   │   ├── ui/            # Reusable UI components
│   │   └── code-view/     # Code display component
│   ├── trpc/              # tRPC setup and routers
│   ├── inngest/           # Inngest functions and workflows
│   ├── lib/               # Utility functions and helpers
│   ├── modules/           # Feature modules (home, messages, projects, usage)
│   ├── hooks/             # Custom React hooks
│   ├── middleware.ts      # Next.js middleware
│   ├── types.ts           # TypeScript type definitions
│   └── prompt.ts          # AI prompt configurations
├── public/                # Static assets
├── sandbox-templates/     # E2B sandbox templates
└── package.json          # Project dependencies

• Stores user information linked to Clerk authentication
• Relationship with posts and projects

• Represents user projects with unique IDs and timestamps
• Contains multiple messages related to code generation
• Tracks project metadata

• Records AI interactions (user queries and assistant responses)
• Stores message content, role, and type
• Links to associated fragments
• Tracks creation and update timestamps

• Represents executable code fragments
• Contains sandbox URL for code execution
• Stores file structure in JSON format
• References parent message

• Tracks API/feature usage with points
• Supports rate limiting and usage quotas
• Includes expiration dates for time-based limits

• Node.js 18+ and npm/pnpm/yarn
• PostgreSQL database
• Clerk account (for authentication)
• E2B account (for code execution)
• Inngest account (for job processing)

1. Clone the repository

   git clone <repository-url>
   cd vibe

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Database
   DATABASE_URL=postgresql://user:password@localhost:5432/vibe
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
   CLERK_SECRET_KEY=your_clerk_secret
   
   # E2B Code Interpreter
   E2B_API_KEY=your_e2b_api_key
   
   # Inngest
   INNGEST_EVENT_KEY=your_inngest_key
   INNGEST_SIGNING_KEY=your_inngest_signing_key

4. Set up the database

   npx prisma migrate dev
   npm run seed  # Optional: populate with sample data

Start the development server with Turbopack:

npm run dev

The application will be available at http://localhost:3000

Build for production:

npm run build

Start the production server:

npm start

Run linting:

npm run lint

• End-to-end typesafe API calls between frontend and backend
• Automatic type inference for client-side queries and mutations
• Located in src/trpc/routers/

• Serverless event-driven workflows
• Handle background jobs for code execution
• Defined in src/inngest/functions.ts

• use-current-themes: Theme management
• use-mobile: Mobile detection
• use-scroll: Scroll position tracking

• Accordion, Alert Dialog, Avatar, Badge
• Button, Card, Carousel, Checkbox
• Command, Dialog, Drawer, Dropdown Menu
• File Explorer, Form, Input, Label
• Pagination, Popover, Progress, Radio Group
• Select, Sidebar, Skeleton, Slider
• Table, Tabs, Toggle, Tooltip
• And many more...

• Clerk Integration: Secure user authentication and session management
• User Context: Access authenticated user information throughout the app
• Protected Routes: API routes and pages can verify user authentication

# Create a new migration after schema changes
npx prisma migrate dev --name <migration_name>

# Reset the database (development only)
npx prisma migrate reset

# Check migration status
npx prisma migrate status

View and edit database records in a visual interface:

npx prisma studio

The application supports light and dark themes using next-themes:

• Theme preference is persisted in localStorage
• CSS variables for consistent styling
• Component-level theme awareness

• Usage Model: Track feature usage with points-based system
• Rate Limiting: Prevent abuse with flexible rate limiting
• Expiration: Support time-based usage limits

import { trpc } from '@/trpc/client'

// Use queries
const { data } = trpc.router.query.useQuery()

// Use mutations
const mutation = trpc.router.mutation.useMutation()

The project is optimized for deployment on:

• Vercel (recommended for Next.js)
• Other Node.js hosting platforms
• Containerized deployments (Docker support available)

• Environment variables configured
• Database migrations applied
• Clerk and E2B credentials set up
• Inngest webhook configured
• Build passes without errors

• Verify DATABASE_URL is correct
• Ensure PostgreSQL service is running
• Check network connectivity

• Verify Clerk keys are correctly set
• Check CORS configuration
• Review Clerk dashboard for errors

• Verify E2B API key is valid
• Check sandbox template configuration
• Monitor Inngest jobs for failures

• Next.js Documentation
• Prisma Documentation
• tRPC Documentation
• Clerk Documentation
• Inngest Documentation
• E2B Documentation
• Tailwind CSS Documentation

This project is proprietary. All rights reserved.

Contributions are welcome! Please follow the established code style and submit pull requests for review.

See demo preview below

Feel free to reach out for any questions or support regarding the Vibe platform!