AI-powered application builder built with Next.js 16

📔 Table of Contents

• Folder Structure
• Getting Started
• Screenshots
• Tech Stack
• Stats
• Contribute
• Acknowledgements
• Buy Me a Coffee
• Follow Me
• Learn More
• Deploy on Vercel
• Give A Star
• Star History
• Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

lovable-clone/
  |- prisma/
    |-- migrations/
    |-- schema.prisma
  |- public/
    |-- github.svg
    |-- logo.svg
    |-- web-app-manifest-192x192.png
    |-- web-app-manifest-512x512.png
  |- sandbox-templates/
  |- src/
    |-- app/
        |--- (home)/
          |---- pricing/
          |---- sign-in/
          |---- sign-up/
          |---- layout.tsx
          |---- page.tsx
        |--- api/
          |---- cron/
          |---- inngest/
          |---- trpc/
        |--- projects/
          |---- [projectId]/
        |--- apple-icon.png
        |--- favicon.ico
        |--- global-error.tsx
        |--- globals.css
        |--- icon0.svg
        |--- icon1.png
        |--- layout.tsx
        |--- manifest.json
        |--- not-found.tsx
    |-- components/
        |--- code-view/
        |--- providers/
        |--- ui/
        |--- error-state.tsx
        |--- file-explorer.tsx
        |--- hint.tsx
        |--- loading-state.tsx
        |--- responsive-dialog.tsx
        |--- theme-toggle.tsx
        |--- tree-view.tsx
        |--- user-control.tsx
    |-- config/
        |--- http-status-codes.ts
        |--- index.ts
    |-- constants/
        |--- index.ts
    |-- db/
        |--- index.ts
        |--- schema.ts
    |-- env/
        |--- client.ts
        |--- server.ts
    |-- generated/
    |-- hooks/
        |--- use-confirm.tsx
        |--- use-mobile.ts
        |--- use-scroll.ts
    |-- inngest/
        |--- client.ts
        |--- functions.ts
        |--- utils.ts
    |-- lib/
        |--- db.ts
        |--- encryption.ts
        |--- utils.ts
    |-- modules
        |--- auth/
        |--- home/
        |--- messages/
        |--- pricing/
        |--- settings/
        |--- usage/
    |-- trpc/
        |--- routers/
        |--- client.tsx
        |--- init.ts
        |--- query-client.ts
        |--- server.tsx
    |-- types/
        |--- index.ts
    |-- proxy.ts
  |- .env.example
  |- .env.local
  |- .gitignore
  |- .prettierignore
  |- .prettierrc.mjs
  |- components.json
  |- environment.d.ts
  |- eslint.config.mjs
  |- next.config.ts
  |- package.json
  |- pnpm-lock.yaml
  |- pnpm-workspace.yaml
  |- postcss.config.mjs
  |- prisma.config.ts
  |- README.md
  |- tsconfig.json
  |- vercel.json

🧰 Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# disable telemetry
DO_NOT_TRACK="1"
NEXT_TELEMETRY_DISABLED="1"

# app base url
NEXT_PUBLIC_APP_BASE_URL="http://localhost:3000"

# neon db uri
DATABASE_URL="postgresql://<username>:<password>@<hostname>/Vibe?sslmode=require&channel_binding=require"

# e2b api key
E2B_API_KEY="e2b_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# clerk api keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CLERK_SECRET_KEY="sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

# clerk redirect urls
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"

# verification secret and cron secret (generated by `openssl rand -hex 32`)
VERIFICATION_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CRON_SECRET="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

5. Disable Telemetry (Optional)

DO_NOT_TRACK=1
NEXT_TELEMETRY_DISABLED=1

• These disable analytics/telemetry from Next.js and other packages. Keep them as provided.

---

6. App Base URL

NEXT_PUBLIC_APP_BASE_URL="http://localhost:3000"

