tutorial

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

Build an AI room redesign tool with the AI Pass SDK. Step-by-step tutorial with image editing, style selection, and deployment.

EiliyaFebruary 25, 20261 min read

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.

Related apps

interior redesign home staging