This tutorial was submitted by @AbdullahZHD, a member of the Whop Developers community. Submit your own tutorial and get paid real $!

​
Summary

This tutorial will guide you through building a car modification AI app using Next.js, Shadcn UI, and OpenAI.

View the final product here by installing the app to your whop.

​
1. Set up your Next.js project

Clone the Car Modification AI repository:

git clone https://github.com/AbdullahZHD/car-modification-ai-whop
cd car-modification-ai-whop

Install dependencies:

pnpm i

​
2. Get your Whop API credentials

1

Create a Whop App

  1. Go to https://whop.com/dashboard
  2. Navigate to Developer
  3. Click the Create App button
  4. Give your app a name like “Car Modification AI”
  5. Click Create
2

Get your API Key, Agent User ID, and App ID

After creating your app:

  1. Copy the App API Key - you’ll need this for WHOP_API_KEY
  2. Copy the Agent User ID - you’ll need this for WHOP_AGENT_USER_ID
  3. Copy the App ID - you’ll need this for WHOP_APP_ID

The Agent User ID is what allows your app’s agent to send post the results in forum.

​
3. Get OpenAI API Key

1

Create OpenAI Account

  1. Go to platform.openai.com
  2. Click Sign In or Sign Up
  3. Complete the registration process
2

Get API Key

  1. Go to API Keys in the dashboard
  2. Click Create Key
  3. Give it a name like “Car Modification AI”
  4. Copy the API key - you’ll need this for OPENAI_API_KEY (ensure you have balance/payment method)

​
5. Configure Environment Variables

1

Create local environment file

touch .env.local
2

Fill in Required Variables

Open .env in your text editor and fill in these required fields:

# AI Service Configuration (Required)
OPENAI_API_KEY=your_openai_api_key

# Whop Integration (Required)
WHOP_API_KEY=your_whop_api_key_here
NEXT_PUBLIC_WHOP_AGENT_USER_ID=your_whop_agent_user_id_here
NEXT_PUBLIC_WHOP_APP_ID=your_whop_app_id_here

​
7. Install Whop Dev Proxy

For Whop integration to work in development, you need to install the Whop dev proxy globally:

npm install @whop-apps/dev-proxy -g

The Whop dev proxy is required for the iframe integration to work properly during development.

​
8. Run the Application

Lets start the Web Server with Whop Proxy. Run this command to start both the Whop proxy and Next.js development server:

whop-proxy --command 'npx next dev --turbopack'

You should see output indicating both the proxy and Next.js are running. The web app will be available at http://localhost:3000

Do NOT use npm run dev alone - it won’t include the Whop proxy and the iframe integration won’t work!

​
9. Configure App Settings in Whop

Important: You must configure these settings BEFORE installing the app to your community.

1

Set Base URL and App Path

  1. Go to your Whop app dashboard → Developer → Your App
  2. In the Hosting section, configure:
    • Base URL: http://localhost:3000/
    • App path: /experiences/[experienceId]
  3. Click Save to update the settings

If you skip this step, the app installation and iframe integration won’t work properly!

​
10. Accessing the app (locally)

1

Access the application via Whop iframe

  1. After installing the app, click Open Whop in the top right 2. When redirected to Whop, click the Settings button 3. Change the dropdown from Production to Localhost 4. Choose your port (usually 3000)
  2. You’ll now see the app running in Localhost.

​
11. Deploy to Vercel

Now let’s deploy your car modification AI app to production so users can access it from anywhere.

Push your code to GitHub

First, commit all your changes and push to GitHub:

git add .
git commit -m "Complete car modification AI app"
git remote add origin https://github.com/your-username/your-repo.git
git branch -M main
git push -u origin main

Create and deploy on Vercel

1

Create a new project on Vercel

Go to vercel.com and click “New Project”

2

Import your GitHub repository

Connect your GitHub account and import the repository containing your car modification app

3

Add environment variables

In the Vercel deployment settings, add all your environment variables:

# AI Service Configuration (Required)
OPENAI_API_KEY=your_openai_api_key

# Whop Integration (Required)
WHOP_API_KEY=your_whop_api_key_here
NEXT_PUBLIC_WHOP_AGENT_USER_ID=your_whop_agent_user_id_here
NEXT_PUBLIC_WHOP_APP_ID=your_whop_app_id_here
4

Deploy

Click “Deploy” and wait for the build to complete
5

Copy your Vercel URL

Once deployed, copy your production URL (e.g., https://your-app.vercel.app)

Update your Whop app settings

1

Open Whop Developer Settings

Go to Whop dashboard and navigate to your app’s settings in the developer panel

2

Update Base URL

In the “App Settings” section, change the Base URL from http://localhost:3000 to your Vercel URL: https://your-app.vercel.app

3

Save and test

Save the changes and test your app installation to ensure production mode is working (by switching to Production in the iframe)

Vercel Timeout Limitation: Vercel functions automatically timeout after 60 seconds on a hobby account. AI image generation might take longer than 60 seconds, which may cause errors. You can upgrade to a paid Vercel account to extend timeout limits.

​
12. Install to Your Whop Community

1

Install the App

  1. Go to your Whop company dashboard 2. Navigate to Settings → API keys 3. Click on your Car Modification AI app (or whatever name you gave it) 4. Find and copy the Installation Link 5. Visit the installation link and grant the necessary permissions

​
Troubleshooting

​
Need Help?