AI
Pass

AI Pass SDK Tutorial: Build an AI Newsletter Generator

Eiliya · March 22, 2026 · 6 min read · tutorial

What You'll Build

In this tutorial you'll build "AI Newsletter Generator" — a simple web app that takes a topic, audience, and tone and returns a full newsletter generated by AI in seconds using the AI Pass JavaScript SDK.

The app demonstrates:

  • Initializing the AI Pass SDK
  • Accepting user input (topic, audience, tone)
  • Calling AiPass.generateCompletion with model: "gpt-5-mini", temperature: 1, and max_tokens: 16000
  • Displaying the generated newsletter
  • Minimal error handling and loading state

SDK: https://aipass.one/aipass-sdk.js
SDK docs: https://aipass.one/docs/sdk/reference.html
Developer dashboard: https://aipass.one/panel/developer.html

Prerequisites

  • Basic knowledge of HTML, JavaScript, and async/await.
  • A modern browser.
  • An AI Pass developer account (see next step).
  • Optional: a static host for deployment (GitHub Pages, Netlify, Vercel).

Step 1: Sign Up & Get Your Client ID

  1. Sign up at https://aipass.one
  2. Go to Developer Dashboard → OAuth2 Clients → Create new client: https://aipass.one/panel/developer.html
  3. Copy your Client ID (looks like YOUR_CLIENT_ID) — you'll use this in the SDK initialization.

Important: In examples below keep the placeholder YOUR_CLIENT_ID until you replace it with your real client id in your deployed app.

Step 2: Set Up Your HTML File

Create a simple HTML file. The UI will include:

  • Input for topic
  • Input for audience
  • Input for tone (e.g., professional, casual)
  • Generate button
  • Output area to show the newsletter

We'll also include the AI Pass SDK script. The complete working HTML file is provided at the end of this tutorial.

Step 3: Initialize the AI Pass SDK

Add the AI Pass SDK script and initialize it at the top of your page. Use your Client ID (keep YOUR_CLIENT_ID placeholder in the repo or examples).

<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true, darkMode: true });
</script>
  • requireLogin: true — ensures users authenticate before making API calls.
  • darkMode: true — optional UI preference.

Step 4: Build the AI Newsletter Generator Logic

Below is the code that performs the generation. It MUST call AiPass.generateCompletion with:

  • model: 'gpt-5-mini'
  • temperature: 1
  • max_tokens: 16000

We pass a set of messages (system + user) that instruct the model to produce a newsletter. After the call, we extract the generated content using r.choices[0].message.content.

Complete working snippet (embedded in the final HTML below):

<script>
async function generateNewsletter() {
  const topic = document.getElementById('topic').value.trim();
  const audience = document.getElementById('audience').value.trim();
  const tone = document.getElementById('tone').value.trim() || 'neutral';

  if (!topic || !audience) {
    alert('Please fill in Topic and Audience.');
    return;
  }

  const outputEl = document.getElementById('output');
  const btn = document.getElementById('generateBtn');
  outputEl.textContent = 'Generating newsletter...';
  btn.disabled = true;

  try {
    const prompt = `Write a complete newsletter for the given topic. Include a short introduction, 3-4 sections with subheadings, actionable takeaways, and a short sign-off. Keep it engaging and suitable for the specified audience.

Topic: ${topic}
Audience: ${audience}
Tone: ${tone}

Make the newsletter easy to read, around 600-1000 words. Use clear headings, short paragraphs, and bullet points where appropriate.`;

    const r = await AiPass.generateCompletion({
      model: 'gpt-5-mini',
      temperature: 1,
      max_tokens: 16000,
      messages: [
        { role: 'system', content: 'You are a helpful, professional newsletter writer experienced in writing clear, engaging newsletters for a variety of audiences.' },
        { role: 'user', content: prompt }
      ]
    });

    // IMPORTANT: extract the text from r.choices[0].message.content
    const newsletter = r.choices[0].message.content;
    outputEl.textContent = newsletter;
  } catch (err) {
    console.error('Generation error', err);
    outputEl.textContent = 'Error generating newsletter. Check console for details.';
  } finally {
    btn.disabled = false;
  }
}
</script>

Notes:

  • temperature: 1 gives creativity while remaining consistent.
  • max_tokens: 16000 allows long outputs (newsletter-length).
  • The SDK handles login if the user isn't logged in when requireLogin is true.

Step 5: Deploy

