██╗ ██╗ ██████╗ ██████╗ ██╗██╗ ██╗
██║ ██║██╔═████╗ ██╔══██╗██║╚██╗ ██╔╝
██║ ██║██║██╔██║█████╗██║ ██║██║ ╚████╔╝
╚██╗ ██╔╝████╔╝██║╚════╝██║ ██║██║ ╚██╔╝
╚████╔╝ ╚██████╔╝ ██████╔╝██║ ██║
╚═══╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝
Open-source clone of v0.app with AI-powered React component generation
Getting Started · Features · Tech Stack · Project Structure · Contributing
v0.diy is a self-hosted, open-source alternative to v0.app that transforms natural language descriptions into production-ready React components. Built with the latest web technologies and designed for developers who want full control over their AI-assisted development workflow.
| Feature | Description |
|---|---|
| AI Component Generation | Convert natural language prompts into functional React components |
| Real-time Streaming | Watch code generation happen live with streaming responses |
| User Authentication | Secure email/password authentication with NextAuth.js |
| Rate Limiting | 50 messages per day for authenticated users |
| Persistent Chat History | Conversations and generated components saved to PostgreSQL |
| Projects Dashboard | View and manage all your generated projects |
| Live Preview | Split-screen resizable layout with instant component preview |
| Dark/Light Theme | Full theme support with system preference detection |
| Image Attachments | Attach images to your prompts for context |
| Voice Input | Microphone support for voice-based prompts |
- Node.js 22.x or later
- pnpm 9.0 or later
- PostgreSQL database (local or hosted)
- v0 API key from v0.app for each end user (BYOK)
# Clone the repository
git clone https://github.com/SujalXplores/v0.diy.git
cd v0.diy
# Install dependencies
pnpm install
# Copy environment template
cp .env.example .env.localCreate a .env.local file with the following variables:
# Environment
NODE_ENV=development
# Database (required)
POSTGRES_URL=postgresql://user:password@localhost:5432/v0_diy
# Authentication (required - generate with: openssl rand -base64 32)
AUTH_SECRET=your_auth_secret_here
# Optional: Custom v0 API URL
V0_API_URL=After sign in, each user adds their own v0 API key from the account menu.
Note: In development mode, if
AUTH_SECRETis not set, a default development secret will be used automatically.
# Apply database migrations
pnpm db:migrate
# Start development server
pnpm devThe application will be available at http://localhost:3000.
| Command | Description |
|---|---|
pnpm dev |
Start development server with Turbopack |
pnpm build |
Run migrations and build for production |
pnpm start |
Start production server |
pnpm db:generate |
Generate migration files from schema changes |
pnpm db:migrate |
Apply pending migrations to the database |
pnpm db:studio |
Open Drizzle Studio for database inspection |
pnpm db:push |
Push schema changes directly to the database |
pnpm lint |
Run Biome linter |
pnpm lint:fix |
Run Biome linter with auto-fix |
pnpm format |
Format code with Biome |
pnpm check |
Run Biome check (lint + format) |
pnpm typecheck |
Run TypeScript type checking |
- React 19.2.3 — Latest React with concurrent rendering and React Compiler
- Next.js 16.1.1 — Full-stack React framework with App Router & Turbopack
- TypeScript 5.9.3 — Static type checking
- Tailwind CSS 4.1.18 — Utility-first CSS framework
- Radix UI — Accessible UI primitives
- Geist Font — Typography by Vercel
- NextAuth.js 5 (Beta) — Authentication with Credentials provider
- PostgreSQL — Relational database
- Drizzle ORM 0.45.1 — Type-safe database operations
- Vercel Postgres — Cloud-hosted PostgreSQL support
- v0 SDK 0.15.3 — Official v0.app API client
- AI SDK 6.0.11 — Streaming AI response handling
- @v0-sdk/react 0.4.1 — React components for AI interactions
- Biome 2.3.11 — Fast linter and formatter
- Husky — Git hooks for code quality
- lint-staged — Run linters on staged files
v0.diy/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication routes & config
│ │ ├── login/ # Login page
│ │ └── register/ # Registration page
│ ├── api/ # API routes
│ │ ├── auth/ # NextAuth endpoints
│ │ ├── chat/ # Chat API (create, fork, delete)
│ │ └── chats/ # Chat list & detail endpoints
│ ├── chats/ # Chat pages
│ └── projects/ # Projects dashboard
├── components/
│ ├── ai-elements/ # AI-specific components (prompt, response, etc.)
│ ├── chat/ # Chat interface components
│ ├── chats/ # Chat list components
│ ├── home/ # Home page components
│ ├── projects/ # Projects page components
│ ├── providers/ # React context providers
│ ├── shared/ # Shared layout components
│ └── ui/ # Reusable UI primitives
├── contexts/ # React contexts
├── hooks/ # Custom React hooks
├── lib/
│ ├── db/ # Database schema, queries & migrations
│ └── ... # Utilities and configurations
├── types/ # TypeScript type definitions
└── public/ # Static assets
Login is required to use the chat functionality. Users must create an account or sign in before submitting prompts.
| User Type | Max Messages/Day | Description |
|---|---|---|
| Registered | 50 | Email/password authenticated users |
Note: Unauthenticated users will be redirected to the login page when attempting to submit a prompt. Any typed message will be preserved and restored after login.
Contributions are welcome. Please read our contributing guidelines before submitting a pull request.
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
This project uses Biome for linting and formatting. Before submitting a PR:
pnpm check:fix # Auto-fix linting and formatting issues
pnpm typecheck # Ensure no TypeScript errorsThis project is tested with BrowserStack
This project is licensed under the MIT License. See the LICENSE file for details.
⭐ If you found this project helpful, please consider giving it a star!