All posts
tutorial

How to Build an AI Pixel Art Generator with AI Pass SDK

Build an AI pixel art generator with AI Pass SDK. Users pay directly, you earn 50% commission. Tutorial with full code.

EiliyaFebruary 21, 20262 min read

How to Build an AI Pixel Art Generator with AI Pass SDK

Create a retro-style pixel art generator using AI. Your users pay directly for image generation — you earn 50% commission on every generation.

What You'll Build

A pixel art generator that:

  • Accepts text descriptions
  • Generates retro-style images
  • Offers multiple pixel styles (8-bit, 16-bit, game)
  • Downloads in high resolution
  • Handles billing automatically

Prerequisites

  • Basic HTML, CSS, JavaScript
  • A free AI Pass account
  • An OAuth2 Client ID

Step 1: Create AI Pass Account & OAuth2 Client

  1. Sign up and verify email
  2. Go to Developer Dashboard
  3. Create OAuth2 Client → copy your Client ID (looks like client_XXXX...)
  4. This Client ID tracks your API calls for 50% commission

Step 2: Build the App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Pixel Art Generator</title>
    <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
    <style>
        body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        input, select, button { padding: 12px; margin: 5px; font-size: 16px; }
        #result { margin-top: 20px; text-align: center; }
        #result img { max-width: 100%; image-rendering: pixelated; }
    </style>
</head>
<body>
    <h1>🎮 AI Pixel Art Generator</h1>
    <p>Describe what you want, get retro pixel art!</p>
    
    <input type="text" id="prompt" placeholder="e.g., cute cat with big eyes" style="width: 70%">
    <select id="style">
        <option value="8-bit">8-bit Retro</option>
        <option value="16-bit">16-bit Game</option>
        <option value="modern">Modern Pixel</option>
    </select>
    <button onclick="generate()">Generate</button>
    
    <div id="result"></div>
    
    <script src="https://aipass.one/aipass-sdk.js"></script>
    <script>
        // Initialize AI Pass SDK
        AiPass.initialize({ 
            clientId: 'YOUR_CLIENT_ID',
            requireLogin: true,
            darkMode: true
        });
        
        async function generate() {
            const prompt = document.getElementById('prompt').value;
            const style = document.getElementById('style').value;
            const result = document.getElementById('result');
            
            if (!prompt) {
                alert('Please enter a description');
                return;
            }
            
            result.innerHTML = '<p>Generating...</p>';
            
            try {
                const enhancedPrompt = `${prompt}, ${style} pixel art, retro video game style, simple shapes, limited color palette, pixelated, crisp edges, no anti-aliasing, 16-bit or 8-bit aesthetic`;
                
                const response = await AiPass.generateImage({
                    model: 'flux-pro/v1.1',
                    prompt: enhancedPrompt,
                    size: '1024x1024'
                });
                
                const url = response.data[0].url;
                result.innerHTML = `
                    <img src="${url}" alt="Pixel art">
                    <br><br>
                    <a href="${url}" download="pixel-art.png" style="display:inline-block;padding:10px 20px;background:#16A085;color:white;text-decoration:none;border-radius:5px;">Download</a>
                `;
            } catch (error) {
                result.innerHTML = `<p style="color:red">Error: ${error.message}</p>`;
            }
        }
    </script>
</body>
</html>

Step 3: Deploy & Earn

Self-host anywhere: Upload to GitHub Pages, Netlify, Vercel, or your server. The SDK handles billing.

Or publish on AI Pass: Get a dedicated page + embed feature.

How You Earn Money

  • User signs up → $1 free credit
  • User generates images → tracked to your Client ID
  • You earn 50% commission on every call

Get Your Client ID and start building!

Related apps