Build an AI Email Writer App with AI Pass SDK — Step-by-Step Tutorial

Eiliya · March 15, 2026 · 5 min read · tutorial

Build an AI Email Writer App with AI Pass SDK — Step-by-Step Tutorial

Creating an AI-powered email writer is one of the most practical apps you can ship today. It’s genuinely useful, in demand, and the demo practically sells itself. This tutorial walks you through the full build using the AI Pass SDK — from signup to a working app.

What we're building: A web app where users paste their email context, pick a tone, and get a polished email draft in seconds.

What you get as the developer: 50% commission on every AI credit your users spend. AI Pass handles billing, auth, and API costs entirely.

Prerequisites

Basic HTML/JavaScript knowledge
A text editor
10–30 minutes

Step 1: Create Your AI Pass Account

Go to aipass.one and sign up. You'll get $1 free credit to test during development.

Step 2: Get Your Client ID

Go to Developer Dashboard
Click OAuth2 Clients tab
Click Create New Client
Enter your app name (e.g., "My Email Writer")
Add your app URL as the redirect URI
Copy the Client ID — it looks like client_XXXXXXXX

This is your YOUR_CLIENT_ID. Keep it private like a password.

Step 3: Build the App

Create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Email Writer</title>
  <link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #f8fafc; }
    .container { max-width: 700px; margin: 40px auto; padding: 20px; }
    h1 { font-size: 1.8rem; margin-bottom: 8px; color: #1a202c; }
    .subtitle { color: #718096; margin-bottom: 24px; }
    label { display: block; font-weight: 600; margin-bottom: 6px; color: #4a5568; }
    textarea, select {
      width: 100%; padding: 12px; border: 1px solid #e2e8f0;
      border-radius: 8px; font-size: 14px; background: white;
      margin-bottom: 16px;
    }
    textarea { height: 120px; resize: vertical; }
    button.generate {
      background: #16A085; color: white; border: none;
      padding: 12px 28px; border-radius: 8px; font-size: 15px;
      cursor: pointer; font-weight: 600; width: 100%;
    }
    button.generate:hover { background: #138d75; }
    #result {
      margin-top: 20px; padding: 16px; background: white;
      border: 1px solid #e2e8f0; border-radius: 8px;
      white-space: pre-wrap; font-size: 14px; line-height: 1.6;
      display: none;
    }
    .copy-btn {
      margin-top: 12px; background: white; border: 1px solid #e2e8f0;
      padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px;
    }
    .loading { color: #718096; font-style: italic; margin-top: 12px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>✉️ AI Email Writer</h1>
    <p class="subtitle">Describe what you need to say — get a polished email in seconds.</p>

    <label for="context">What's the email about?</label>
    <textarea id="context" placeholder="e.g., Follow up with Sarah after our sales call on Monday. We discussed the enterprise plan. I want to send her the pricing doc and suggest a next meeting."></textarea>

    <label for="tone">Email tone</label>
    <select id="tone">
      <option value="professional">Professional</option>
      <option value="friendly">Friendly & Warm</option>
      <option value="assertive">Assertive</option>
      <option value="empathetic">Empathetic</option>
      <option value="casual">Casual</option>
      <option value="formal">Formal</option>
    </select>

    <label for="recipient">Who is this to? (optional)</label>
    <textarea id="recipient" style="height:60px" placeholder="e.g., A potential enterprise client, my direct manager, a customer who complained..."></textarea>

    <button class="generate" onclick="generateEmail()">Generate Email ✨</button>

    <div id="loading" class="loading" style="display:none">Writing your email...</div>
    <div id="result"></div>
    <button class="copy-btn" id="copyBtn" style="display:none" onclick="copyEmail()">📋 Copy Email</button>
  </div>

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

    async function generateEmail() {
      const context = document.getElementById('context').value.trim();
      if (!context) return alert('Please describe what your email is about.');

      const tone = document.getElementById('tone').value;
      const recipient = document.getElementById('recipient').value.trim();

      document.getElementById('loading').style.display = 'block';
      document.getElementById('result').style.display = 'none';
      document.getElementById('copyBtn').style.display = 'none';

      const recipientLine = recipient ? `\n\nThe recipient is: ${recipient}` : '';
      const prompt = `Write a ${tone} professional email based on this context:

${context}${recipientLine}

Requirements:
- Clear subject line (format: "Subject: ...")
- Well-structured body with greeting, main content, and sign-off
- Tone must be: ${tone}
- Length appropriate to the context
- Natural, human-sounding — not robotic or generic`;

      try {
        const r = await AiPass.generateCompletion({
          model: 'gpt-5-mini',
          temperature: 1,
          max_tokens: 16000,
          messages: [
            { role: 'system', content: 'You are an expert email writer. Write professional, effective emails that sound natural and get results.' },
            { role: 'user', content: prompt }
          ]
        });

        const email = r.choices[0].message.content;
        const resultEl = document.getElementById('result');
        resultEl.textContent = email;
        resultEl.style.display = 'block';
        document.getElementById('copyBtn').style.display = 'inline-block';
      } catch (err) {
        alert('Error generating email: ' + err.message);
      } finally {
        document.getElementById('loading').style.display = 'none';
      }
    }

    function copyEmail() {
      const text = document.getElementById('result').textContent;
      navigator.clipboard.writeText(text).then(() => {
        document.getElementById('copyBtn').textContent = '✅ Copied!';
        setTimeout(() => document.getElementById('copyBtn').textContent = '📋 Copy Email', 2000);
      });
    }
  </script>
</body>
</html>

Step 4: Deploy It

Option A — Self-host anywhere: Deploy this single HTML file to any hosting:

Netlify: Drag and drop the folder at netlify.com
GitHub Pages: Push to a repo, enable Pages in settings
Vercel: npx vercel in the project directory
Your own server — it's just one HTML file

AI Pass handles all billing and authentication. Your users pay AI Pass directly, and you earn 50% of the commission on every API call.

Option B — Publish on AI Pass catalog:

Create the app via Developer Dashboard
Paste your HTML as hosted content
Publish and get a page at aipass.one/apps/your-app-name
Share the embed code (the </> button on any AI Pass app) to embed it anywhere

Step 5: Revenue Model

Here's what makes building on AI Pass worth it:

Users spend AI credits on your app
AI Pass charges a small commission on each API call
You earn 50% of that commission automatically
No billing code, no Stripe integration, no infrastructure

The more users you get, the more you earn — passively.

What's Next?

Want to extend this app? Ideas:

Add template library — "Sales Follow-up", "Apology Email", "Partnership Request"
Tone analyzer — let users analyze their own draft before sending
Reply mode — paste an email, get a suggested reply
Multi-language — support writing in Spanish, French, German

Check out the live version: AI Pass Email Writer →

Need help? The Developer Dashboard has OAuth2 client management, API key creation, and usage analytics.

AI Pass SDK handles auth, billing, and model access. You build the UI. Together you ship AI apps that pay.

Build an AI Email Writer App with AI Pass SDK — Step-by-Step Tutorial

Build an AI Email Writer App with AI Pass SDK — Step-by-Step Tutorial

Prerequisites

Step 1: Create Your AI Pass Account

Step 2: Get Your Client ID

Step 3: Build the App

Step 4: Deploy It

Step 5: Revenue Model

What's Next?

Related Apps