An overview of the AnotherWrapper starter kit
Let’s build your first AI app in 10 minutes! This quick setup will give you:
You’ll need:
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.
Before we start coding, we need to set up a few things:
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.
Set up Supabase Database
Supabase is a powerful, ready-to-use database for your app. We’ll set it up in a few steps:
Install Supabase Tools
First, we need to install some tools that help us work with Supabase. Choose the right command for your computer:
Login to Supabase CLI
Before creating a project, you need to login to your Supabase account:
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.
Create Your Database
Now let’s create a new database project:
The tool will ask you a few questions:
After answering these, you’ll see something like this:
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:
Connect Your Project
Now we need to connect your local code to your new database:
For example: npx supabase link --project-ref vpgxxpifhzqjvrhsinhe
Configure Environment Variables
Your app needs to know how to connect to your database and AI services. Let’s create a settings file:
Now open the .env
file and fill in these details:
To find your Supabase settings:
For your 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.
Set Up Database Tables
Last step! We need to create all the tables your app will use:
You’ll see a list of tables that will be created - just type ‘y’ when asked:
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:
If you’re having trouble connecting to Supabase:
.env
file - make sure all the Supabase values are correctIf you’re still having issues, try running supabase db reset
to start fresh
with your database schema.
Start development
Now let’s start your app:
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!
Here are solutions to common issues you might run into:
Can’t Connect to Supabase?
.env
file - make sure all the Supabase values are correctApp Won’t Build or Start? Try these steps in order:
.next
folder: rm -rf .next
pnpm install --force
pnpm dev
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:
You should already have:
.env
file configured correctlyIf you’re missing any of these, go back to the setup steps above!
Push Your Existing Code to GitHub
Connect to Vercel
Copy Your Environment Variables
Remember all those settings in your .env
file? We need to tell Vercel about them:
.env
file:💡 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.
Configure Build Settings
Build Command: pnpm build
Output Directory: .next
Install Command:pnpm install
Deploy
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!
While we recommend Vercel, you can also use:
These alternatives might need different setup steps - check their docs if you want to use them!
Set up S3 compatible storage using Cloudflare R2
Set up OpenAI & understand how it’s used throughout the app
Set up Groq & understand how it’s used throughout the app
Accepting payments and set up a paywall using LemonSqueezy
Set up your first email funnel using Loops
Set up PostHog Analytics to understand user behavior
Build your own Chat with a PDF app
Build your own audio transcription app