How to Build an AI Posture Analyzer App with AI Pass SDK
How to Build an AI Posture Analyzer App with AI Pass SDK
Learn how to build an AI-powered posture analyzer that analyzes photos and provides alignment feedback. Your users pay directly for AI usage — no API keys or subscriptions for you to manage.
What You'll Build
A posture analyzer app that:
- Accepts photo uploads
- Uses MediaPipe for pose detection
- Generates personalized feedback with AI
- Handles billing automatically via AI Pass
Prerequisites
- Basic HTML, CSS, JavaScript knowledge
- A free AI Pass account
- An OAuth2 Client ID (from Developer Dashboard)
Step 1: Create Your AI Pass Account
- Go to AI Pass and click Sign Up
- Verify your email address
- You get $1 free credit to test with
Step 2: Create an OAuth2 Client
This is how you earn 50% commission on every API call:
- Go to Developer Dashboard
- Click OAuth2 Clients → Create Client
- Give it a name (e.g., "Posture Analyzer App")
- Copy your Client ID — it looks like
client_XXXX...
This Client ID tracks all API calls from your app. You'll receive 50% commission on each call!
Step 3: Build the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Posture Analyzer</title>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils"></script>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
.upload-area { border: 2px dashed #ccc; padding: 40px; text-align: center; margin: 20px 0; }
.result { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 8px; }
canvas { max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>🧍 AI Posture Analyzer</h1>
<p>Upload a photo to analyze your posture</p>
<div class="upload-area">
<input type="file" id="photoInput" accept="image/*">
</div>
<div id="preview"></div>
<div id="result" class="result" style="display:none;"></div>
<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
// Initialize AI Pass SDK
// Replace YOUR_CLIENT_ID with your OAuth2 Client ID
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
const photoInput = document.getElementById('photoInput');
const preview = document.getElementById('preview');
const result = document.getElementById('result');
photoInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
// Display preview
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.style.maxWidth = '100%';
preview.innerHTML = '';
preview.appendChild(img);
result.style.display = 'block';
result.textContent = 'Analyzing...';
try {
// Load MediaPipe Pose
const pose = new Pose({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
}});
await pose.initialize();
// Analyze pose
const landmarks = await pose.send({image: img});
// Prepare analysis prompt
const prompt = `Analyze this posture based on these landmarks:
Shoulders: Y difference ${Math.abs(landmarks[11].y - landmarks[12].y).toFixed(2)}
Hips: Y difference ${Math.abs(landmarks[23].y - landmarks[24].y).toFixed(2)}
Head: X ${landmarks[0].x.toFixed(2)}, Y ${landmarks[0].y.toFixed(2)}
Provide:
1. Alignment scores (0-100) for shoulders, hips, head, knees, spine
2. Specific issues identified
3. 3 exercise recommendations`;
// Generate AI feedback
const response = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{role: 'system', content: 'You are a posture expert. Provide clear, actionable feedback.'},
{role: 'user', content: prompt}
]
});
result.innerHTML = '<h3>Analysis Results</h3>' +
response.choices[0].message.content.replace(/\n/g, '<br>');
} catch (error) {
result.textContent = 'Error: ' + error.message;
}
});
</script>
</body>
</html>
Step 4: Deploy Your App
You have two options:
Option A: Self-Host Anywhere
Upload the HTML file to:
- Your own server
- GitHub Pages
- Netlify
- Vercel
- Any static hosting
The AI Pass SDK handles billing automatically. When users click the AI Pass button, they'll see a login screen, and you'll earn 50% commission on every API call they make.
Option B: Publish on AI Pass Catalog
- Go to Developer Dashboard
- Click Create App → HOSTED
- Paste your HTML content
- Add app details (name, description, icon)
- Click Publish
You'll get a dedicated page on AI Pass plus an embed/iframe feature users can use on their own sites.
Step 5: Share Your App
Use the </> button (bottom-right) on your app page to get embed code. Share it on:
- Your portfolio website
- Social media
- Developer communities
- Wellness blogs
How You Earn Money
Every API call made through your OAuth2 Client includes a commission. You receive 50% of that commission.
- User signs up → gets $1 free credit
- User uses your app → API calls are tracked to your Client ID
- User buys more credits → you earn 50% on every call
No billing management for you. AI Pass handles payments, fraud prevention, and customer support.
Next Steps
- Add more pose features (real-time camera capture, before/after comparison)
- Create exercise video tutorials
- Build a history feature to track progress over time
- Add sharing functionality
Get Your Client ID and start building today!