Build an AI Math Solver App with AI Pass SDK
Build an AI Math Solver App with AI Pass SDK
A math solver is one of the most useful educational tools you can build. Here's how to create one using AI Pass SDK — complete with step-by-step explanations.
What You'll Build
A clean math problem solver that:
- Accepts typed or pasted math problems
- Shows full step-by-step solutions
- Supports multiple math levels
- Lets users ask follow-up questions
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 Math Solver</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: -apple-system, sans-serif; max-width: 740px; margin: 40px auto; padding: 20px; }
h1 { font-size: 28px; margin-bottom: 4px; }
.subtitle { color: #666; margin-bottom: 20px; }
textarea { width: 100%; padding: 14px; font-size: 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-family: inherit; resize: vertical; }
textarea:focus { outline: none; border-color: #6366f1; }
.controls { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
select { padding: 10px; font-size: 15px; border: 1px solid #ddd; border-radius: 8px; flex: 1; }
button { padding: 12px 24px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; font-weight: 600; white-space: nowrap; }
#solution { margin-top: 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; white-space: pre-wrap; font-size: 15px; line-height: 1.7; min-height: 80px; color: #1e293b; }
.followup { margin-top: 16px; }
.followup textarea { height: 60px; font-size: 14px; }
</style>
</head>
<body>
<h1>🧮 AI Math Solver</h1>
<p class="subtitle">Type your math problem. Get step-by-step solutions with explanations.</p>
<textarea id="problem" rows="4" placeholder="Examples:
- Find the derivative of f(x) = x^3 + 2x^2 - 5x + 1
- Solve: 2x^2 - 7x + 3 = 0
- What is the integral of sin(x)cos(x)?
- A train leaves at 60mph... (word problems work too)"></textarea>
<div class="controls">
<select id="level">
<option value="middle school">Middle School</option>
<option value="high school" selected>High School</option>
<option value="undergraduate">University / College</option>
<option value="graduate">Graduate Level</option>
</select>
<button onclick="solveProblem()">Solve</button>
</div>
<div id="solution">Your solution will appear here...</div>
<div class="followup" id="followup-section" style="display:none">
<label style="font-weight:600; font-size:14px; color:#555">Have a follow-up question?</label>
<textarea id="followup" placeholder="e.g. Why did you factor out the 2 in step 3?"></textarea>
<button onclick="askFollowup()" style="margin-top:8px; padding:8px 16px; font-size:14px">Ask</button>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
var conversationHistory = [];
async function solveProblem() {
var problem = document.getElementById('problem').value.trim();
var level = document.getElementById('level').value;
var output = document.getElementById('solution');
if (!problem) return alert('Please enter a math problem.');
output.textContent = 'Solving...';
document.getElementById('followup-section').style.display = 'none';
var systemPrompt = 'You are an expert math tutor for ' + level + ' students. ' +
'When given a math problem: (1) identify the problem type, ' +
'(2) show EVERY step clearly, numbered, ' +
'(3) explain WHY each step is taken, ' +
'(4) highlight the final answer, ' +
'(5) verify the solution when applicable.';
conversationHistory = [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: 'Solve this problem: ' + problem }
];
try {
var r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: conversationHistory
});
var answer = r.choices[0].message.content;
conversationHistory.push({ role: 'assistant', content: answer });
output.textContent = answer;
document.getElementById('followup-section').style.display = 'block';
} catch (err) {
output.textContent = 'Error: ' + err.message;
}
}
async function askFollowup() {
var question = document.getElementById('followup').value.trim();
if (!question) return;
conversationHistory.push({ role: 'user', content: question });
var output = document.getElementById('solution');
output.textContent = output.textContent + '\n\n---\n\nThinking...';
try {
var r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: conversationHistory
});
var answer = r.choices[0].message.content;
conversationHistory.push({ role: 'assistant', content: answer });
output.textContent = output.textContent.replace('Thinking...', answer);
document.getElementById('followup').value = '';
} catch (err) {
console.error(err);
}
}
</script>
</body>
</html>
SDK Notes
Critical for GPT-5 models:
AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1, // REQUIRED — GPT-5 rejects default 0.7
max_tokens: 16000, // REQUIRED — detailed math solutions need many tokens
messages: [...]
})
// Response: r.choices[0].message.content
This also demonstrates a multi-turn conversation pattern — the follow-up question feature preserves full context by appending to conversationHistory.
Deploy and Earn
Option A: Self-host anywhere.
Option B: Publish on AI Pass — earn 50% commission on every API call your users make.