Build and Deploy a SaaS AI Website Builder | Next.js 15, React, Inngest, Prisma | Lovable clone

Key Concepts

• Vibe: An AI-powered app builder that generates functional web applications from simple text prompts.
• Tech Stack: Next.js 15 (React 19), TRPC (full-stack type safety), Prisma ORM (PostgreSQL via Neon), Tailwind CSS v4, Shadcn UI, Clerk (Auth/Billing), Ingest (Background jobs/AI agents), E2B (Cloud sandboxes), and Code Rabbit (AI code reviews).
• Agentic Workflow: Using AI agents to execute terminal commands, manage files, and run code in secure sandboxes.
• Background Jobs: Offloading long-running tasks (like AI generation) to separate environments to prevent request timeouts.
• E2B Sandboxes: Secure, isolated cloud environments where AI-generated code is executed and previewed.

---

1. Core Architecture & Development Workflow

The application functions by taking a user prompt, which triggers an AI coding agent via Ingest. This agent uses a set of tools (terminal, file system access) to build a Next.js application within an E2B sandbox. The finished app is then saved to a Neon PostgreSQL database.

• Git Workflow: The project follows a strict Git workflow: creating feature branches (e.g., 01-setup, 02-database), staging changes, and opening Pull Requests (PRs).
• AI Code Reviews: Code Rabbit is integrated to automatically review PRs, providing logic feedback, best practices, and sequence diagrams for complex flows.

2. Database & Data Access Layer

• Prisma ORM: Used for database schema management. The schema includes models for User, Project, Message, Fragment, and Usage.
• TRPC: Provides end-to-end type safety. By using protectedProcedure, the app ensures that only authenticated users can access specific data, bypassing the need to rely solely on middleware for security.
• Migrations: The tutorial demonstrates npx prisma migrate dev for schema synchronization and npx prisma migrate reset for development-mode database cleanup.

3. Background Jobs & AI Agents

• Ingest: Manages long-running tasks. When a user submits a prompt, the backend invokes an Ingest function, allowing the UI to return an immediate response while the AI works in the background.
• Agentic Tools: The AI agent is equipped with specific tools:
  • Terminal: Executes shell commands (e.g., npm install).
  • File System: Creates, updates, and reads files within the sandbox.
• Agent Memory: By fetching previous messages from the database and passing them into the agent's state, the AI maintains context across the conversation, allowing for iterative improvements (e.g., "make it red," "add a calculator").

4. Sandboxing & UI Generation

• E2B Templates: A custom Dockerfile template is built and pushed to E2B. This template pre-configures the environment (Node.js, Next.js, Shadcn UI) so the AI agent can immediately start coding without manual setup.
• Generative UI: The app uses iframe components to render the live URL generated by the E2B sandbox, allowing users to interact with their AI-built apps in real-time.

5. Authentication & Billing

• Clerk: Handles authentication and billing.
• Billing System: Clerk’s billing integration is used to manage "Free" vs. "Pro" plans.
• Credit System: A custom usage tracker is implemented using rate-limiter-flexible with Prisma. Users are allocated credits (e.g., 5 for free, 100 for pro), which are consumed upon each AI generation. If credits are exhausted, the user is redirected to the pricing page.

6. UI/UX Enhancements

• Theming: The project uses next-themes for dark/light mode support. The theme is customized using globals.css (inspired by tweak-cn.com).
• Resizable Panels: Uses shadcn/ui resizable components to create a split-view interface (Code Editor vs. Live Preview).
• Error Handling: Implements react-error-boundary to prevent entire page crashes when specific components (like the preview or message list) fail.

---

Synthesis/Conclusion

The project demonstrates a sophisticated "Generative UI" architecture. By combining Next.js for the frontend, Ingest for orchestration, and E2B for secure execution, the developer creates a platform where users can build complex, functional web apps via natural language. The key takeaway is the importance of type safety (TRPC) and robust background job management (Ingest) in creating a reliable AI-driven developer tool.