How to Build an AI Content Calendar App with AI Pass SDK | Tutorial

What You'll Build

A simple, front-end "AI Content Calendar" app that lets a content creator enter their brand, niche, and audience, then generates a full month (30 days) of content ideas, titles, formats, hooks, and CTAs using the AI Pass JavaScript SDK.

The app:

• Collects brand, niche, audience inputs
• Calls AiPass.generateCompletion with model: "gpt-5-mini", temperature: 1, max_tokens: 16000
• Renders a day-by-day content calendar output you can copy or export

Prerequisites

• Basic HTML, CSS, and JavaScript knowledge
• An AI Pass account (https://aipass.one)
• A created OAuth2 client in the AI Pass Developer Dashboard and its Client ID (use YOUR_CLIENT_ID placeholder in this tutorial)

Step 1: Sign Up & Get Your Client ID

• Sign up at https://aipass.one
• Go to Developer Dashboard → OAuth2 Clients → Create new client
• Copy your Client ID (looks like YOUR_CLIENT_ID)

Step 2: Set Up Your HTML File

Create a simple HTML file with a form where users input:

• Brand name
• Niche
• Target audience

And an output area for the generated calendar.

You’ll include the AI Pass SDK script and a script block for the app logic.

Step 3: Initialize the AI Pass SDK

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

Step 4: Build the AI Content Calendar Logic

Below is the complete working logic. Important details:

• The call to AiPass.generateCompletion uses model: 'gpt-5-mini'
• It includes temperature: 1 and max_tokens: 16000
• It reads the response with r.choices[0].message.content

Explanation of the prompt strategy:

• Use a short system message that defines the assistant as an expert content strategist
• Provide a detailed user message requesting a 30-day content calendar with format, title, hook, CTA, and scheduling suggestions

Example code snippet (complete working code shown in the next section with the rest of the page):

async function generateCalendar(brand, niche, audience) {
  const prompt = `You are an expert content strategist. Create a 30-day content calendar for the next month for the brand "${brand}". Niche: ${niche}. Audience: ${audience}. For each day (1 through 30), provide:
- Day number and a suggested publish date (relative to the upcoming month)
- Title (short)
- Format (e.g., blog post, reel, short video, carousel, email)
- One-sentence hook
- Suggested call-to-action (CTA)
- 2–3 relevant tags/hashtags

Return the calendar as plain text with clear day separators (e.g., "Day 1:", "Day 2:", ...).`;

  // AiPass.generateCompletion MUST include model, temperature:1, max_tokens:16000
  const r = await AiPass.generateCompletion({
    model: 'gpt-5-mini',
    temperature: 1,
    max_tokens: 16000,
    messages: [
      { role: 'system', content: 'You are a helpful and creative content strategist.' },
      { role: 'user', content: prompt }
    ]
  });

  // IMPORTANT: read the response this way
  return r.choices[0].message.content;
}

The return value is plain text you can render into a

 or a formatted DOM.

Step 5: Deploy
Option A: Self-host

Host the static HTML on GitHub Pages, Netlify, or Vercel. Just push the HTML file and publish the site.

Option B: Publish on AI Pass catalog

Publish your app to the AI Pass catalog so users can discover it.
When users run your app via the AI Pass platform, you earn revenue (see next section).

Earn Revenue
Developers earn 50% commission on every API call made through their published app in the AI Pass ecosystem. If you publish your app to the AI Pass catalog and users sign in to use it, 50% of the API fees from those calls are credited to you.
See the Developer Dashboard for details and to manage payouts:
https://aipass.one/panel/developer.html
Complete Source Code
Below is a full working HTML file. Replace YOUR_CLIENT_ID with the Client ID you copied in Step 1 (in your actual deployed app—keep the placeholder in code examples and shared repos).
Save as ai-content-calendar.html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AI Content Calendar</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 2rem auto; padding: 1rem; color: #111; }
    label { display: block; margin-top: 0.75rem; font-weight: 600; }
    input, textarea, select { width: 100%; padding: 0.5rem; margin-top: 0.25rem; box-sizing: border-box; }
    button { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 1rem; cursor: pointer; }
    pre { white-space: pre-wrap; background: #f5f5f5; padding: 1rem; border-radius: 6px; overflow-x: auto; }
    .loading { opacity: 0.7; }
    .meta { font-size: 0.9rem; color: #555; margin-top: 0.25rem; }
  </style>
</head>
<body>

  <h1>AI Content Calendar</h1>
  <p>Enter your brand, niche and audience to generate a full 30-day content calendar.</p>

  <div>
    <label for="brand">Brand Name</label>
    <input id="brand" placeholder="Your brand name" />

    <label for="niche">Niche / Industry</label>
    <input id="niche" placeholder="e.g., sustainable fashion, fintech, fitness coaching" />

    <label for="audience">Target Audience</label>
    <input id="audience" placeholder="e.g., busy moms, SaaS founders, Gen Z shoppers" />

    <button id="generateBtn">Generate 30-Day Calendar</button>
    <div class="meta">Note: You may be prompted to log in via AI Pass (OAuth) because the SDK is initialized with requireLogin: true.</div>
  </div>

  <h2>Generated Calendar</h2>
  <pre id="output">No calendar generated yet.</pre>

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

  <script>
    const brandInput = document.getElementById('brand');
    const nicheInput = document.getElementById('niche');
    const audienceInput = document.getElementById('audience');
    const generateBtn = document.getElementById('generateBtn');
    const output = document.getElementById('output');

    function setLoading(isLoading) {
      if (isLoading) {
        generateBtn.textContent = 'Generating...';
        generateBtn.disabled = true;
        output.classList.add('loading');
        output.textContent = 'Generating your 30-day content calendar. This can take a few seconds...';
      } else {
        generateBtn.textContent = 'Generate 30-Day Calendar';
        generateBtn.disabled = false;
        output.classList.remove('loading');
      }
    }

    async function generateCalendar(brand, niche, audience) {
      const prompt = `You are an expert content strategist. Create a detailed 30-day content calendar for the next month for the brand "${brand}". Niche: ${niche}. Audience: ${audience}.
For each day (Day 1 through Day 30), provide:
- A suggested publish date (for the upcoming month) in YYYY-MM-DD format
- Title (short, catchy)
- Format (e.g., blog post, short video, reel, carousel, newsletter)
- One-sentence hook that will be used as the opening for the post or caption
- Suggested Call-to-Action (CTA)
- 2-3 relevant tags or hashtags

Return the calendar as plain text with clear day separators, e.g.:
Day 1 (YYYY-MM-DD):
Title: ...
Format: ...
Hook: ...
CTA: ...
Tags: ...
...
Ensure the calendar is varied across formats and includes quick ideas for repurposing. Keep entries concise and action-ready.`;

      // IMPORTANT: Always include model, temperature:1, max_tokens:16000
      const r = await AiPass.generateCompletion({
        model: 'gpt-5-mini',
        temperature: 1,
        max_tokens: 16000,
        messages: [
          { role: 'system', content: 'You are a helpful and creative content strategist.' },
          { role: 'user', content: prompt }
        ]
      });

      // IMPORTANT: Read the response this way
      return r.choices[0].message.content;
    }

    generateBtn.addEventListener('click', async () => {
      const brand = brandInput.value.trim() || 'Acme Co.';
      const niche = nicheInput.value.trim() || 'consumer tech';
      const audience = audienceInput.value.trim() || 'early adopters and tech enthusiasts';

      try {
        setLoading(true);
        const calendarText = await generateCalendar(brand, niche, audience);
        output.textContent = calendarText;
      } catch (err) {
        console.error('Error generating calendar:', err);
        output.textContent = 'An error occurred while generating the calendar. Check the console for details.';
      } finally {
        setLoading(false);
      }
    });

    // Optional: prefill for faster testing
    brandInput.value = 'Acme Co.';
    nicheInput.value = 'wellness & self-care';
    audienceInput.value = 'busy professionals aged 25-45 wanting quick habits';
  </script>
</body>
</html>

Notes

Keep YOUR_CLIENT_ID as a placeholder in any code you share publicly.
The SDK initialization used requireLogin: true, so users will be prompted to log in via AI Pass. If you prefer a public flow, modify the initialization options per the SDK docs and your OAuth client settings.

That’s it — with this single HTML file you have a working AI Content Calendar front end powered by AI Pass. Deploy it on GitHub Pages, Netlify, or Vercel, or publish to the AI Pass catalog to earn revenue.