AI
Pass

Build a AI Background Remover with AI Pass SDK

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

Build a AI Background Remover with AI Pass SDK

Want to add backgrounds from images functionality to your app or website? With the AI Pass SDK, you can build a fully working ai background remover in under an hour — and earn 50% commission on every API call your users make.

What You'll Build

A web-based ai background remover that:

  • Lets users remove backgrounds from images
  • Handles authentication automatically (no custom login UI needed)
  • Manages billing — users pay per use, you earn commission
  • Works on any website via iframe embed

Prerequisites

  • An AI Pass account (sign up if you haven't)
  • Basic HTML/JavaScript knowledge

Step 1: Create an OAuth2 Client

  1. Go to your Developer Dashboard
  2. Navigate to OAuth2 Clients
  3. Click Create Client
  4. Note your Client ID (looks like client_ODyfXx... — this is NOT your app slug!)

Your Client ID is how AI Pass tracks API usage and calculates your commission.

Step 2: Set Up the SDK

Add the AI Pass SDK to your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>AI Background Remover</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
</head>
<body>
  <div id="app">
    <!-- Your UI here -->
  </div>

  <script>
    AiPass.initialize({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });
  </script>
</body>
</html>

Setting requireLogin: true means the SDK automatically shows a login screen when users first visit — no custom auth UI needed.

Step 3: Build the Core Feature

Here's the key part — making the AI call:

async function generate() {
  try {
    const result = await AiPass.editImage({
      model: 'gemini/gemini-3-pro-image-preview',
      image: fileInput.files[0],
      prompt: 'Remove the background from this image, make it transparent'
    });
    const imageUrl = result.data[0].url;
    document.getElementById('result').innerHTML = `<img src="$${imageUrl}" alt="Result">`;
  } catch (error) {
    console.error('Generation failed:', error);
  }
}

The model gemini/gemini-3-pro-image-preview handles image editing including background removal.

Step 4: Deploy

You have two options:

Option A: Host it yourself — Deploy to GitHub Pages, Netlify, Vercel, or your own server. The SDK handles all billing and auth.

Option B: Embed anywhere — Any published AI Pass app has a </> button (bottom-right corner) that gives you an iframe embed code. Drop it into any website.

You can also optionally publish your app on the AI Pass catalog to get more visibility.

How You Earn Money

Every time a user makes an API call through your app, AI Pass charges a small commission. You earn 50% of that commission. No caps, no limits — the more your app is used, the more you earn.

Example: If your app gets 10,000 API calls per month, that's real passive income just from building a useful tool.

Full Working Example

<!DOCTYPE html>
<html>
<head>
  <title>AI Background Remover</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    textarea, input { width: 100%; padding: 10px; margin: 10px 0; }
    button { padding: 10px 20px; background: #16A085; color: white; border: none; cursor: pointer; border-radius: 4px; }
    #result { margin-top: 20px; white-space: pre-wrap; background: #f5f5f5; padding: 15px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>AI Background Remover</h1>
  <input type='file' id='fileInput' accept='image/*'>
  <button onclick="generate()">Generate</button>
  <div id="result"></div>

  <script>
    AiPass.initialize({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });

    async function generate() {
      document.getElementById('result').innerText = 'Generating...';
      try {
        const fileInput = document.getElementById('fileInput');
        const result = await AiPass.editImage({
      model: 'gemini/gemini-3-pro-image-preview',
      image: fileInput.files[0],
      prompt: 'Remove the background from this image, make it transparent'
    });
    const imageUrl = result.data[0].url;
    document.getElementById('result').innerHTML = `<img src="$${imageUrl}" alt="Result">`;
      } catch (err) {
        document.getElementById('result').innerText = 'Error: ' + err.message;
      }
    }
  </script>
</body>
</html>

Replace YOUR_CLIENT_ID with your actual Client ID from the Developer Dashboard → OAuth2 Clients.

Next Steps

The AI Pass SDK handles authentication, billing, and payments so you can focus on building great tools. Start building and earning today.

Related Apps

bg-remover