AI car customizer
Build a GPT-powered car modification app and creators will be able to install it to their whops
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:
Install dependencies:
2. Get your Whop API credentials
Create a Whop App
- Go to https://whop.com/dashboard
- Navigate to Developer
- Click the Create App button
- Give your app a name like “Car Modification AI”
- Click Create
Get your API Key, Agent User ID, and App ID
After creating your app:
- Copy the App API Key - you’ll need this for
WHOP_API_KEY
- Copy the Agent User ID - you’ll need this for
WHOP_AGENT_USER_ID
- 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
Create OpenAI Account
- Go to platform.openai.com
- Click Sign In or Sign Up
- Complete the registration process
Get API Key
- Go to API Keys in the dashboard
- Click Create Key
- Give it a name like “Car Modification AI”
- Copy the API key - you’ll need this for
OPENAI_API_KEY
(ensure you have balance/payment method)
5. Configure Environment Variables
Create local environment file
Fill in Required Variables
Open .env
in your text editor and fill in these required fields:
7. Install Whop Dev Proxy
For Whop integration to work in development, you need to install the Whop dev proxy globally:
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:
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.
Set Base URL and App Path
- Go to your Whop app dashboard → Developer → Your App
- In the Hosting section, configure:
- Base URL:
http://localhost:3000/
- App path:
/experiences/[experienceId]
- Base URL:
- 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)
Access the application via Whop iframe
- 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)
- 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:
Create and deploy on Vercel
Create a new project on Vercel
Go to vercel.com and click “New Project”
Import your GitHub repository
Connect your GitHub account and import the repository containing your car modification app
Add environment variables
In the Vercel deployment settings, add all your environment variables:
Deploy
Copy your Vercel URL
Once deployed, copy your production URL (e.g., https://your-app.vercel.app
)
Update your Whop app settings
Open Whop Developer Settings
Go to Whop dashboard and navigate to your app’s settings in the developer panel
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
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
Install the App
- 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?
- Join the Developer Whop
- View the source code of this app here
- DM @AbdullahZHD on Whop