• Keep as http://localhost:3000 during development.
• Change to your deployed URL (e.g., https://clone-vibe.vercel.app) in production.

---

7. Neon (PostgreSQL Database)

• Sign up at Neon.
• Create a new PostgreSQL project.
• Go to Connection Details and copy the Connection String.
• Replace <username>, <password>, and <hostname> with your Neon credentials.
• Append ?sslmode=require at the end (needed for secure connections).

---

8. Clerk (Authentication)

• Go to Clerk Dashboard.
• Create a new application.
• Navigate to API Keys:
  • Copy Publishable Key → NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
  • Copy Secret Key → CLERK_SECRET_KEY
• Redirect URLs: Keep as provided unless you modify authentication routes.

9. E2B (Sandbox)

• Install Docker Desktop.
• Go to E2B Dashboard.
• Sign up for a new account and go to API Keys page.
• Create a new key and copy the API key → E2B_API_KEY.
• Open terminal and run npm i -g @e2b/cli to install the E2B CLI.
• Login to E2B CLI using e2b auth login.
• Change the working directory using cd ./sandbox-templates/nextjs
• Run e2b template build --name <template-name> --cmd "./compile_page.sh" to create a new sandbox. Make sure the template name is unique and not already taken.
• Also pass the template name to the SANDBOX_TEMPLATE_NAME constant in the /src/constants/index.ts file.

10. Generate Secrets

• Generate verification secret and cron secret (for cryptographic signing):

  openssl rand -hex 32

  Copy the output → VERIFICATION_SECRET and CRON_SECRET separately

---

11. Install Project Dependencies using pnpm install --legacy-peer-deps or npm install --legacy-peer-deps.

12. Now app is fully configured 👍 and you can start using this app using either one of pnpm run dev or npm run dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

💎 Acknowledgements

Useful resources and dependencies that are used in Vibe.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @clerk/nextjs: ^6.37.1
• @clerk/themes: ^2.4.51
• @e2b/code-interpreter: ^2.3.3
• @hookform/resolvers: ^5.2.2
• @inngest/agent-kit: ^0.13.2
• @prisma/adapter-pg: ^7.3.0
• @prisma/client: ^7.3.0
• @radix-ui/react-collapsible: ^1.1.12
• @radix-ui/react-dialog: ^1.1.15
• @radix-ui/react-dropdown-menu: ^2.1.16
• @radix-ui/react-label: ^2.1.8
• @radix-ui/react-separator: ^1.1.8
• @radix-ui/react-slot: ^1.2.4
• @radix-ui/react-tabs: ^1.1.13
• @radix-ui/react-tooltip: ^1.2.8
• @t3-oss/env-nextjs: ^0.13.10
• @tanstack/react-query: ^5.90.20
• @trpc/client: ^11.9.0
• @trpc/server: ^11.9.0
• @trpc/tanstack-react-query: ^11.9.0
• @vercel/functions: ^3.4.0
• class-variance-authority: ^0.7.1
• client-only: ^0.0.1
• clsx: ^2.1.1
• date-fns: ^4.1.0
• dotenv: ^17.2.3
• inngest: ^3.49.3
• lucide-react: ^0.563.0
• next: 16.1.6
• next-themes: ^0.4.6
• openai: ^6.17.0
• pg: ^8.17.2
• prismjs: ^1.30.0
• random-word-slugs: ^0.1.7
• rate-limiter-flexible: ^9.0.1
• react: 19.2.4
• react-dom: 19.2.4
• react-error-boundary: ^6.1.0
• react-hook-form: ^7.71.1
• react-hot-toast: ^2.6.0
• react-resizable-panels: ^4.5.6
• react-textarea-autosize: ^8.5.9
• server-only: ^0.0.1
• superjson: ^2.2.6
• tailwind-merge: ^3.4.0
• vaul: ^1.1.2
• zod: ^4.3.6
• zustand: ^5.0.10
• @babel/eslint-parser: ^7.28.6
• @eslint/eslintrc: ^3.3.3
• @ianvs/prettier-plugin-sort-imports: ^4.7.0
• @next/eslint-plugin-next: 16.1.6
• @tailwindcss/postcss: ^4.1.18
• @trivago/prettier-plugin-sort-imports: ^6.0.2
• @types/node: ^25.1.0
• @types/pg: ^8.16.0
• @types/prismjs: ^1.26.5
• @types/react: ^19.2.10
• @types/react-dom: ^19.2.3
• eslint: ^9.39.2
• eslint-config-next: 16.1.6
• eslint-config-prettier: ^10.1.8
• eslint-plugin-prettier: ^5.5.5
• eslint-plugin-react-hooks: ^7.0.1
• eslint-plugin-tailwindcss: 4.0.0-beta.0
• prettier: ^3.8.1
• prettier-plugin-tailwindcss: ^0.7.2
• prisma: ^7.3.0
• tailwind-scrollbar: ^4.0.2
• tailwindcss: ^4.1.18
• tw-animate-css: ^1.4.0
• typescript: ^5.9.3

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)