AI
Pass

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

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!