​
Prerequisites

Let’s build your first AI app in 10 minutes! This quick setup will give you:

  • A complete user authentication system (magic link email login)
  • Production-ready database with all necessary tables
  • Working GPT-powered text generation app
  • Beautiful UI with 40+ themes
  • User management and session handling

You’ll need:

  • Node.js 18+
  • A package manager (pnpm recommended, or npm, or yarn)
  • Git
  • A code editor (Cursor recommended - will generate the code for you)
  • Required accounts for basic setup:
    • Supabase - for authentication & database
    • OpenAI - for AI capabilities
    • Vercel or similar - for deployment

Ready to add more features? Check out our guides for Google/GitHub authentication, file uploads and storage, additional AI providers like Claude and Groq, voice transcription, PDF processing, and much more in the sections on the left. Each guide includes step-by-step instructions and complete code examples to extend your app’s capabilities.

​
What We’ll Be Setting Up

Before we start coding, we need to set up a few things:

  1. A database to store your app’s data (users, chat history, etc.)
  2. API keys to connect to AI services
  3. A development environment on your computer

​
Quick Setup

1

Fork and Setup the Code

First, let’s create your own private copy of the project:

💡 Pro Tip: You can verify your remotes are set correctly with git remote -v

This creates your own private copy of the starter kit.

2

Set up Supabase Database

Supabase is a powerful, ready-to-use database for your app. We’ll set it up in a few steps:

1

Install Supabase Tools

First, we need to install some tools that help us work with Supabase. Choose the right command for your computer:

2

Login to Supabase CLI

Before creating a project, you need to login to your Supabase account:

npx supabase login

This will open your browser and ask you to login to your Supabase account. After logging in, you’ll see a token - copy it and paste it back into your terminal.

3

Create Your Database

Now let’s create a new database project:

npx supabase projects create -i "anotherwrapper-premium-db"

The tool will ask you a few questions:

  1. Confirm the project name (just press Enter)
  2. Choose your organization (if you have multiple)
  3. Pick a region (choose one close to you)
  4. Set a database password (or leave blank to generate one)

After answering these, you’ll see something like this:

Creating project:    anotherwrapper-premium-db
Selected org-id:     uefyfzmrpgyuazwddyib
Selected region:     eu-west-3
Enter your database password (or leave blank to generate one):
Created a new project anotherwrapper-premium-db at https://supabase.com/dashboard/project/vpgxxpifhzqjvrhsinhe

Important: Look at the URL in that last line. The part after “project/” is your project ID (in this example: vpgxxpifhzqjvrhsinhe). Save this ID - you’ll need it soon!

If you check your Supabase dashboard now, you should see your new project being created:

4

Connect Your Project

Now we need to connect your local code to your new database:

# Set up some local configuration
npx supabase init

# Connect to your database (replace 'your-project-id' with your ID from step 2)
npx supabase link --project-ref your-project-id

For example: npx supabase link --project-ref vpgxxpifhzqjvrhsinhe

5

Configure Environment Variables

Your app needs to know how to connect to your database and AI services. Let’s create a settings file:

# Create a new settings file by copying the example
cp .env.example .env

Now open the .env file and fill in these details:

# Base URL (use localhost for development)
PRODUCTION_URL=http://localhost:3000

# Supabase settings (you'll find these in your Supabase dashboard)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_SUPABASE_SERVICE_KEY=your-supabase-service-key

# OpenAI API key (get this from platform.openai.com)
OPENAI_API_KEY=sk-your-openai-key

To find your Supabase settings:

  1. Go to your Supabase dashboard
  2. Click “Project Settings” then “API”
  3. You’ll find:
    • Project URL (copy this to NEXT_PUBLIC_SUPABASE_URL)
    • “anon public” key (copy to NEXT_PUBLIC_SUPABASE_ANON_KEY)
    • “service_role” key (copy to NEXT_SUPABASE_SERVICE_KEY)

For your OpenAI API key:

  1. Go to platform.openai.com
  2. Navigate to API keys section
  3. Create a new key and copy it to OPENAI_API_KEY

Important: Make sure you have credits in your OpenAI account! The API won’t work without available credits, even with a valid API key. You can check your credit balance and add credits at platform.openai.com/account/billing.

6

Set Up Database Tables

Last step! We need to create all the tables your app will use:

npx supabase db push

You’ll see a list of tables that will be created - just type ‘y’ when asked:

WARN: no seed files matched pattern: supabase/seed.sql
Connecting to remote database...
Do you want to push these migrations to the remote database?
 • 20240000000001_profiles.sql
 • 20240000000002_generations.sql
 • 20240000000003_chat.sql
 • 20240000000004_files.sql
 • 20240000000005_pdf.sql
 • 20240000000006_voice_to_notes.sql

 [Y/n] y
