Skip to content
BranchesTags

Latest commit

 

History

656 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
.vscode
.vscode
 
 
prisma
prisma
 
 
public
public
 
 
sandbox-templates/nextjs
sandbox-templates/nextjs
 
 
src
src
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
.prettierignore
.prettierignore
 
 
.prettierrc.mjs
.prettierrc.mjs
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
components.json
components.json
 
 
environment.d.ts
environment.d.ts
 
 
eslint.config.mjs
eslint.config.mjs
 
 
next.config.ts
next.config.ts
 
 
package.json
package.json
 
 
pnpm-lock.yaml
pnpm-lock.yaml
 
 
pnpm-workspace.yaml
pnpm-workspace.yaml
 
 
postcss.config.mjs
postcss.config.mjs
 
 
prisma.config.ts
prisma.config.ts
 
 
tsconfig.json
tsconfig.json
 
 
vercel.ts
vercel.ts
 
 

Repository files navigation

AI-powered application builder built with Next.js 16

AI-powered application builder built with Next.js 16

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits GitHub issues GitHub pull requests Vercel status

📔 Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

lovable-clone/
  |- prisma/
    |-- migrations/
    |-- schema.prisma
  |- public/
  |- sandbox-templates/
    |-- nextjs/
  |- src/
    |-- app/
      |--- (home)/
      |--- api/
      |--- projects/
      |--- 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
    |-- env/
      |--- client.ts
      |--- server.ts
    |-- 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/
      |--- projects/
      |--- settings/
      |--- usage/
    |-- trpc/
      |--- routers/
      |--- client.tsx
      |--- init.ts
      |--- query-client.ts
      |--- server.tsx
    |-- types/
      |--- index.ts
    |-- proxy.ts
  |- .env.example
  |- .env/.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
  |- tsconfig.json
  |- vercel.ts

🧰 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 and sandbox template name
E2B_API_KEY="e2b_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
E2B_SANDBOX_TEMPLATE_NAME="<org-name>/<template-name>"

# 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.
  • Assign a name to the template through environment variable E2B_SANDBOX_TEMPLATE_NAME. Make sure the template name is unique and not already taken.
  • Run pnpm run e2b:build to create a new sandbox.

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. Ngrok

ngrok config add-authtoken YOUR_AUTH_TOKEN

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

  2. 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.

🙋 Need Help?

If you run into issues during installation or setup:

📷 Screenshots

Modern UI/UX

Demo and Code view

Subscriptions powered by Clerk

⚙️ Tech Stack

React JS Next JS Typescript PostgreSQL Prisma Tailwind CSS Vercel

🔧 Stats

Stats for Vibe

🙌 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.

☕ Buy Me a Coffee

🚀 Follow Me

Follow Me Tweet about this project

📚 Learn More

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

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

Star History Chart

(back to top)

About

AI-powered application builder built with Next.js 16 that lets you create apps and websites by chatting with AI.

clone-vibe.vercel.app

Topics

aiai-agentsai-assistantclerke2binngestlovable-ailovable-clonenextjsopenaiprismareactshadcn-uitailwindcsstrpcvercel-deployment

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity

Stars

21 stars

Watchers

1 watching

Forks

12 forks
Report repository

Sponsor this project

Used by

Contributors

Languages