Once your app works locally, deploy it so others can use it.

Option A: Self-host

  • GitHub Pages: push the HTML to a repo and enable GitHub Pages.
  • Netlify / Vercel: connect your repo and deploy with one click.

Option B: Publish on AI Pass catalog

  • Publish your app to the AI Pass catalog so other AI Pass users can discover it.
  • When users use your app through AI Pass, you earn revenue (see next section).
  • Manage apps and earnings from the Developer Dashboard: https://aipass.one/panel/developer.html

Earn Revenue

Developers earn a 50% commission on every API call made through their published app in the AI Pass catalog. Publish your app to reach more users and monetize your integrations.

Manage clients, view earnings, and configure OAuth clients here: https://aipass.one/panel/developer.html

Complete Source Code

Below is a full, working HTML file you can save as index.html. Replace YOUR_CLIENT_ID with your actual Client ID before deploying. (Keep the placeholder in examples and repo templates.)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AI Newsletter Generator</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; line-height: 1.6; }
    label { display:block; margin-top:12px; font-weight:600; }
    input[type="text"], textarea, select { width:100%; padding:8px; margin-top:6px; box-sizing:border-box; }
    #generateBtn { margin-top:12px; padding:10px 16px; font-size:16px; }
    #output { white-space: pre-wrap; background:#f9f9f9; padding:16px; border-radius:6px; margin-top:16px; min-height:200px; }
    header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
    h1 { margin:0; font-size:20px; }
  </style>
</head>
<body>
  <header>
    <h1>AI Newsletter Generator</h1>
    <small>Powered by AI Pass</small>
  </header>

  <p>Enter a topic, target audience, and tone. Click Generate to create a full newsletter in seconds.</p>

  <div>
    <label for="topic">Topic</label>
    <input id="topic" type="text" placeholder="e.g. The future of remote work" />

    <label for="audience">Audience</label>
    <input id="audience" type="text" placeholder="e.g. startup founders, product managers, developers" />

    <label for="tone">Tone</label>
    <select id="tone">
      <option value="professional">Professional</option>
      <option value="friendly">Friendly</option>
      <option value="casual">Casual</option>
      <option value="enthusiastic">Enthusiastic</option>
      <option value="informative">Informative</option>
    </select>

    <button id="generateBtn" onclick="generateNewsletter()">Generate Newsletter</button>

    <div id="output">Your generated newsletter will appear here.</div>
  </div>

  <!-- AI Pass SDK -->
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <script>
    // Initialize SDK (replace YOUR_CLIENT_ID with your Client ID)
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true, darkMode: true });

    async function generateNewsletter() {
      const topic = document.getElementById('topic').value.trim();
      const audience = document.getElementById('audience').value.trim();
      const tone = document.getElementById('tone').value.trim() || 'neutral';

      if (!topic || !audience) {
        alert('Please fill in Topic and Audience.');
        return;
      }

      const outputEl = document.getElementById('output');
      const btn = document.getElementById('generateBtn');
      outputEl.textContent = 'Generating newsletter...';
      btn.disabled = true;

      try {
        const prompt = `Write a complete newsletter for the given topic. Include a short introduction, 3-4 sections with subheadings, actionable takeaways, and a short sign-off. Keep it engaging and suitable for the specified audience.

Topic: ${topic}
Audience: ${audience}
Tone: ${tone}

Make the newsletter easy to read, around 600-1000 words. Use clear headings, short paragraphs, and bullet points where appropriate.`;

        const r = await AiPass.generateCompletion({
          model: 'gpt-5-mini',
          temperature: 1,
          max_tokens: 16000,
          messages: [
            { role: 'system', content: 'You are a helpful, professional newsletter writer experienced in writing clear, engaging newsletters for a variety of audiences.' },
            { role: 'user', content: prompt }
          ]
        });

        // Use the required response extraction
        const newsletter = r.choices[0].message.content;
        outputEl.textContent = newsletter;
      } catch (err) {
        console.error('Generation error', err);
        outputEl.textContent = 'Error generating newsletter. Check console for details.';
      } finally {
        btn.disabled = false;
      }
    }
  </script>
</body>
</html>

That's it — you now have a working AI Newsletter Generator powered by AI Pass. Replace YOUR_CLIENT_ID with your actual Client ID, deploy to your preferred host, and consider publishing to the AI Pass catalog to reach more users and earn revenue. Happy building!

Related Apps

newsletter-gen email-writer social-writer