Build an AI Chibi Maker App - Complete SDK Tutorial

Eiliya · March 9, 2026 · 5 min read · Development

Build an AI Chibi Maker App - Complete SDK Tutorial

Learn how to build your own AI chibi maker using the AI Pass SDK. Create adorable chibi characters from text descriptions.

What You'll Build

An AI-powered chibi maker that can:

Generate custom chibi characters from descriptions
Create characters in different chibi styles (kawaii, anime, fantasy, etc.)
Generate multiple character variations
Support customization of hair, outfits, accessories, and poses
Produce high-resolution images suitable for sharing

Prerequisites

Basic JavaScript/HTML knowledge
A web server or hosting platform
AI Pass account (free signup)

Step 1: Sign Up for AI Pass

Go to AI Pass and create a free account
Verify your email address
You'll get $1 free credit on signup - enough to test the full functionality

Step 2: Get Your Client ID from Developer Dashboard

Navigate to the Developer Dashboard at /panel/developer.html
Click on OAuth2 Clients in the sidebar
Click "Create New Client" and name it (e.g., "My Chibi Maker")
Copy your Client ID - it looks like client_ODyf...

Important: The Client ID comes from the OAuth2 Clients page, NOT from your app slug.

Step 3: Initialize the SDK

<script src="https://aipass.one/aipass-sdk.js"></script>

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true
});

Why requireLogin: true? This eliminates the need to build your own authentication UI. When users interact with your app, they'll see a secure AI Pass login screen, get their $1 free credit, and start using your app immediately.

Step 4: Generate a Chibi Character

async function generateChibi(characterDescription, style, colorPalette) {
  const prompt = `Adorable chibi character: ${characterDescription}. Style: ${style}. ${colorPalette} colors. Big expressive eyes, small body, cute and kawaii aesthetic. High-quality chibi art, clean lines, vibrant colors. Character should have a cute pose and expressive face.`;

  const response = await aipass.generateImage({
    model: 'flux-pro/v1.1',
    prompt: prompt,
    n: 1,
    size: '1024x1024'
  });

  return response.data[0].url;
}

// Example
generateChibi(
  'girl with long purple hair in twin tails, wearing a magical girl outfit with sparkles, holding a star wand, cheerful personality',
  'kawaii anime style',
  'pink, purple, and white'
).then(url => console.log('Chibi generated:', url));

Step 5: Build Complete UI

