tutorial

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

Build an AI tattoo preview tool using the AI Pass SDK. Let users visualize tattoos on their body with AI image editing.

EiliyaFebruary 26, 20261 min read

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 →

Related apps

tattoo preview style transfer