AI
Pass

How to Build an AI Headshot Generator with AI Pass SDK

Eiliya · February 22, 2026 · 2 min read · tutorial

How to Build an AI Headshot Generator with AI Pass SDK

Build your own AI Headshot Generator with the AI Pass SDK. Users pay directly, you earn 50% commission.

Quick Overview

  • Built-in OAuth2 authentication
  • Users pay AI Pass, you get 50% cut
  • Self-host anywhere OR publish to AI Pass catalog
  • Zero infrastructure management

Step 1: Sign Up & Get Client ID

  1. Sign up at AI Pass
  2. Go to Developer Dashboard
  3. Navigate to OAuth2 Clients
  4. Create a new client
  5. Copy your Client ID

Step 2: Initialize the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
  const aipass = new AIPass({
    clientId: 'YOUR_CLIENT_ID',  // From Developer Dashboard
    requireLogin: true  // Force user login before API calls
  });
</script>

Critical: requireLogin: true ensures users authenticate before your app makes API calls. This handles payments automatically.

Step 3: Make API Calls

// Example: AI Headshot Generator
async function generateResult(input) {
  const response = await aipass.generateImage({
    model: 'flux-pro/v1.1',
    prompt: input,
    temperature: 1,  // Required for GPT-5 compatibility
    max_tokens: 16000  // Required for GPT-5 reasoning
  });

  // Access the result
  const imageUrl = response.data[0].url;
  return imageUrl;
}

Step 4: Deploy

Option A: Self-Host Anywhere

The SDK is just JavaScript. Deploy to:

  • Vercel, Netlify, Cloudflare Pages
  • Your own server (Node.js, Python, PHP, etc.)
  • Static hosting (GitHub Pages, AWS S3)

Option B: Publish to AI Pass Catalog

Hosted for free on AI Pass and listed in the app directory.

Pricing & Commission

  • Users: Pay as you go, $1 free credit on signup
  • Developers: 50% commission on every transaction
  • Zero infrastructure costs when self-hosting

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>AI Headshot Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
    input, button { width: 100%; padding: 12px; margin: 10px 0; }
    button { background: #007bff; color: white; border: none; cursor: pointer; }
    #result { margin-top: 20px; padding: 15px; background: #f5f5f5; }
  </style>
</head>
<body>
  <h1>AI Headshot Generator</h1>
  <input type="text" id="userInput" placeholder="Enter your request...">
  <button onclick="generate()">Generate</button>
  <div id="result"></div>

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

    async function generate() {
      const input = document.getElementById('userInput').value;
      document.getElementById('result').textContent = 'Generating...';

      try {
        const response = await aipass.generateImage({
          model: 'flux-pro/v1.1',
          prompt: input,
          temperature: 1,
          max_tokens: 16000
        });

        const imageUrl = response.data[0].url;
        document.getElementById('result').innerHTML = `
          <img src="${imageUrl}" style="max-width: 100%; border-radius: 8px;">
        `;
      } catch (error) {
        document.getElementById('result').textContent = 'Error: ' + error.message;
      }
    }
  </script>
</body>
</html>

What's Next?

Start building your AI Headshot Generator today and earn 50% commission on every transaction!

Related Apps

ai-headshot