<!DOCTYPE html>
<html>
<head>
  <title>AI Chibi Maker</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: 'Arial', sans-serif; max-width: 1000px; margin: 50px auto; padding: 20px; background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%); }
    .container { background: white; padding: 40px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
    h1 { color: #9c27b0; text-align: center; }
    .form-section { margin-bottom: 25px; }
    label { display: block; margin: 8px 0 5px; font-weight: bold; color: #6a1b9a; }
    input, select, textarea { width: 100%; padding: 14px; border: 2px solid #e1bee7; border-radius: 10px; box-sizing: border-box; font-size: 16px; transition: border-color 0.3s; }
    input:focus, select:focus, textarea:focus { border-color: #9c27b0; outline: none; }
    button { background: linear-gradient(135deg, #9c27b0, #7b1fa2); color: white; padding: 18px 35px; border: none; border-radius: 12px; font-size: 20px; cursor: pointer; width: 100%; font-weight: bold; box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4); transition: transform 0.2s, box-shadow 0.2s; }
    button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(156, 39, 176, 0.5); }
    button:active { transform: translateY(0); }
    button:disabled { background: #ce93d8; cursor: not-allowed; }
    .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 35px; }
    .chibi-card { border: 3px solid #f3e5f5; border-radius: 15px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
    .chibi-card:hover { transform: scale(1.03); box-shadow: 0 8px 25px rgba(156, 39, 176, 0.2); }
    .chibi-card img { width: 100%; height: auto; }
    .chibi-info { padding: 20px; text-align: center; background: #faf5fa; }
    .loading { text-align: center; padding: 50px; }
    .spinner { border: 5px solid #f3e5f5; border-top: 5px solid #9c27b0; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 25px auto; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎀 AI Chibi Maker</h1>
    <p style="text-align: center; color: #7b1fa2;">Create adorable chibi characters with AI magic!</p>
    
    <div class="form-section">
      <label>Character Description</label>
      <textarea id="character" rows="4" placeholder="e.g., A cheerful girl with pastel pink hair in twin buns, wearing a cute frilly dress, holding a teddy bear, big sparkly eyes, happy expression"></textarea>
      
      <label>Chibi Style</label>
      <select id="style">
        <option value="kawaii cute style with pastel colors">Kawaii Cute</option>
        <option value="anime style with dynamic pose">Anime Style</option>
        <option value="fantasy magical style with sparkles">Fantasy Magical</option>
        <option value="modern minimalist style">Modern Minimalist</option>
        <option value="gaming pixel art inspired style">Gaming Pixel</option>
        <option value="gothic lolita style">Gothic Lolita</option>
      </select>
      
      <label>Color Palette</label>
      <select id="colors">
        <option value="pink and purple pastel colors">Pink & Purple Pastels</option>
        <option value="blue and white colors">Blue & White</option>
        <option value="warm red and orange tones">Warm Tones (Red/Orange)</option>
        <option value="cool green and teal colors">Cool Tones (Green/Teal)</option>
        <option value="monochromatic black and gray">Monochrome</option>
        <option value="rainbow multicolor palette">Rainbow</option>
      </select>
      
      <label>Number of Variations</label>
      <select id="count">
        <option value="2">2 designs</option>
        <option value="4" selected>4 designs</option>
        <option value="6">6 designs</option>
      </select>
      
      <button onclick="generateChibis()" id="generateBtn">Generate Chibi Characters ✨</button>
    </div>
    
    <div id="output"></div>
  </div>
  
  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });
    
    async function generateChibis() {
      const character = document.getElementById('character').value;
      const style = document.getElementById('style').value;
      const colors = document.getElementById('colors').value;
      const count = parseInt(document.getElementById('count').value);
      const output = document.getElementById('output');
      const btn = document.getElementById('generateBtn');
      
      if (!character) {
        alert('Please describe your character!');
        return;
      }
      
      btn.disabled = true;
      btn.textContent = 'Generating...';
      output.innerHTML = '<div class="loading"><div class="spinner"></div><p>Creating your adorable chibi characters...</p></div>';
      
      try {
        const chibis = [];
        
        for (let i = 0; i < count; i++) {
          const prompt = `Adorable chibi character design ${i + 1}: ${character}. Style: ${style}. Color palette: ${colors}. Extra-cute with big expressive eyes and small body. Clean, high-quality chibi art with vibrant colors. Character should have a cute pose and happy, expressive face. Include charming details and accessories.`;
          
          const response = await aipass.generateImage({
            model: 'flux-pro/v1.1',
            prompt: prompt,
            n: 1,
            size: '1024x1024'
          });
          
          chibis.push({
            option: i + 1,
            url: response.data[0].url
          });
          
          output.innerHTML = `<div class="loading"><div class="spinner"></div><p>Generating chibi ${i + 1} of ${count}...</p></div>`;
        }
        
        let html = '<div class="results">';
        chibis.forEach(chibi => {
          html += `
            <div class="chibi-card">
              <img src="${chibi.url}" alt="Chibi Character ${chibi.option}">
              <div class="chibi-info">
                <strong>Design ${chibi.option}</strong>
                <p><a href="${chibi.url}" target="_blank" download style="color: #9c27b0;">Download High-Res</a></p>
              </div>
            </div>
          `;
        });
        html += '</div>';
        html += '<p style="margin-top: 35px; text-align: center; color: #7b1fa2;">✨ Pick your favorite and click Download to save!</p>';
        
        output.innerHTML = html;
      } catch (error) {
        output.innerHTML = `<p style="color: #d32f2f; text-align: center;">Error: ${error.message}</p>`;
      } finally {
        btn.disabled = false;
        btn.textContent = 'Generate More Chibis ✨';
      }
    }
  </script>
</body>
</html>

Step 6: Embed and Monetize

After testing, use the </> button to get iframe code. Embed on your site and earn 50% commission on every API call.

Next Steps

Replace YOUR_CLIENT_ID with your actual Client ID
Test your app on AI Pass
Add features like pose selection, accessory options
Share and start earning commission

Resources

Developer Dashboard: /panel/developer.html
SDK: https://aipass.one/aipass-sdk.js
Live Example: Chibi Maker

Start building your AI chibi maker today!

Build an AI Chibi Maker App - Complete SDK Tutorial

Build an AI Chibi Maker App - Complete SDK Tutorial

What You'll Build

Prerequisites

Step 1: Sign Up for AI Pass

Step 2: Get Your Client ID from Developer Dashboard

Step 3: Initialize the SDK

Step 4: Generate a Chibi Character

Step 5: Build Complete UI

Step 6: Embed and Monetize

Next Steps

Resources

Related Apps