How to Build an AI Coloring Page Generator with AI Pass SDK

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

Build an AI Coloring Page Generator with AI Pass SDK

Want to add AI-powered coloring page generation to your app or website? This tutorial walks you through building one from scratch using the AI Pass SDK.

What you'll build: A web app where users describe a scene, and AI generates a printable coloring page.

What you earn: 50% commission on every API call your users make.

Prerequisites

Create an account at aipass.one
Go to Developer Dashboard → OAuth2 Clients
Create a new client — copy your Client ID

Step 1: Set Up the SDK

<!DOCTYPE html>
<html>
<head>
    <title>AI Coloring Page Generator</title>
    <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
</head>
<body>
    <h1>AI Coloring Page Generator</h1>
    <textarea id="prompt" placeholder="Describe your coloring page..."></textarea>
    <button onclick="generate()">Generate Coloring Page</button>
    <div id="result"></div>

    <script src="https://aipass.one/aipass-sdk.js"></script>
    <script>
        AiPass.initialize({
            clientId: 'YOUR_CLIENT_ID',
            requireLogin: true,
            darkMode: true
        });
    </script>
</body>
</html>

Setting requireLogin: true means the SDK handles authentication automatically — it shows a login screen when needed. No custom auth code required.

Step 2: Generate Coloring Pages

async function generate() {
    const prompt = document.getElementById('prompt').value;
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = 'Generating your coloring page...';

    try {
        const r = await AiPass.generateImage({
            model: 'flux-pro/v1.1',
            prompt: `Black and white coloring page, clean line art, no shading, printable: ${prompt}`,
            size: '1024x1024'
        });

        const imgUrl = r.data[0].url;
        resultDiv.innerHTML = `<img src="${imgUrl}" style="max-width:100%"><br>
            <a href="${imgUrl}" download="coloring-page.png">Download</a>`;
    } catch (err) {
        resultDiv.innerHTML = 'Error: ' + err.message;
    }
}

The SDK handles billing automatically. When a user runs out of credit, it shows a payment modal with $1/$5/$10 options. You don't need to build any payment UI.

Step 3: Deploy

Option A: Self-host anywhere Host this HTML on your own server, GitHub Pages, Netlify, Vercel — anywhere. The SDK handles auth and billing regardless of where your app lives.

Option B: Publish on AI Pass catalog You can also publish your app on the AI Pass catalog to get discovered by users. Apps include a </> embed button so anyone can embed your tool on their site.

How You Earn Money

Every time a user generates a coloring page through your app, they pay for the API call. You earn 50% commission on every call. The more users you have, the more you earn — with zero infrastructure costs.

Key Details

Client ID comes from Developer Dashboard → OAuth2 Clients (not the app slug)
requireLogin: true shows the auth screen automatically
Image generation uses AiPass.generateImage() → response is r.data[0].url
SDK URL: https://aipass.one/aipass-sdk.js
Users get $1 free credit on signup, then pay as they go

Next Steps

Add style options (simple/detailed, themes)
Add a gallery of recently generated pages
Let users customize line thickness or art style
Check out the AI Coloring Page app for inspiration

Start building →