Build Your Own AI QR Code Art App with AI Pass SDK

Want to add AI QR code art generation to your website? With AI Pass SDK, you can build it in under an hour — and earn money every time someone uses it.

What You'll Build

A web app where users enter a URL and a style description, and get back a beautiful, scannable AI-generated QR code. Users pay for their own AI usage through AI Pass, and you earn 50% commission on every API call.

Prerequisites

• A website or web app where you want to add this feature

• Basic HTML/JavaScript knowledge

Step 1: Create an AI Pass Account

Go to aipass.one and sign up. Verify your email — this is required for earning commission payouts.

Step 2: Create an OAuth2 Client

• Go to the Developer Dashboard

• Navigate to OAuth2 Clients

• Click Create Client

• Note your Client ID — it looks like client_XXXX (NOT your app slug!)

Your Client ID is how AI Pass tracks API usage back to you for commission payments.

Step 3: Include the SDK

Add the AI Pass SDK to your HTML:

Step 4: Initialize

AiPass.initialize({
  clientId: 'client_YOUR_CLIENT_ID',  // from OAuth2 Clients, NOT the slug
  requireLogin: true  // shows login screen automatically
});

Setting requireLogin: true means AI Pass handles all authentication for you — users see a login modal automatically if they're not signed in.

Step 5: Generate QR Code Art

Use the generateImage() method with a prompt that combines the user's URL and style:

async function generateQRArt(url, style) {
  const prompt = `QR code art for URL "${url}" in style: ${style}. The QR code must be scannable and artistic.`;
  
  try {
    const result = await AiPass.generateImage({
      model: 'flux-pro/v1.1',
      prompt: prompt,
      size: '1024x1024'
    });
    
    const imageUrl = result.data[0].url;
    document.getElementById('result').src = imageUrl;
  } catch (error) {
    console.error('Generation failed:', error);
  }
}

Step 6: Build the UI

Here's a minimal working example:

  AI QR Code Art Generator
  

  # AI QR Code Art

  
  
  Generate
  

  
    AiPass.initialize({
      clientId: 'client_YOUR_CLIENT_ID',
      requireLogin: true
    });

    async function generate() {
      const url = document.getElementById('url').value;
      const style = document.getElementById('style').value;
      const prompt = `QR code art for URL "${url}" in style: ${style}. Scannable and artistic.`;
      
      const r = await AiPass.generateImage({
        model: 'flux-pro/v1.1',
        prompt: prompt,
        size: '1024x1024'
      });
      
      document.getElementById('result').src = r.data[0].url;
    }
  

Step 7: Deploy Your App

Option A: Self-Host — Host the HTML file on your own server, GitHub Pages, Netlify, Vercel, or anywhere you want. The SDK handles all AI Pass authentication and billing. Your app, your domain, your rules.

Option B: Publish on AI Pass — Submit to the AI Pass catalog at aipass.one/apps. Get a dedicated page, discoverability, and use the embed feature (</> button) to iframe it into any website.

Earning Money

Every time a user generates a QR code through your app, AI Pass charges them a small fee. You automatically earn 50% commission on each API call. No invoicing, no payment integration — it's all handled.

See It In Action

Check out the working QR Art app: aipass.one/apps/qr-art

Related posts:

• How to Create AI QR Code Art Online — user guide

• QR Art Agent Skill — for AI agents