AI
Pass

Build an AI Meme Generator with AI Pass SDK

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

Build an AI Meme Generator with AI Pass SDK

Want to build an AI-powered meme generator? This quick, friendly tutorial walks you through creating a simple tool that turns short text descriptions into funny, shareable meme images using the AI Pass SDK.

What You'll Build

A lightweight meme generator where users type a description of a humorous scene and get back an AI-generated image. The AI Pass SDK handles authentication, billing, and payments for you — and you earn 50% commission on every API call.

Step 1: Create Your AI Pass Account

Sign up at aipass.one and confirm your email.

Step 2: Create an OAuth2 Client

  1. Go to Developer Dashboard
  2. Navigate to OAuth2 Clients
  3. Click Create Client
  4. Copy your Client ID (it looks like client_ODyf... — not your app slug)

Step 3: Set Up the SDK

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

Setting requireLogin: true makes the authentication screen show up automatically.

Step 4: Build the Meme Generator

async function generateMeme() {
  const prompt = document.getElementById('prompt').value;
  document.getElementById('result').alt = 'Generating...';
  
  const r = await AiPass.generateImage({
    model: 'flux-pro/v1.1',
    prompt: `Funny meme image: ${prompt}. Make it humorous and shareable.`,
    size: '1024x1024',
    n: 1
  });
  
  document.getElementById('result').src = r.data[0].url;
}

A simple function like this takes the user prompt, calls the image model, and places the returned image into the page.

Step 5: Embed Anywhere

Option A: Self-host — deploy on your own server, GitHub Pages, Netlify, or Vercel.

Option B: Embed — use the </> button (bottom-right) in the AI Pass dashboard to grab iframe embed code and drop it into any website.

How You Earn

Every meme generation is an API call. You earn 50% commission on each one, and AI Pass handles payments from users directly — no billing setup on your end.

Full Working Example

<!DOCTYPE html>
<html>
<head>
  <title>AI Meme Generator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
</head>
<body>
  <h1>AI Meme Generator</h1>
  <input id="prompt" type="text" placeholder="Describe your meme idea..." style="width:100%;padding:10px;" />
  <button onclick="generateMeme()" style="margin-top:10px;padding:10px 20px;">Generate Meme</button>
  <div id="loading" style="display:none;">Generating your meme...</div>
  <img id="result" style="max-width:512px;margin-top:20px;display:none;" />
  <br>
  <a id="download" style="display:none;" download="meme.png">Download Meme</a>

  <script>
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true });
    
    async function generateMeme() {
      const prompt = document.getElementById('prompt').value;
      document.getElementById('loading').style.display = 'block';
      document.getElementById('result').style.display = 'none';
      
      try {
        const r = await AiPass.generateImage({
          model: 'flux-pro/v1.1',
          prompt: `Funny meme image: ${prompt}. Humorous, shareable, vibrant.`,
          size: '1024x1024',
          n: 1
        });
        
        const url = r.data[0].url;
        document.getElementById('result').src = url;
        document.getElementById('result').style.display = 'block';
        document.getElementById('download').href = url;
        document.getElementById('download').style.display = 'inline';
      } catch(e) {
        alert('Error: ' + e.message);
      }
      document.getElementById('loading').style.display = 'none';
    }
  </script>
</body>
</html>

Next Steps

Build with the AI Pass SDK. Users pay, you earn.

Related Apps

meme-gen