How to Build an AI Tattoo Preview Tool with AI Pass SDK

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

Build an AI Tattoo Preview Tool with AI Pass SDK

This tutorial shows how to build a tool that lets users upload a photo and preview a tattoo design on their body using AI image editing.

What you earn: 50% commission on every API call.

Setup

Sign up at aipass.one
Developer Dashboard → OAuth2 Clients → Create client
Copy your Client ID

The Code

<!DOCTYPE html>
<html>
<head>
    <title>AI Tattoo Preview</title>
    <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
</head>
<body>
    <h1>AI Tattoo Preview</h1>
    <input type="file" id="photo" accept="image/*">
    <input type="text" id="design" placeholder="Describe your tattoo design...">
    <button onclick="preview()">Preview Tattoo</button>
    <div id="result"></div>

    <script src="https://aipass.one/aipass-sdk.js"></script>
    <script>
        AiPass.initialize({
            clientId: 'YOUR_CLIENT_ID',
            requireLogin: true,
            darkMode: true
        });

        async function preview() {
            const file = document.getElementById('photo').files[0];
            const design = document.getElementById('design').value;
            const result = document.getElementById('result');
            
            if (!file || !design) {
                result.innerHTML = 'Please upload a photo and describe your tattoo.';
                return;
            }
            
            result.innerHTML = 'Generating preview...';
            
            try {
                const r = await AiPass.editImage({
                    model: 'gemini/gemini-3-pro-image-preview',
                    image: file,
                    prompt: `Add a realistic tattoo to this photo: ${design}. Make it look natural and properly placed on the skin.`
                });
                result.innerHTML = `<img src="${r.data[0].url}" style="max-width:100%">`;
            } catch (err) {
                result.innerHTML = 'Error: ' + err.message;
            }
        }
    </script>
</body>
</html>

Key Points

requireLogin: true — handles login automatically
AiPass.editImage() — takes an image file + prompt, returns edited image
Response: r.data[0].url — the preview image URL
Model: gemini/gemini-3-pro-image-preview — best for image editing tasks
Client ID — from Developer Dashboard → OAuth2 Clients

Deploy

Option A: Self-host anywhere. Option B: Publish on AI Pass catalog with </> embed button.

Revenue

50% commission on every preview your users generate. No infrastructure to manage.

Start building →