Build an AI Workout Generator App - Complete SDK Tutorial

Eiliya · March 9, 2026 · 5 min read · Development

Build an AI Workout Generator App - Complete SDK Tutorial

Learn how to build your own AI workout generator using the AI Pass SDK. Create personalized fitness plans with exercise routines, sets, reps, and scheduling.

What You'll Build

An AI-powered workout generator that can:

Generate custom workout plans based on goals and fitness level
Create routines for different equipment availability (gym, home, bodyweight)
Provide detailed exercise instructions
Schedule workouts by frequency and duration
Adapt plans for different fitness goals (weight loss, muscle gain, strength)

Prerequisites

Basic JavaScript/HTML knowledge
A web server or hosting platform
AI Pass account (free signup)

Step 1: Sign Up for AI Pass

Go to AI Pass and create a free account
Verify your email address
You'll get $1 free credit on signup - enough to test the full functionality

Step 2: Get Your Client ID from Developer Dashboard

Navigate to the Developer Dashboard at /panel/developer.html
Click on OAuth2 Clients in the sidebar
Click "Create New Client" and name it (e.g., "My Workout Generator")
Copy your Client ID - it looks like client_ODyf...

Important: The Client ID comes from the OAuth2 Clients page, NOT from your app slug.

Step 3: Initialize the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true
});

Why requireLogin: true? This eliminates the need to build your own authentication UI. When users interact with your app, they'll see a secure AI Pass login screen, get their $1 free credit, and start using your app immediately.

Step 4: Generate a Workout Plan

async function generateWorkoutPlan(goal, level, equipment, duration, frequency) {
  const prompt = `Create a personalized workout plan for ${goal}. Fitness level: ${level}. Equipment available: ${equipment}. Workout duration: ${duration} minutes. Frequency: ${frequency} times per week. Include warm-up, main workout with exercises (sets, reps, rest times), and cool-down. Provide detailed instructions for each exercise. Format in a clear, easy-to-read structure.`;

  const response = await aipass.generateCompletion({
    model: 'openai/gpt-4.1-mini',
    messages: [
      { role: 'system', content: 'You are a certified personal trainer and fitness expert. Create safe, effective, and motivating workout plans.' },
      { role: 'user', content: prompt }
    ],
    temperature: 1,
    max_tokens: 16000
  });

  return response.choices[0].message.content;
}

// Example usage
generateWorkoutPlan(
  'building lean muscle',
  'intermediate',
  'full gym access',
  '45',
  '4'
).then(plan => console.log(plan));

Step 5: Build Complete UI

