Build an AI Viral Hook Generator App — SDK Tutorial
Build an AI Viral Hook Generator App — SDK Tutorial
Content creator tools have massive recurring demand — creators constantly need fresh hooks. In this tutorial, you'll build a platform-specific viral hook generator using the AI Pass SDK with zero backend.
Setup
- Sign up at aipass.one
- Developer Dashboard → OAuth2 Clients → Create new client
- Copy your
YOUR_CLIENT_ID
Complete App Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Viral Hook Generator</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #0f0f23; color: #e2e8f0; padding: 24px; }
.container { max-width: 760px; margin: 0 auto; }
h1 { background: linear-gradient(135deg, #f093fb, #f5576c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; }
.card { background: #1a1a3e; border: 1px solid #2d2d5e; border-radius: 16px; padding: 28px; margin-bottom: 20px; }
textarea, select { width: 100%; padding: 12px 14px; background: #0f0f23; border: 1px solid #2d2d5e; border-radius: 10px; color: #e2e8f0; font-size: 1rem; margin-bottom: 12px; font-family: inherit; }
textarea { resize: vertical; min-height: 80px; }
button { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; border: none; padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; }
.hook-item { background: #0f0f23; border: 1px solid #2d2d5e; border-radius: 10px; padding: 16px; margin: 12px 0; cursor: pointer; }
.hook-item:hover { border-color: #f093fb; }
.hook-type { font-size: 0.75rem; color: #f093fb; text-transform: uppercase; font-weight: 600; }
.hook-text { font-size: 1rem; line-height: 1.6; margin: 6px 0; }
.hook-why { font-size: 0.85rem; color: #718096; }
label { font-size: 0.9rem; color: #a0aec0; display: block; margin-bottom: 4px; }
</style>
</head>
<body>
<div class="container">
<h1>Viral Hook Generator</h1>
<p style="color:#a0aec0;margin-bottom:24px">Write hooks that stop the scroll. Click any hook to copy it.</p>
<div class="card">
<label>What is your content about?</label>
<textarea id="topic" placeholder="E.g., How I grew my newsletter to 10,000 subscribers without running ads"></textarea>
<label>Platform</label>
<select id="platform">
<option value="TikTok/Reels">TikTok / Instagram Reels</option>
<option value="LinkedIn">LinkedIn</option>
<option value="YouTube">YouTube</option>
<option value="Twitter/X">Twitter / X</option>
<option value="Instagram">Instagram (static post)</option>
</select>
<label>Target Audience</label>
<select id="audience">
<option value="entrepreneurs and founders">Entrepreneurs & Founders</option>
<option value="content creators">Content Creators</option>
<option value="developers">Developers & Tech</option>
<option value="marketers">Marketers</option>
<option value="general audience">General Audience</option>
</select>
<button onclick="generateHooks()">Generate Viral Hooks</button>
</div>
<div id="results" style="display:none" class="card">
<h3 style="margin-bottom:16px">Your Hooks (click to copy)</h3>
<div id="hookList"></div>
</div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
async function generateHooks() {
const topic = document.getElementById('topic').value.trim();
const platform = document.getElementById('platform').value;
const audience = document.getElementById('audience').value;
if (!topic) return alert('Please describe your content topic.');
const btn = document.querySelector('button');
btn.disabled = true; btn.textContent = 'Generating...';
const system = 'Generate 6 viral hooks for ' + platform + ' targeting ' + audience + '. Return ONLY JSON: {"hooks":[{"text":"","type":"","why":""}]}. Types: curiosity gap, contrarian, personal story, shocking stat, relatable struggle, bold promise.';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: system },
{ role: 'user', content: 'Topic: ' + topic }
]
});
let content = r.choices[0].message.content;
if (content.includes('```')) content = content.split('```')[1].replace(/^json/, '').trim();
const data = JSON.parse(content);
const list = document.getElementById('hookList');
list.innerHTML = '';
data.hooks.forEach(hook => {
const div = document.createElement('div');
div.className = 'hook-item';
div.innerHTML = '<div class="hook-type">' + hook.type + '</div><div class="hook-text">' + hook.text + '</div><div class="hook-why">Why it works: ' + hook.why + '</div>';
div.onclick = () => {
navigator.clipboard.writeText(hook.text);
div.style.borderColor = '#68d391';
setTimeout(() => div.style.borderColor = '#2d2d5e', 2000);
};
list.appendChild(div);
});
document.getElementById('results').style.display = 'block';
} catch (e) {
alert('Error: ' + e.message);
} finally {
btn.disabled = false; btn.textContent = 'Generate Viral Hooks';
}
}
</script>
</body>
</html>
Key Pattern: Multi-Output JSON Generation
// Higher temperature = more creative, diverse outputs
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // Required for GPT-5 + enables creativity
max_tokens: 16000, // Required for GPT-5
messages: [
{ role: 'system', content: 'Return JSON: {"hooks":[{text, type, why}]}. Only JSON.' },
{ role: 'user', content: 'Platform: ' + platform + '. Topic: ' + topic }
]
});
Deploy & Earn
- Self-host: Single HTML file, deploy to GitHub Pages or Netlify in minutes
- AI Pass catalog: Publish and earn 50% commission on every API call. Content creator tools have high repeat usage — strong passive income potential.
- Use the </> embed button on your published app to get iframe code for any website