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
- 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!