AI
Pass

Build an AI Avatar Generator with AI Pass SDK

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

Build an AI Avatar Generator with AI Pass SDK

This tutorial walks you through building a friendly AI avatar generator — a small app that turns a short text description into a unique profile picture using the AI Pass SDK.

What You'll Build

A simple avatar generator where people describe their ideal profile picture and get a custom AI-created image back. AI Pass handles auth and billing for you — and you earn 50% commission on every API call.

Step 1: Create Your AI Pass Account

Head to aipass.one, sign up, and confirm your email.

Step 2: Create an OAuth2 Client

  1. Go to Developer Dashboard
  2. Open OAuth2 Clients
  3. Click Create Client
  4. Copy your Client ID (looks like client_ODyf..., NOT your app slug)

Step 3: Set Up the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
  AiPass.initialize({
    clientId: 'YOUR_CLIENT_ID',
    requireLogin: true
  });
</script>

Step 4: Build the Avatar Generator

async function generateAvatar() {
  const desc = document.getElementById('description').value;
  const style = document.getElementById('style').value;
  
  const r = await AiPass.generateImage({
    model: 'flux-pro/v1.1',
    prompt: `${style} style avatar portrait: ${desc}. Centered composition, suitable for profile picture.`,
    size: '1024x1024',
    n: 1
  });
  
  document.getElementById('result').src = r.data[0].url;
}

Step 5: Embed Anywhere

Option A: Self-host — put it on your own server, GitHub Pages, Netlify, Vercel, whatever you like.

Option B: Embed — click the </> button (bottom-right) to grab iframe embed code and drop it into any page.

How You Earn

Every avatar generation is an API call — and you'll get 50% commission for each one.

Full Working Example

<!DOCTYPE html>
<html>
<head>
  <title>AI Avatar Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
</head>
<body>
  <h1>AI Avatar Generator</h1>
  <textarea id="description" rows="3" placeholder="Describe your ideal avatar..." style="width:100%;"></textarea>
  <br>
  <select id="style">
    <option value="cartoon">Cartoon</option>
    <option value="anime">Anime</option>
    <option value="watercolor painting">Watercolor</option>
    <option value="pixel art">Pixel Art</option>
    <option value="3D render">3D Render</option>
    <option value="professional illustration">Professional</option>
  </select>
  <button onclick="generateAvatar()">Generate Avatar</button>
  <div id="loading" style="display:none;">Creating your avatar...</div>
  <img id="result" style="max-width:512px;margin-top:20px;display:none;" />
  <br>
  <a id="download" style="display:none;" download="avatar.png">Download Avatar</a>

  <script>
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true });
    
    async function generateAvatar() {
      const desc = document.getElementById('description').value;
      const style = document.getElementById('style').value;
      document.getElementById('loading').style.display = 'block';
      document.getElementById('result').style.display = 'none';
      
      try {
        const r = await AiPass.generateImage({
          model: 'flux-pro/v1.1',
          prompt: `${style} style avatar portrait: ${desc}. Centered, square composition, suitable for profile picture, high quality.`,
          size: '1024x1024',
          n: 1
        });
        
        const url = r.data[0].url;
        document.getElementById('result').src = url;
        document.getElementById('result').style.display = 'block';
        document.getElementById('download').href = url;
        document.getElementById('download').style.display = 'inline';
      } catch(e) {
        alert('Error: ' + e.message);
      }
      document.getElementById('loading').style.display = 'none';
    }
  </script>
</body>
</html>

Next Steps

Build with the AI Pass SDK. Users pay, you earn.

Related Apps

avatar-gen