Vibe
AI website builder that generates Next.js apps from a simple prompt and save them in your personal space.
⚡ Build and iterate websites with AI, then use the templates and create your own app
Vibe turns prompts into editable websites with a preview, background generation workflows, and a type-safe stack that keeps the builder reliable as features scale.
🔍 What is Vibe?
Vibe is an AI website builder that creates modern Next.js apps. Users describe the site they want, then Vibe generates pages/components, refines them through guided iterations, and keeps everything reproducible via background workflows. A project preview sandbox runs the generated code safely, while a type-safe API layer (tRPC) and Prisma-backed database persist projects, revisions, and publishing metadata.
🧩 Key Features
📌 Why I Built This
I wanted to build a real AI product with a strong engineering foundation: fast UI, safe code execution, observable background jobs, and end-to-end type safety. Vibe is my take on a practical AI website builder, focused on rapid iteration and a polished builder experience, while staying maintainable with tRPC, Prisma, and structured workflows.
💡 Use Cases
- Generate a landing page from a short prompt and iterate on sections in minutes.
- Create multiple variants of a site (copy/layout) and keep revisions you can roll back to.
- Prototype marketing pages quickly with a clean, responsive UI out of the box.
🧪 Tech Stack Overview
- Next.js - App Router architecture for a structured product shell (builder, preview, project routing), plus server components/actions where they make the UX feel instant.
- React - Component-driven UI for the builder workspace, editing flows, and interactive preview panels.
- TypeScript - End-to-end types for builder entities (projects, pages, revisions) and a safer, more maintainable codebase as the feature set grows.
- Tailwind CSS - Utility-first styling for a crisp, responsive dashboard UI with consistent spacing, typography, and theming.
- shadcn/ui - Prebuilt accessible UI primitives (dialogs, buttons, dropdowns, tables) to keep the interface polished without heavy custom components.
- tRPC - Type-safe API layer connecting the Next.js app to server logic without codegen—ideal for complex builder flows and strongly typed mutations.
- Prisma - ORM layer for persisting projects, revisions, and publishing metadata with predictable migrations and a clean data model.
- Inngest - Background workflows for AI/agent jobs (generation, iteration steps, long-running tasks) with retries and observable execution.
- Clerk - Authentication and user management to keep projects scoped per account with a smooth sign-in experience.
- TanStack Query - Client caching and async state management for a snappy builder UX (optimistic updates, refetching, and stable loading states).
- CodeRabbit - AI-powered code review assistant that analyzes pull requests, suggests improvements, flags potential bugs, and helps maintain consistent code quality across the project.
⚙️ Getting Started
🧠 Challenges & Learnings
- Long-running AI features feel much more reliable when modeled as background workflows with retries and clear state transitions.
- A type-safe API (tRPC) reduces friction when the UI needs lots of fine-grained mutations (regen section, update page, etc.).
- Keeping preview execution isolated is essential for stability when you're generating and running code dynamically.
- Designing the data model around projects + pages + revisions makes iteration a first-class feature instead of an afterthought.
- A builder UI benefits massively from accessible primitives (menus/dialogs/tooltips) to keep interactions predictable and keyboard-friendly.
📸 See it in Action
Want to chat about this project? Let’s chat.