AI
Pass

How to Build an AI Pet Portrait Generator with AI Pass SDK

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

How to Build an AI Pet Portrait Generator with AI Pass SDK

Build your own AI Pet Portrait 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 Pet Portrait 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 Pet Portrait 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 Pet Portrait 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 Pet Portrait Generator today and earn 50% commission on every transaction!

Related Apps

pet-portrait