All posts
tutorial

How to Build an AI Emoji Maker with AI Pass SDK

Build a custom AI emoji generator using the AI Pass SDK. Handle auth, billing, and image generation automatically.

EiliyaFebruary 26, 20261 min read

Build an AI Emoji Maker with AI Pass SDK

This tutorial shows you how to build a custom emoji generator that lets users describe any emoji and get AI-generated results.

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

Setup

  1. Sign up at aipass.one
  2. Go to Developer DashboardOAuth2 Clients
  3. Create a client and copy your Client ID

The Code

<!DOCTYPE html>
<html>
<head>
    <title>AI Emoji Maker</title>
    <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
</head>
<body>
    <h1>🎨 AI Emoji Maker</h1>
    <input type="text" id="prompt" placeholder="Describe your emoji...">
    <button onclick="makeEmoji()">Create Emoji</button>
    <div id="output"></div>

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

        async function makeEmoji() {
            const desc = document.getElementById('prompt').value;
            const output = document.getElementById('output');
            output.innerHTML = 'Creating your emoji...';

            try {
                const r = await AiPass.generateImage({
                    model: 'flux-pro/v1.1',
                    prompt: `Emoji style icon, round, expressive, simple background, high quality: ${desc}`,
                    size: '1024x1024'
                });
                output.innerHTML = `<img src="${r.data[0].url}" width="128">
                    <br><a href="${r.data[0].url}" download="emoji.png">Download</a>`;
            } catch (err) {
                output.innerHTML = 'Error: ' + err.message;
            }
        }
    </script>
</body>
</html>

Key Points

  • requireLogin: true — SDK handles auth automatically, shows login when needed
  • Image responser.data[0].url contains the generated image URL
  • Billing — SDK auto-shows payment modal when credits run out ($1/$5/$10 options)
  • Client ID — from Developer Dashboard → OAuth2 Clients

Deploy

Option A: Host anywhere — your server, GitHub Pages, Netlify, Vercel. The SDK handles everything.

Option B: Publish on AI Pass catalog. Get a page with a </> embed button so others can embed your tool.

Revenue

You earn 50% commission on every generation your users make. More users = more passive income, zero infrastructure costs.

Start building →

Related apps