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
- Sign up and verify email
- Go to Developer Dashboard
- Create OAuth2 Client → copy your Client ID (looks like
client_XXXX...) - 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!