Build an AI Interview Coach App with AI Pass SDK
Build an AI Interview Coach App with AI Pass SDK
Interview prep tools are high-value and high-engagement. Users return multiple times before a job search. Here's how to build a complete AI interview coach using AI Pass SDK.
What You'll Build
An interactive mock interview app where users:
- Specify the role they're interviewing for
- Answer AI-generated interview questions
- Get detailed feedback on each answer
- Track their improvement
Setup
- Sign up at aipass.one
- Go to Developer Dashboard > OAuth2 Clients
- Create a client and copy your Client ID
The App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Interview Coach</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; max-width: 760px; margin: 40px auto; padding: 20px; color: #1e293b; }
h1 { font-size: 28px; }
.setup-panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
input, select, textarea { width: 100%; padding: 10px 14px; font-size: 15px; border: 1px solid #ddd; border-radius: 8px; margin-top: 6px; font-family: inherit; }
label { display: block; font-weight: 600; font-size: 14px; color: #475569; margin-top: 12px; }
.btn { padding: 12px 24px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; margin-top: 12px; }
.btn:hover { background: #4f46e5; }
.btn-green { background: #10b981; }
.interview-panel { display: none; }
.question-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 20px; margin: 16px 0; font-size: 16px; line-height: 1.6; }
.interviewer-label { font-size: 12px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.feedback-box { background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; padding: 16px 20px; margin: 12px 0; white-space: pre-wrap; font-size: 15px; line-height: 1.6; }
.progress { font-size: 13px; color: #64748b; margin-bottom: 8px; }
</style>
</head>
<body>
<h1>🎯 AI Interview Coach</h1>
<div class="setup-panel" id="setup">
<label>Job Role / Position</label>
<input id="role" type="text" placeholder="e.g. Software Engineer, Product Manager, Marketing Lead...">
<label>Experience Level</label>
<select id="exp-level">
<option value="entry-level">Entry Level (0-2 years)</option>
<option value="mid-level" selected>Mid Level (3-6 years)</option>
<option value="senior">Senior (7+ years)</option>
<option value="executive">Executive / Leadership</option>
</select>
<label>Interview Type</label>
<select id="interview-type">
<option value="behavioral">Behavioral (STAR method)</option>
<option value="technical">Technical</option>
<option value="situational">Situational</option>
<option value="mixed" selected>Mixed (all types)</option>
</select>
<button class="btn" onclick="startInterview()">Start Mock Interview</button>
</div>
<div class="interview-panel" id="interview">
<div class="progress" id="progress">Question 1 of 5</div>
<div class="question-box">
<div class="interviewer-label">Interviewer</div>
<div id="question-text">Loading...</div>
</div>
<label>Your Answer</label>
<textarea id="answer" rows="5" placeholder="Type your answer here... Take your time, just like a real interview."></textarea>
<button class="btn" onclick="submitAnswer()">Submit Answer and Get Feedback</button>
<div class="feedback-box" id="feedback" style="display:none"></div>
<button class="btn btn-green" id="next-btn" onclick="nextQuestion()" style="display:none; margin-left: 8px;">Next Question</button>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
var questions = [];
var currentQ = 0;
var role = '', level = '', interviewType = '';
async function startInterview() {
role = document.getElementById('role').value.trim();
level = document.getElementById('exp-level').value;
interviewType = document.getElementById('interview-type').value;
if (!role) return alert('Please enter the job role.');
document.getElementById('question-text').textContent = 'Generating interview questions...';
document.getElementById('setup').style.display = 'none';
document.getElementById('interview').style.display = 'block';
var r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: 'Generate exactly 5 ' + interviewType + ' interview questions for a ' + level + ' ' + role + ' position. Return ONLY a JSON array of question strings, no explanations.'
},
{
role: 'user',
content: 'Generate the 5 interview questions now.'
}
]
});
try {
var raw = r.choices[0].message.content;
var match = raw.match(/\[[\s\S]*\]/);
questions = JSON.parse(match ? match[0] : raw);
} catch (e) {
questions = [
'Tell me about yourself and why you are interested in this role.',
'Describe a challenging project you worked on and how you handled it.',
'What is your greatest professional achievement so far?',
'How do you handle tight deadlines and competing priorities?',
'Where do you see yourself in 3-5 years?'
];
}
showQuestion(0);
}
function showQuestion(idx) {
currentQ = idx;
document.getElementById('progress').textContent = 'Question ' + (idx + 1) + ' of ' + questions.length;
document.getElementById('question-text').textContent = questions[idx];
document.getElementById('answer').value = '';
document.getElementById('feedback').style.display = 'none';
document.getElementById('next-btn').style.display = 'none';
}
async function submitAnswer() {
var answer = document.getElementById('answer').value.trim();
if (!answer) return alert('Please provide an answer first.');
var fb = document.getElementById('feedback');
fb.textContent = 'Analyzing your answer...';
fb.style.display = 'block';
var r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: 'You are an expert interview coach for ' + level + ' ' + role + ' positions. Format feedback as:\n\nStrengths: (what worked well)\nAreas to Improve: (specific suggestions)\nScore: X/10\nImproved Example: (brief rewrite showing best practices)'
},
{
role: 'user',
content: 'Question: ' + questions[currentQ] + '\n\nAnswer: ' + answer
}
]
});
fb.textContent = r.choices[0].message.content;
if (currentQ < questions.length - 1) {
document.getElementById('next-btn').style.display = 'inline-block';
} else {
document.getElementById('next-btn').textContent = 'Interview Complete!';
document.getElementById('next-btn').style.display = 'inline-block';
document.getElementById('next-btn').onclick = function() {
alert('Great practice session! Review your feedback and try again to improve your scores.');
};
}
}
function nextQuestion() {
showQuestion(currentQ + 1);
}
</script>
</body>
</html>
SDK Notes
// Required for GPT-5 models:
AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // REQUIRED
max_tokens: 16000, // REQUIRED
messages: [...]
})
// Response: r.choices[0].message.content
Deploy and Earn
- Option A: Self-host anywhere
- Option B: Publish on AI Pass — earn 50% commission on every API call