Skip to content

Hardik180704/vibe

BranchesTags

Repository files navigation

Vibe Logo

✨ Vibe

Build Stunning Applications by Chatting with AI

No coding required. Just your imagination. Unlimited possibilities.

Next.js TypeScript Prisma tRPC License

📖 Table of Contents

🌟 Overview

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.

What Makes Vibe Special?

  • 🤖 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

✨ Key Features

🎯 Core Functionality

  • 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

🛠️ Technical Features

  • 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

🚀 AI Capabilities

  • 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

📸 Screenshots

Home Page

The landing page with AI-powered project creation

Home Page

Project Dashboard

Manage all your projects in one place

Project Dashboard

Live Preview

Real-time preview of your generated application

Live Preview

Code Editor

View and explore generated code with syntax highlighting

Code Editor

File Explorer

Navigate through your project's file structure

File Explorer

Chat Interface

Converse with AI to build and refine your application

Chat Interface

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

🛠️ Tech Stack

Frontend

Backend

  • 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 & Code Execution

Development Tools

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

🏗️ Architecture

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)    │
                           └──────────────────────┘

Key Components

  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

🚀 Getting Started

Prerequisites

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

Installation

  1. Clone the repository
git clone https://github.com/Hardik180704/vibe.git
cd vibe
  1. Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install
  1. 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).

  1. Set up the database
# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev
  1. Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
  1. Open your browser

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

🔐 Environment Variables

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

Getting API Keys

💾 Database Setup

Vibe uses PostgreSQL with Prisma ORM. The schema includes:

Models

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

Migrations

# 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

📁 Project Structure

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

🤖 How It Works

1. Project Creation

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

2. AI Processing

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

3. Code Generation

The AI agent:

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

4. Sandbox Execution

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

5. Result Delivery

The system:

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

👨‍💻 Development

Available Scripts

# 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

Development Workflow

  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

Code Style

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

🚀 Deployment

Vercel (Recommended)

  1. Push to GitHub
git push origin main
  1. Import to Vercel
  • Go to vercel.com
  • Import your repository
  • Configure environment variables
  • Deploy
  1. Configure Database
  • Use Vercel Postgres or external PostgreSQL
  • Update DATABASE_URL in environment variables
  • Run migrations: npx prisma migrate deploy

Environment Variables for Production

Ensure all environment variables are set in your hosting platform:

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

Post-Deployment

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

🤝 Contributing

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

Reporting Bugs

  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

Suggesting Features

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

Pull Requests

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

Code Review Process

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

📄 License

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

🙏 Acknowledgments

  • 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

📞 Support

Made with ❤️ by Hardik Sharma

⭐ Star this project

About

An AI website builder

vibe-qw4p.vercel.app

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages