Build an AI Decision Coach App — Complete SDK Tutorial
Build an AI Decision Coach App — Complete SDK Tutorial
Decision-making tools are among the fastest-growing categories in productivity AI. Users love them because they reduce anxiety and increase confidence in hard choices. In this tutorial, you'll build a complete AI Decision Coach web app using the AI Pass SDK — no backend required, no API key management, and you earn 50% commission on every API call your users make.
What You'll Build
A web app where users:
- Describe their decision scenario
- Get structured AI analysis with pros, cons, and a recommendation
- Ask follow-up questions in a conversation flow
Step 1: Get Your Client ID
- Log in to AI Pass
- Go to Developer Dashboard → OAuth2 Clients
- Create a new client, name it "Decision Coach"
- Copy your Client ID — looks like
client_XXXX...
This is YOUR_CLIENT_ID in the code below. Safe in frontend code since it only grants access via user OAuth.
Step 2: The Complete App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Decision Coach</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f0f4f8; min-height: 100vh; }
.container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
h1 { font-size: 2rem; color: #1a202c; margin-bottom: 8px; }
.subtitle { color: #4a5568; margin-bottom: 32px; }
.card { background: white; border-radius: 16px; padding: 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 24px; }
textarea { width: 100%; padding: 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1rem; resize: vertical; min-height: 120px; font-family: inherit; }
textarea:focus { outline: none; border-color: #667eea; }
button { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 14px 32px; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 16px; }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.result { background: #f7fafc; border-left: 4px solid #667eea; padding: 24px; border-radius: 0 12px 12px 0; white-space: pre-wrap; line-height: 1.7; }
</style>
</head>
<body>
<div class="container">
<h1>AI Decision Coach</h1>
<p class="subtitle">Describe your situation. Get clear, unbiased advice.</p>
<div class="card">
<textarea id="scenario" placeholder="I have a job offer that pays 30% more but requires relocating. I have family here and a stable life. Should I take it?"></textarea>
<button id="analyzeBtn" onclick="analyzeDecision()">Analyze My Decision</button>
</div>
<div id="output" style="display:none" class="card">
<h3 style="margin-bottom:16px;color:#2d3748">Decision Analysis</h3>
<div id="result" class="result"></div>
<textarea id="followup" placeholder="Ask a follow-up question..." style="margin-top:24px"></textarea>
<button onclick="followUp()">Ask Follow-Up</button>
</div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
const history = [];
async function analyzeDecision() {
const scenario = document.getElementById('scenario').value.trim();
if (!scenario) return alert('Please describe your decision scenario.');
const btn = document.getElementById('analyzeBtn');
btn.disabled = true;
btn.textContent = 'Analyzing...';
const systemPrompt = 'You are an expert decision coach. When someone presents a scenario: 1) Restate the core tension, 2) List key factors, 3) Analyze each option pros/cons, 4) Give a clear recommendation, 5) Suggest one follow-up question. Be direct and practical.';
history.push({ role: 'user', content: scenario });
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [{ role: 'system', content: systemPrompt }, ...history]
});
const analysis = r.choices[0].message.content;
history.push({ role: 'assistant', content: analysis });
document.getElementById('result').textContent = analysis;
document.getElementById('output').style.display = 'block';
document.getElementById('output').scrollIntoView({ behavior: 'smooth' });
} catch (e) {
alert('Error: ' + e.message);
} finally {
btn.disabled = false;
btn.textContent = 'Analyze My Decision';
}
}
async function followUp() {
const question = document.getElementById('followup').value.trim();
if (!question) return;
history.push({ role: 'user', content: question });
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: 'You are an expert decision coach. Continue helping the user work through their decision.' },
...history
]
});
const response = r.choices[0].message.content;
history.push({ role: 'assistant', content: response });
document.getElementById('result').textContent += '\n\n---\n\n' + response;
document.getElementById('followup').value = '';
}
</script>
</body>
</html>
Key SDK Patterns
Initialize
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID', // From Developer Dashboard -> OAuth2 Clients
requireLogin: true, // Shows auth screen automatically
darkMode: false
});
Generate Completion
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // Always include for GPT-5 models
max_tokens: 16000, // Always include — GPT-5 reasoning needs more tokens
messages: [
{ role: 'system', content: 'You are a decision coach...' },
{ role: 'user', content: userInput }
]
});
const text = r.choices[0].message.content;
Important: Always include
temperature: 1andmax_tokens: 16000for GPT-5 models. Without these, you may get empty or truncated responses.
Deploy
Option A: Self-Host
Upload the single HTML file to GitHub Pages, Netlify, or Vercel — no backend needed.
Option B: Publish on AI Pass
Publish in the AI Pass catalog and earn 50% commission on every API call your users make. Use the </> embed button at the bottom-right of your published app to get iframe code for any website.