Build an AI Startup Name Generator App — SDK Tutorial
Build an AI Startup Name Generator App — SDK Tutorial
Founder tools are a reliable niche — naming is a perennial need and there's never a "good enough" solution. Build a startup name generator using the AI Pass SDK with zero backend infrastructure.
Setup
- Sign up at aipass.one
- Developer Dashboard → OAuth2 Clients → New Client
- Copy
YOUR_CLIENT_ID
Complete App Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Startup Name Generator</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; }
.container { max-width: 760px; margin: 0 auto; }
.card { background: white; border-radius: 16px; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 20px; }
textarea, select { width: 100%; padding: 12px 14px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; font-family: inherit; margin-bottom: 12px; }
button { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; }
.name-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin: 12px 0; }
.name-title { font-size: 1.6rem; font-weight: 700; color: #1a202c; }
.tagline { color: #4a5568; font-style: italic; margin: 6px 0; }
.concept { font-size: 0.9rem; color: #718096; margin-top: 8px; }
.domain-hint { font-size: 0.8rem; background: #ebf8ff; color: #2b6cb0; padding: 4px 10px; border-radius: 20px; display: inline-block; margin-top: 8px; }
label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 4px; color: #4a5568; }
</style>
</head>
<body>
<div class="container">
<h1>AI Startup Name Generator</h1>
<p style="color:#718096;margin-bottom:24px">Describe your startup. Get creative name ideas with taglines and domain hints.</p>
<div class="card">
<label>What does your startup do?</label>
<textarea id="description" placeholder="E.g., We help small business owners automate their bookkeeping using AI. Target audience is solo consultants and freelancers."></textarea>
<label>Naming style</label>
<select id="style">
<option value="minimalist">Minimalist / Abstract (Notion, Stripe, Figma)</option>
<option value="metaphorical">Metaphorical (Amazon, Apple, Rocket)</option>
<option value="descriptive compound">Descriptive Compound (ProductHunt, DoorDash)</option>
<option value="invented portmanteau">Invented Portmanteau (Pinterest, Instagram)</option>
<option value="human or character name">Human / Character (Mailchimp, Hayola)</option>
</select>
<label>Brand vibe</label>
<select id="vibe">
<option value="professional and trustworthy">Professional & Trustworthy</option>
<option value="playful and approachable">Playful & Approachable</option>
<option value="bold and disruptive">Bold & Disruptive</option>
<option value="minimal and technical">Minimal & Technical</option>
<option value="warm and human">Warm & Human</option>
</select>
<button onclick="generateNames()">Generate Names</button>
</div>
<div id="results" style="display:none" class="card">
<h3 style="margin-bottom:16px">Name Ideas</h3>
<div id="nameList"></div>
</div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
async function generateNames() {
const description = document.getElementById('description').value.trim();
const style = document.getElementById('style').value;
const vibe = document.getElementById('vibe').value;
if (!description) return alert('Please describe your startup.');
const btn = document.querySelector('button');
btn.disabled = true; btn.textContent = 'Generating...';
const system = 'You are a brand naming expert. Generate 8 startup names. Style: ' + style + '. Vibe: ' + vibe + '. Return ONLY JSON: {"names":[{"name":"","tagline":"","concept":"","domain_hint":""}]}';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: system },
{ role: 'user', content: description }
]
});
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('nameList');
list.innerHTML = '';
data.names.forEach(n => {
const div = document.createElement('div');
div.className = 'name-card';
div.innerHTML = '<div class="name-title">' + n.name + '</div><div class="tagline">"' + n.tagline + '"</div><div class="concept">' + n.concept + '</div><span class="domain-hint">' + n.domain_hint + '</span>';
list.appendChild(div);
});
document.getElementById('results').style.display = 'block';
} catch (e) {
alert('Error: ' + e.message);
} finally {
btn.disabled = false; btn.textContent = 'Generate Names';
}
}
</script>
</body>
</html>
Key SDK Notes
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID', // From Developer Dashboard -> OAuth2 Clients
requireLogin: true
});
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // Required for GPT-5 models
max_tokens: 16000, // Required for GPT-5 models
messages: [...]
});
Deploy & Earn
- Self-host: Single HTML file — GitHub Pages, Netlify, or Vercel
- AI Pass catalog: Publish and earn 50% commission on all API calls
- Use the </> embed button to drop your app into any website