Build an AI Background Remover App with AI Pass SDK — Complete Tutorial

Eiliya · March 21, 2026 · 5 min read · tutorial

Build an AI Background Remover App with AI Pass SDK — Complete Tutorial

As developer advocates, we are always looking for ways to bridge the gap between complex AI models and practical, deployable applications. Traditionally, building a background removal tool required managing heavy machine learning models (like Python/PyTorch), setting up costly GPU servers, and handling complex image processing pipelines.

Today, we’re going to bypass all that infrastructure. We will use the AI Pass SDK to build a fully functional, production-ready AI Background Remover using nothing but vanilla JavaScript and HTML.

By the end of this tutorial, you will have a web app that allows users to upload an image and receive a professionally cropped result in seconds.

What We’re Building

We are creating a single-page application (SPA) called "ClearCut AI". The app will:

Authenticate users via the AI Pass OAuth2 flow.
Allow users to upload an image from their local machine.
Use the AiPass.editImage method to perform background removal.
Display the processed result for download.

Step 1: Setting Up Your Developer Credentials

Before we write a single line of code, we need to register our application on the AI Pass network.

Navigate to the AI Pass Developer Dashboard.
Log in with your AI Pass account.
Go to the OAuth2 Clients section and click "Create Client".
Give your app a name (e.g., "Background Remover").
Important: Note down your YOUR_CLIENT_ID. You will need this to initialize the SDK.
Set your Redirect URI to the URL where you will host your app (e.g., http://localhost:5500 for local development).

Step 2: Project Structure

Create a new directory for your project and add an index.html file. We will keep everything in one file to emphasize how little code is actually required when using the SDK.

/background-remover
└── index.html

Step 3: Implementing the Application

Here is the complete code for the application. We will use the official SDK hosted at aipass.one.

The Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ClearCut AI - Background Remover</title>
    <!-- 1. Include the AI Pass SDK -->
    <script src="https://aipass.one/aipass-sdk.js"></script>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #f4f7f6; margin: 0; }
        .card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 500px; text-align: center; }
        .preview-container { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
        img { max-width: 100%; border-radius: 8px; border: 1px solid #ddd; }
        button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 16px; margin-top: 10px; }
        button:disabled { background: #ccc; cursor: not-allowed; }
        .loading { color: #666; font-style: italic; }
    </style>
</head>
<body>

<div class="card">
    <h1>ClearCut AI</h1>
    <p>Remove backgrounds instantly using AI Pass.</p>
    
    <input type="file" id="imageInput" accept="image/*" />
    <br>
    <button id="processBtn">Remove Background</button>

    <div id="status" class="loading" style="display:none;">Processing image...</div>

    <div class="preview-container" id="resultContainer" style="display:none;">
        <h3>Result:</h3>
        <img id="resultImage" src="" alt="Processed Result">
        <a id="downloadLink" href="#" download="background-removed.png">
            <button style="background: #28a745;">Download Image</button>
        </a>
    </div>
</div>

<script>
    // 2. Initialize the SDK with your Client ID
    // Replace 'YOUR_CLIENT_ID' with the ID from your Developer Dashboard
    AiPass.initialize({ 
        clientId: 'YOUR_CLIENT_ID', 
        requireLogin: true 
    });

    const processBtn = document.getElementById('processBtn');
    const imageInput = document.getElementById('imageInput');
    const statusDiv = document.getElementById('status');
    const resultContainer = document.getElementById('resultContainer');
    const resultImage = document.getElementById('resultImage');
    const downloadLink = document.getElementById('downloadLink');

    processBtn.addEventListener('click', async () => {
        const file = imageInput.files[0];
        if (!file) {
            alert("Please select an image first!");
            return;
        }

        try {
            // Show loading state
            processBtn.disabled = true;
            statusDiv.style.display = 'block';
            resultContainer.style.display = 'none';

            // 3. Call editImage to remove the background
            // The SDK handles the heavy lifting and returns a structured response
            const result = await AiPass.editImage({
                image: file,
                prompt: "Remove the background and return only the subject with transparency",
                // Essential parameters for AI Pass completions
                temperature: 1,
                max_tokens: 16000
            });

            // 4. Handle the result
            if (result && result.data && result.data[0].url) {
                const imageUrl = result.data[0].url;
                resultImage.src = imageUrl;
                downloadLink.href = imageUrl;
                resultContainer.style.display = 'block';
            } else {
                throw new Error("Failed to get image URL from response.");
            }

        } catch (error) {
            console.error("AI Pass Error:", error);
            alert("Error processing image: " + error.message);
        } finally {
            processBtn.disabled = false;
            statusDiv.style.display = 'none';
        }
    });
</script>

</body>
</html>

Step 4: Key Code Explanations

The Initialization

AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true })

Setting requireLogin: true is a best practice for apps using paid AI features. This prompts the user to log in via AI Pass OAuth2 automatically, ensuring that usage is attributed correctly and the developer doesn't have to manage complex user sessions or billing.

The `editImage` Method

const result = await AiPass.editImage({
    image: file,
    prompt: "Remove the background...",
    temperature: 1,
    max_tokens: 16000
});

This is where the magic happens. Unlike standard LLM calls, editImage takes a file object directly. The prompt guides the AI on what to do. Note the critical parameters:

temperature: 1: Provides the necessary variance for high-quality image generation/editing.
max_tokens: 16000: Ensures the response has enough overhead to handle high-resolution image metadata or descriptions if needed.

The result returned is a standardized JSON object where result.data[0].url contains the link to your newly processed image.

Step 5: Testing Your App

To test this locally:

Use a local server (like the "Live Server" extension in VS Code).
Open your browser to http://localhost:5500.
When you click the process button, a popup will appear asking you to authorize your application via AI Pass.
Once authorized, the image will upload, process, and display the result.

Step 6: Deployment & Monetization

One of the unique advantages of building on the AI Pass SDK is the flexibility in how you ship your code.

Option A: Self-Hosting

You can host this HTML file anywhere (Netlify, Vercel, GitHub Pages, or your own VPS). You retain full control over the UI and user experience.

Option B: The AI Pass App Catalog (The 50% Commission Model)

If you want to reach users without spending money on marketing, you can submit your app to the AI Pass Catalog.

How it works:

You host your app at a public URL.
You submit the URL to the AI Pass Dashboard.
AI Pass lists your app in their store.
The Kickback: When users use your app through the catalog, you earn 50% commission on the platform's processing fees for every request your app generates.

This essentially turns your 50 lines of JavaScript into a passive income stream.

Conclusion

Building with AI doesn't have to mean managing infrastructure. By using the AI Pass SDK, we’ve built a high-performance background remover in under 100 lines of code. We handled authentication, image processing, and state management without a backend server.

Next Steps:

Try changing the prompt to "Turn this photo into a pencil sketch."
Add a "Before/After" slider to the UI.
Submit your app to the AI Pass catalog and start earning!

Happy coding!

Build an AI Background Remover App with AI Pass SDK — Complete Tutorial

Build an AI Background Remover App with AI Pass SDK — Complete Tutorial

What We’re Building

Step 1: Setting Up Your Developer Credentials

Step 2: Project Structure

Step 3: Implementing the Application

The Complete Code

Step 4: Key Code Explanations

The Initialization

The editImage Method

Step 5: Testing Your App

Step 6: Deployment & Monetization

Option A: Self-Hosting

Option B: The AI Pass App Catalog (The 50% Commission Model)

Conclusion

Related Apps

The `editImage` Method