Applying migration 20240000000001_profiles.sql...
Applying migration 20240000000002_generations.sql...
Applying migration 20240000000003_chat.sql...
Applying migration 20240000000004_files.sql...
Applying migration 20240000000005_pdf.sql...
Applying migration 20240000000006_voice_to_notes.sql...
Finished supabase db push.

This will push all the necessary database tables to your Supabase project. After running these commands, you can check your Supabase dashboard under “Table Editor” to see the newly created tables:

Troubleshooting Supabase Connection Issues

If you’re having trouble connecting to Supabase:

  1. Double-check your .env file - make sure all the Supabase values are correct
  2. Go to your Supabase dashboard and verify your project is “Active” (green dot)
  3. Try copying the keys from Supabase again - sometimes spaces can sneak in!

If you’re still having issues, try running supabase db reset to start fresh with your database schema.

3

Start development

Now let’s start your app:

pnpm dev

Go to http://localhost:3000 - your website should be up and running!

This will start your app at http://localhost:3000. Open this address in your browser to see your app running!

​
Having Problems?

Here are solutions to common issues you might run into:

  • Can’t Connect to Supabase?

    1. Double-check your .env file - make sure all the Supabase values are correct
    2. Go to your Supabase dashboard and verify your project is “Active” (green dot)
    3. Try copying the keys from Supabase again - sometimes spaces can sneak in!

  • App Won’t Build or Start? Try these steps in order:

    1. Delete the .next folder: rm -rf .next
    2. Clean install your packages: pnpm install --force
    3. Start again: pnpm dev

​
Publishing Your App Online

Now that you have your app running locally, let’s share it with the world! We’ll use Vercel - it’s the best choice for Next.js apps because:

  • It’s made by the same team that created Next.js
  • It’s free for personal projects
  • It makes deployment super easy

​
Before You Deploy

You should already have:

  • ✅ A working local version of your app
  • ✅ Your Supabase database set up and running
  • ✅ Your OpenAI API key
  • ✅ Your .env file configured correctly

If you’re missing any of these, go back to the setup steps above!

​
Step-by-Step Deployment

1

Push Your Existing Code to GitHub

git add .
git commit -m "Prepare for deployment"
git push origin main
2

Connect to Vercel

  • Go to Vercel Dashboard
  • Click “New Project”
  • Select your existing repository from the list
  • Select “Next.js” as the framework
3

Copy Your Environment Variables

Remember all those settings in your .env file? We need to tell Vercel about them:

  • In your Vercel project settings, find “Environment Variables”
  • Copy ALL variables from your .env file:
# Copy everything, even variables you're not using yet
# This ensures all routes will work and you can add features later
# Base URL (use localhost for development)
PRODUCTION_URL=http://localhost:3000

# Supabase settings (you'll find these in your Supabase dashboard)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_SUPABASE_SERVICE_KEY=your-supabase-service-key

# OpenAI API key (get this from platform.openai.com)
OPENAI_API_KEY=sk-your-openai-key
...

💡 Pro Tip: For variables you’re not using yet, you can use dummy values (like “not-configured”). This lets you deploy successfully while keeping the option to add features later.

4

Configure Build Settings

  • Build Command: pnpm build

  • Output Directory: .next

  • Install Command:pnpm install

5

Deploy

  • Click “Deploy”
  • Vercel will start building your app
  • You’ll get a URL where your app is live (like your-app.vercel.app)

That’s it! Your AI app is now live on the internet!

💡 Pro Tip: Whenever you push changes to your GitHub repository, Vercel will automatically update your live app. No need to deploy manually again!

​
Other Hosting Options

While we recommend Vercel, you can also use:

  • Netlify (similar to Vercel, also very easy)
  • Railway (good for full-stack apps)
  • DigitalOcean App Platform (more control, but more complex)
  • AWS Amplify (powerful but requires AWS knowledge)

These alternatives might need different setup steps - check their docs if you want to use them!

Set up storage

Set up S3 compatible storage using Cloudflare R2

Set up OpenAI

Set up OpenAI & understand how it’s used throughout the app

Set up Groq

Set up Groq & understand how it’s used throughout the app

Set up payments

Accepting payments and set up a paywall using LemonSqueezy

Set up email

Set up your first email funnel using Loops

Set up analytics

Set up PostHog Analytics to understand user behavior

Chat with PDF app

Build your own Chat with a PDF app

Transcribe audio

Build your own audio transcription app

Project Structure