How to Build an AI Roast Generator with AI Pass SDK
How to Build an AI Roast Generator with AI Pass SDK
Want to build a fun, viral AI app that generates savage roasts? In this tutorial, you'll build a complete AI Roast Me generator using the AI Pass SDK. Users describe themselves and the AI fires back with witty, personalized burns.
The best part: you earn 50% commission on every API call your users make. No managing API keys, no billing headaches — AI Pass handles all of that.
What You'll Build
A web app where users:
- Type a description of themselves
- Pick a roast intensity (light, medium, savage)
- Click "Roast Me" and get AI-generated roasts
Step 1: Create Your AI Pass Account
- Go to aipass.one and sign up
- Verify your email (required for payouts)
- Open the Developer Dashboard
Step 2: Create an OAuth2 Client
- In the Developer Dashboard, go to OAuth2 Clients
- Click Create Client
- Copy your Client ID (looks like
client_XXXX...) — you'll need this in code
Step 3: Build the App
Create an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Roast Me</title>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
<style>
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
textarea { width: 100%; height: 80px; margin: 10px 0; }
select, button { padding: 10px 20px; margin: 5px; }
#result { margin-top: 20px; padding: 20px; background: #1a1a2e; color: #e94560; border-radius: 8px; display: none; font-size: 18px; }
</style>
</head>
<body>
<h1>🔥 AI Roast Me</h1>
<p>Describe yourself and prepare to get burned.</p>
<textarea id="description" placeholder="I work in tech, drink too much coffee, and think I'm funny..."></textarea>
<select id="intensity">
<option value="light">Light Teasing</option>
<option value="medium" selected>Medium Roast</option>
<option value="savage">Savage</option>
</select>
<button onclick="roastMe()">🔥 Roast Me</button>
<div id="result"></div>
<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
async function roastMe() {
const desc = document.getElementById('description').value;
const intensity = document.getElementById('intensity').value;
const resultDiv = document.getElementById('result');
resultDiv.style.display = 'block';
resultDiv.textContent = 'Generating roast...';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: `You are a comedy roast writer. Generate 3 ${intensity} roasts based on the person's description. Be clever and funny, not mean-spirited. Format each roast on its own line with a 🔥 emoji.` },
{ role: 'user', content: desc }
]
});
resultDiv.textContent = r.choices[0].message.content;
} catch (e) {
resultDiv.textContent = 'Error: ' + e.message;
}
}
</script>
</body>
</html>
Step 4: Deploy
Option A: Self-host anywhere Host this HTML file on your own server, GitHub Pages, Netlify, Vercel — anywhere. The SDK handles auth and billing automatically.
Option B: Publish on AI Pass Publish directly to the AI Pass catalog and get a dedicated page with the embed (</>) button for easy sharing.
Key Details
requireLogin: trueshows the auth screen automatically — no custom login UI neededtemperature: 1andmax_tokens: 16000are required for GPT-5 models via the SDKr.choices[0].message.contentis how you access the generated text- Users get $1 free credit on signup — then pay as they go
- You earn 50% commission on every API call. More users = more revenue.
SDK Reference
- SDK URL: https://aipass.one/aipass-sdk.js
- Developer Dashboard: /panel/developer.html
- Full docs: /docs/sdk/reference.html
That's it! A fun, viral app in under 50 lines of code. Build it, share it, and earn commission on every roast. 🔥