How to Build an AI Interior Redesign App with AI Pass SDK

Eiliya · February 25, 2026 · 1 min read · tutorial

Build an AI Interior Redesign App with AI Pass SDK

This tutorial shows you how to build a room redesign tool where users upload a room photo and see it transformed into different interior styles. You earn 50% commission on every API call.

Prerequisites

AI Pass account (sign up)
Client ID from Developer Dashboard → OAuth2 Clients

Step 1: Initialize the SDK

<!DOCTYPE html>
<html>
<head>
  <title>AI Interior Redesign</title>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
</head>
<body>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <script>
    AiPass.initialize({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true,
      darkMode: true
    });
  </script>
</body>
</html>

requireLogin: true shows the login screen automatically — no custom auth needed.

Step 2: Build the Interface

<h1>AI Interior Redesign</h1>
<input type="file" id="roomPhoto" accept="image/*">
<img id="preview" style="max-width:400px; display:none;">
<select id="style">
  <option value="modern minimalist">Modern Minimalist</option>
  <option value="Scandinavian">Scandinavian</option>
  <option value="industrial">Industrial</option>
  <option value="mid-century modern">Mid-Century Modern</option>
  <option value="Japanese zen">Japanese Zen</option>
  <option value="bohemian">Bohemian</option>
</select>
<button onclick="redesign()">Redesign Room</button>
<img id="result" style="max-width:500px; display:none;">

Step 3: Implement the Redesign

async function redesign() {
  const file = document.getElementById('roomPhoto').files[0];
  const style = document.getElementById('style').value;
  
  if (!file) { alert('Please upload a room photo'); return; }

  try {
    const result = await AiPass.editImage({
      image: file,
      prompt: `Redesign this room in ${style} style. Keep the same room layout and dimensions but change all furniture, decor, colors, and materials to match ${style} interior design. Make it look realistic and professionally designed.`,
      model: 'gemini/gemini-3-pro-image-preview'
    });

    document.getElementById('result').src = result.data[0].url;
    document.getElementById('result').style.display = 'block';
  } catch (err) {
    console.error('Redesign failed:', err);
  }
}

Step 4: Deploy

Option A: Self-host on GitHub Pages, Netlify, Vercel, or your own server. The SDK handles all billing and auth.

Option B: Publish on the AI Pass catalog for a page at aipass.one/apps/your-app with built-in embed support via the </> button.

Revenue

You earn 50% commission on every API call your users make. Build once, earn on every redesign.