<!DOCTYPE html>
<html>
<head>
  <title>AI Workout Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 50px auto; padding: 20px; background: #f8fafc; }
    .container { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    h1 { color: #1e293b; }
    .form-group { margin-bottom: 20px; }
    label { display: block; margin: 8px 0 5px; font-weight: bold; color: #334155; }
    select, input { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
    button { background: #059669; color: white; padding: 15px 30px; border: none; border-radius: 6px; font-size: 18px; cursor: pointer; width: 100%; font-weight: bold; }
    button:hover { background: #047857; }
    button:disabled { background: #9ca3af; cursor: not-allowed; }
    #output { margin-top: 30px; white-space: pre-wrap; line-height: 1.6; }
    .loading { text-align: center; padding: 40px; }
    .spinner { border: 4px solid #e2e8f0; border-top: 4px solid #059669; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <div class="container">
    <h1>💪 AI Workout Generator</h1>
    <p>Create a personalized workout plan based on your goals and fitness level.</p>
    
    <div class="form-group">
      <label>Fitness Goal</label>
      <select id="goal">
        <option value="building muscle and strength">Build Muscle & Strength</option>
        <option value="weight loss and fat burning">Weight Loss & Fat Burning</option>
        <option value="improving endurance and cardio">Improve Endurance & Cardio</option>
        <option value="general fitness and health">General Fitness & Health</option>
        <option value="flexibility and mobility">Flexibility & Mobility</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Fitness Level</label>
      <select id="level">
        <option value="beginner">Beginner</option>
        <option value="intermediate">Intermediate</option>
        <option value="advanced">Advanced</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Equipment Available</label>
      <select id="equipment">
        <option value="full gym access">Full Gym Access</option>
        <option value="basic home equipment (dumbbells, resistance bands)">Basic Home Equipment</option>
        <option value="minimal equipment (bodyweight only)">Bodyweight Only</option>
        <option value="dumbbells only">Dumbbells Only</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Workout Duration</label>
      <select id="duration">
        <option value="15">15 minutes</option>
        <option value="30">30 minutes</option>
        <option value="45" selected>45 minutes</option>
        <option value="60">60 minutes</option>
        <option value="90">90 minutes</option>
      </select>
    </div>
    
    <div class="form-group">
      <label>Workouts per Week</label>
      <select id="frequency">
        <option value="3">3 days</option>
        <option value="4" selected>4 days</option>
        <option value="5">5 days</option>
        <option value="6">6 days</option>
      </select>
    </div>
    
    <button onclick="generateWorkout()" id="generateBtn">Generate My Workout Plan ✨</button>
    
    <div id="output"></div>
  </div>
  
  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });
    
    async function generateWorkout() {
      const goal = document.getElementById('goal').value;
      const level = document.getElementById('level').value;
      const equipment = document.getElementById('equipment').value;
      const duration = document.getElementById('duration').value;
      const frequency = document.getElementById('frequency').value;
      const output = document.getElementById('output');
      const btn = document.getElementById('generateBtn');
      
      btn.disabled = true;
      btn.textContent = 'Generating...';
      output.innerHTML = '<div class="loading"><div class="spinner"></div><p>Creating your personalized workout...</p></div>';
      
      try {
        const prompt = `Create a personalized workout plan for ${goal}. Fitness level: ${level}. Equipment available: ${equipment}. Workout duration: ${duration} minutes. Frequency: ${frequency} times per week. Include: 1) Warm-up routine (5-10 minutes), 2) Main workout with exercises (name, sets, reps, rest time), 3) Cool-down and stretching. Provide detailed instructions for each exercise. Format clearly with sections. Include tips for progression and safety. Make it motivating and achievable.`;
        
        const response = await aipass.generateCompletion({
          model: 'openai/gpt-4.1-mini',
          messages: [
            { role: 'system', content: 'You are a certified personal trainer with 10+ years of experience. Create safe, effective, and motivating workout plans tailored to each individual.' },
            { role: 'user', content: prompt }
          ],
          temperature: 1,
          max_tokens: 16000
        });
        
        output.innerHTML = response.choices[0].message.content;
      } catch (error) {
        output.innerHTML = `<p style="color: #dc2626;">Error: ${error.message}</p>`;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Generate Another Plan ✨';
      }
    }
  </script>
</body>
</html>

Step 6: Embed and Monetize

After testing, use the </> button to get iframe code. Embed on your fitness site and earn 50% commission on every API call.

Next Steps

Replace YOUR_CLIENT_ID with your actual Client ID
Test your app on AI Pass
Add features like exercise videos, progress tracking
Share and start earning commission

Resources

Developer Dashboard: /panel/developer.html
SDK: https://aipass.one/aipass-sdk.js
Live Example: Workout Generator

Start building your AI workout generator today!

Build an AI Workout Generator App - Complete SDK Tutorial

Build an AI Workout Generator App - Complete SDK Tutorial

What You'll Build

Prerequisites

Step 1: Sign Up for AI Pass

Step 2: Get Your Client ID from Developer Dashboard

Step 3: Initialize the SDK

Step 4: Generate a Workout Plan

Step 5: Build Complete UI

Step 6: Embed and Monetize

Next Steps

Resources

Related Apps