Build an AI QR Code Art App - Complete SDK Tutorial

Learn how to build an AI QR code art generator using the AI Pass SDK. Users can create beautiful, artistic QR codes that remain fully scannable.

What You'll Build

A web app that lets users:

• Enter any URL or text for their QR code
• Choose from AI-generated artistic styles
• Generate stunning, scannable QR art
• Download high-resolution images

Best of all, you'll earn 50% commission on every API call made through your app.

Prerequisites

• Basic knowledge of HTML/JavaScript
• A text editor (VS Code, etc.)
• An AI Pass account (free signup)

Step 1: Get Your Client ID

1. Go to AI Pass Developer Dashboard
2. Sign up or log in
3. Navigate to OAuth2 Clients
4. Click Create New Client
5. Name your app (e.g., "My QR Art App")
6. Copy your Client ID (looks like client_ODyf...)

Keep your Client ID secret - it identifies your app and tracks your commissions.

Step 2: Initialize the SDK

Add this to your HTML file:

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

  sdk.on('login', (user) => {
    console.log('User logged in:', user.email);
    enableQRGenerator();
  });
</script>

Setting requireLogin: true automatically shows the authentication screen.

Step 3: Generate QR Code Art

async function generateQRArt(qrContent, style) {
  try {
    const prompt = `Create a beautiful, artistic QR code design for content: "${qrContent}". Style: ${style}. The QR code must remain fully scannable while incorporating artistic elements.`;

    const r = await sdk.generateImage({
      model: 'flux-pro/v1.1',
      prompt: prompt,
      width: 1024,
      height: 1024
    });

    const imageUrl = r.data[0].url;
    displayQRImage(imageUrl);
  } catch (error) {
    console.error('Generation failed:', error);
  }
}

Step 4: Build the UI

<div class="qr-app">
  <input type="text" id="qr-content" placeholder="Enter URL or text">
  <button onclick="generateQR()">Generate QR Art</button>
  <div id="result"></div>
</div>

Step 5: Deploy & Earn

Deploy to any host (GitHub Pages, Netlify, etc.) and earn 50% commission on every API call.

Get Your Client ID →