AI
Pass

How to Build an AI Meeting Notes App with AI Pass SDK

Eiliya · February 24, 2026 · 4 min read · tutorial

How to Build an AI Meeting Notes App with AI Pass SDK

Build a professional meeting notes app that transcribes audio and generates smart summaries. Users pay directly for AI usage — you earn 50% commission on every API call.

What You're Building

An AI-powered meeting notes app that:

  • Uploads audio recordings (MP3, M4A, WAV)
  • Transcribes speech to text using Whisper
  • Summarizes key points and action items
  • Highlights decisions and deadlines
  • Exports clean, formatted notes

Prerequisites

  • Basic HTML, CSS, JavaScript
  • An AI Pass account (free signup)

Step 1: Create AI Pass Account

  1. Go to AI Pass
  2. Click "Sign Up" and verify your email
  3. You get $1 free credit automatically

Step 2: Get Your Client ID

  1. Go to the Developer Dashboard
  2. Navigate to OAuth2 Clients
  3. Click "Create New Client"
  4. Enter a name (e.g., "Meeting Notes App")
  5. Copy your Client ID (starts with client_)

Important: This Client ID is NOT your app slug — it's from the OAuth2 Clients section only.

Step 3: Initialize the SDK

Add this to your HTML:

<script src="https://aipass.one/aipass-sdk.js"></script>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">

Initialize the SDK:

AiPass.initialize({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true,
  darkMode: true
});
  • requireLogin: true — Shows AI Pass login modal automatically
  • darkMode: true — Dark theme for modals

Step 4: Build the App

Here's the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Meeting Notes</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
    .upload-zone { border: 2px dashed #ccc; padding: 40px; text-align: center; border-radius: 8px; cursor: pointer; }
    .upload-zone:hover { border-color: #16A085; background: #f8f9fa; }
    .notes-output { margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px; white-space: pre-wrap; }
    .btn { padding: 10px 20px; background: #16A085; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 5px; }
    .hidden { display: none; }
  </style>
</head>
<body>
  <h1>AI Meeting Notes</h1>
  <p>Upload an audio recording to get professional meeting notes.</p>
  
  <div class="upload-zone" id="uploadZone">
    <p>📁 Drop your audio file here (MP3, M4A, WAV)</p>
    <p>or click to select</p>
  </div>
  
  <input type="file" id="audioInput" accept="audio/*" class="hidden">
  
  <div id="loading" class="hidden">
    <p>Processing your audio... This may take a moment.</p>
  </div>
  
  <div id="results" class="hidden">
    <h2>Meeting Notes</h2>
    <div class="notes-output" id="notes"></div>
    <button class="btn" onclick="copyNotes()">📋 Copy Notes</button>
  </div>
  
  <script>
    AiPass.initialize({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true,
      darkMode: true
    });
    
    const uploadZone = document.getElementById('uploadZone');
    const audioInput = document.getElementById('audioInput');
    const loading = document.getElementById('loading');
    const results = document.getElementById('results');
    const notes = document.getElementById('notes');
    
    uploadZone.addEventListener('click', () => audioInput.click());
    uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.style.borderColor = '#16A085'; });
    uploadZone.addEventListener('dragleave', () => { uploadZone.style.borderColor = '#ccc'; });
    uploadZone.addEventListener('drop', async (e) => {
      e.preventDefault();
      uploadZone.style.borderColor = '#ccc';
      if (e.dataTransfer.files.length) {
        processFile(e.dataTransfer.files[0]);
      }
    });
    
    audioInput.addEventListener('change', (e) => {
      if (e.target.files.length) {
        processFile(e.target.files[0]);
      }
    });
    
    async function processFile(file) {
      loading.classList.remove('hidden');
      results.classList.add('hidden');
      
      try {
        // Transcribe audio
        const transcript = await AiPass.transcribeAudio({
          audioFile: file,
          model: 'whisper-1',
          language: 'en'
        });
        
        // Summarize the transcript
        const summary = await AiPass.generateCompletion({
          model: 'gpt-5-mini',
          temperature: 1,
          max_tokens: 16000,
          messages: [{
            role: 'user',
            content: `Summarize this meeting transcript. Highlight:
1. Key points discussed
2. Decisions made
3. Action items with owners
4. Deadlines
5. Questions raised

Transcript:
${transcript.text}`
          }]
        });
        
        notes.textContent = `## Transcript\n\n${transcript.text}\n\n## Summary\n\n${summary.choices[0].message.content}`;
        loading.classList.add('hidden');
        results.classList.remove('hidden');
        
      } catch (error) {
        loading.classList.add('hidden');
        alert('Error: ' + error.message);
      }
    }
    
    function copyNotes() {
      navigator.clipboard.writeText(notes.textContent);
      alert('Notes copied to clipboard!');
    }
  </script>
</body>
</html>

Critical: Notice the temperature: 1 and max_tokens: 16000 in the generateCompletion call. GPT-5 requires these overrides — without them, you'll get empty responses.

Step 5: Deploy Your App

You have two options:

Option A: Self-Host Anywhere

Host on your own server, GitHub Pages, Netlify, Vercel, or any web hosting. The SDK handles everything — no backend needed.

Just replace YOUR_CLIENT_ID with your actual Client ID from the Developer Dashboard.

Option B: Publish on AI Pass Catalog

  1. Go to AI Pass Developer Dashboard
  2. Click "Create New App"
  3. Choose "HOSTED" app type
  4. Paste your HTML code
  5. Add an app icon and description
  6. Click "Publish"

Publishing gives you:

  • A dedicated page on AI Pass
  • Built-in traffic from our catalog
  • Embed code via the </> button
  • Easy sharing with others

How You Earn Money

With AI Pass, you earn 50% commission on every API call your users make.

Here's how it works:

  1. User uploads audio → AI Pass charges their account
  2. You get 50% of that API call
  3. User pays directly — no billing overhead for you
  4. Payouts sent to your verified email

Need a verified email to receive payouts.

Embed Your App

Once deployed, share it easily:

  • Click the </> button on your app page
  • Copy the iframe code
  • Paste anywhere — your site, blog, social media

The embed includes full AI Pass functionality automatically.

SDK Documentation

Full SDK reference: https://aipass.one/docs/sdk/reference.html

Available methods:

  • AiPass.transcribeAudio() — Speech-to-text
  • AiPass.generateCompletion() — Text generation
  • AiPass.generateImage() — Image generation
  • AiPass.editImage() — Image editing
  • AiPass.generateSpeech() — Text-to-speech
  • AiPass.generateVideo() — Video generation

You're Done!

You now have a professional meeting notes app. Users pay for their own AI usage, and you earn commission on every call.

Ready to start building? Create your AI Pass account and get $1 free credit.

Related Apps

meeting-notes