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

​
Summary

This tutorial will guide you through building a chat bot that can answer questions in whop communities. View the final product here by installing the app to your whop.

​
1. Set up your Next.js project

Clone the AI Support Bot repository:

git clone https://github.com/VortexxJS/whop-ai-support (not available yet)
cd whop-ai-bot

Install dependencies:

npm install

​
2. Get your Whop API credentials

1

Create a Whop App

  1. Go to https://whop.com/dashboard/developer
  2. Navigate to Developer
  3. Click the Create App button
  4. Give your app a name like “AI Support Bot”
  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 bot to send messages on behalf of your app.

​
3. Set up Supabase Database

1

Create a Supabase Project

  1. Go to https://supabase.com
  2. Click Start your project
  3. Sign in or create an account
  4. Click New project
  5. Choose your organization
  6. Enter a Database Name (e.g., “ai-support-bot”)
  7. Enter a Database Password (save this!)
  8. Select a Region close to your users
  9. Click Create new project
2

Get Database Connection Strings

Once your project is created:

  1. Go to Settings → Database
  2. Scroll down to Connection string
  3. Copy the URI format for DATABASE_URL
  4. Copy the Direct connection for DIRECT_URL

Replace [YOUR-PASSWORD] in both URLs with the database password you created.

​
4. Get OpenRouter AI API Key

1

Create OpenRouter Account

  1. Go to https://openrouter.ai
  2. Click Sign In or Sign Up
  3. Complete the registration process
2

Get API Key

  1. Go to Keys in the dashboard
  2. Click Create Key
  3. Give it a name like “AI Support Bot”
  4. Copy the API key - you’ll need this for OPENROUTER_API_KEY

OpenRouter gives you $1 free credit when you sign up, which is more than enough for testing with Gemini 2.0 Flash!

​
5. Configure Environment Variables

1

Copy Environment Template

cp env.example .env
2

Fill in Required Variables

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

# Database Configuration (Required)
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@[HOST]:6543/postgres?pgbouncer=true"
DIRECT_URL="postgresql://postgres:[YOUR-PASSWORD]@[HOST]:5432/postgres"

# AI Service Configuration (Required)
OPENROUTER_API_KEY="your_openrouter_api_key_here"
OPENROUTER_MODEL="google/gemini-2.0-flash-001"

# Whop Integration (Required)
WHOP_API_KEY="your_whop_app_api_key_here"
WHOP_AGENT_USER_ID="your_bot_user_id_here"
WHOP_APP_ID="your_whop_app_id_here"
All other variables are optional and have sensible defaults.

​
6. Set up the Database

Push the database schema to Supabase:

npm run db:push

This will create the necessary tables:

  • companies - Store bot settings for each Whop company
  • experience_mappings - Map Whop experiences to companies

​
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

1

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!

2

Start the AI Bot (New Terminal)

In a new terminal window:

npm run bot

You should see:

🚀 Starting Whop AI Bot...

Features:
  • Smart AI question detection
  • Admin-only configuration
  • Real-time responses
  • Rate limiting & caching

✅ Bot connected to Whop
🤖 Listening for messages and commands...

​
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: /company/[companyId]
  3. Click Save to update the settings

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

​
10. Install to Your Whop Community

  1. Go to your Whop company dashboard
  2. Navigate to Settings → API keys
  3. Click on your AI Support Bot app
  4. Find and copy the Installation Link
  5. Visit the installation link and grant the necessary permissions

​
11. Configure Your Bot

1

Access Bot Settings 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)
  5. You’ll now see the bot configuration dashboard

Only company admins can access the bot settings page.

2

Set Up Your Bot

Configure these settings:

  • Enable Bot: Turn on the AI responses
  • Knowledge Base: Add information about your community
  • Response Style: Choose professional, friendly, casual, or technical
  • Preset Q&A: Add common questions with instant answers
  • Custom Instructions: Fine-tune the AI’s behavior

​
12. Test Your Bot

  1. Go to your Whop community chat
  2. Ask a question like “How do I join?”
  3. The bot should respond within a few seconds

​
Troubleshooting

​
What’s Next?

Your AI Support Bot is now ready! Here are some next steps:

  • Customize responses: Add more preset Q&A pairs for instant answers
  • Train the AI: Update the knowledge base with community-specific information
  • Monitor usage: Check the bot console for statistics and performance
  • Scale up: Deploy to production using Vercel, Railway, or your preferred platform

The bot saves 80-90% on AI costs through smart question detection and caching. Perfect for high-volume communities!

​
Need Help?