AI
Pass

How to Build an AI Ad Maker with AI Pass SDK

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

How to Build an AI Ad Maker with AI Pass SDK

Build an ad creative generator for Facebook, Instagram, and Google. Users pay directly — you earn 50% commission.

What You're Building

An AI-powered ad tool that:

  • Takes product description and target platform
  • Generates multiple ad creative options
  • Auto-sizes for each platform
  • Exports ready-to-use images

Step 1-3: Setup

  1. Create AI Pass account at aipass.one
  2. Get Client ID from Developer Dashboard → OAuth2 Clients
  3. Initialize SDK with requireLogin: true

Step 4: 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 Ad Maker</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
  <style>
    body { font-family: -apple-system, sans-serif; max-width: 900px; margin: 30px auto; padding: 20px; }
    input, select, textarea { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ddd; border-radius: 5px; }
    .btn { padding: 12px 24px; background: #16A085; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 10px 5px; }
    .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
    .ad { cursor: pointer; border: 3px solid transparent; border-radius: 8px; overflow: hidden; }
    .ad:hover, .ad.selected { border-color: #16A085; }
    .ad img { width: 100%; display: block; }
    .platform-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>AI Ad Maker</h1>
  <p>Generate professional ad creative for Facebook, Instagram, and Google. No design skills needed.</p>
  
  <input type="text" id="product" placeholder="Product Name">
  <textarea id="offer" placeholder="Offer / CTA (e.g., 50% off, Shop Now)" style="height:80px"></textarea>
  <select id="platform"><option value="facebook">Facebook Feed</option><option value="instagram">Instagram Feed</option><option value="story">Instagram Story</option><option value="google">Google Display</option></select>
  <select id="style"><option value="minimal">Minimal</option><option value="colorful">Colorful</option><option value="professional">Professional</option><option value="bold">Bold</option></select>
  
  <button class="btn" onclick="generateAds()">Generate Ads</button>
  
  <div id="gallery" class="gallery hidden"></div>
  
  <div id="actions" class="hidden">
    <button class="btn" onclick="downloadAd()">Download Selected</button>
  </div>
  
  <script>
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true, darkMode: true });
    let selectedAd = null;
    const sizes = {
      facebook: '1200x628',
      instagram: '1080x1080',
      story: '1080x1920',
      google: '300x250'
    };
    
    async function generateAds() {
      const product = document.getElementById('product').value;
      const offer = document.getElementById('offer').value;
      const platform = document.getElementById('platform').value;
      const style = document.getElementById('style').value;
      const size = sizes[platform];
      
      if (!product) { alert('Please enter a product name'); return; }
      
      document.getElementById('gallery').classList.remove('hidden');
      document.getElementById('gallery').innerHTML = '<p>Generating...</p>';
      
      const prompts = [
        `Professional ${platform} ad for ${product}, ${offer}, ${style} style, marketing quality, high conversion`,
        `Eye-catching ${size}px ad creative, ${product}, ${offer}, ${style} aesthetic, clean design`,
        `Bestselling ${platform} advertisement, ${product}, ${offer}, ${style} design, professional photography`
      ];
      
      try {
        const results = await Promise.all(prompts.map(p => 
          AiPass.generateImage({ model: 'flux-pro/v1.1', prompt: p, size: size, n: 1 })
        ));
        
        let html = '';
        results.forEach((r, i) => {
          html += `<div class="ad" onclick="selectAd(this, '${r.data[0].url}')"><span class="platform-badge">${platform}</span><img src="${r.data[0].url}"></div>`;
        });
        document.getElementById('gallery').innerHTML = html;
        document.getElementById('actions').classList.remove('hidden');
      } catch (error) {
        alert('Error: ' + error.message);
      }
    }
    
    function selectAd(el, url) {
      document.querySelectorAll('.ad').forEach(a => a.classList.remove('selected'));
      el.classList.add('selected');
      selectedAd = url;
    }
    
    function downloadAd() {
      if (!selectedAd) { alert('Select an ad first'); return; }
      window.open(selectedAd, '_blank');
    }
  </script>
</body>
</html>

Deploy

Option A: Self-host (replace YOUR_CLIENT_ID)

Option B: Publish on AI Pass catalog for traffic

Commission

Earn 50% commission on every image.

Start building

Related Apps

ad-maker