Step-by-Step Tutorial: Build an AI Sleep Coach with AI Pass SDK

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

What You'll Build

A simple web app — "AI Sleep Coach" — that asks users to describe their sleep habits and returns a personalized sleep-improvement plan using the AI Pass JavaScript SDK. The app demonstrates initializing the SDK, requesting a completion from the gpt-5-mini model, and rendering the AI's plan in the page.

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

Prerequisites

Basic HTML, CSS, and JavaScript knowledge
A modern browser
An AI Pass developer account (free to sign up)

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 that includes a textarea for users to describe their sleep habits, a button to submit, and a container to show the AI's response. You'll load the AI Pass SDK via the provided script URL.

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>

This initializes the SDK with your client ID (use the placeholder YOUR_CLIENT_ID in your code while developing), requires the user to log in before generating completions, and enables dark mode UI components.

Step 4: Build the AI Sleep Coach Logic

Below is the working JavaScript logic for the AI Sleep Coach. It:

Reads the user's sleep-habit description
Calls AiPass.generateCompletion using model: 'gpt-5-mini' with temperature: 1 and max_tokens: 16000 (required)
Extracts the response via r.choices[0].message.content and displays it

Key SDK call (required shape): AiPass.generateCompletion({ model: 'gpt-5-mini', temperature: 1, max_tokens: 16000, messages: [...] })

Example code snippet to wire up the UI (this is included in the full HTML later too):

<script>
async function requestSleepPlan() {
  const inputEl = document.getElementById('sleepInput');
  const outputEl = document.getElementById('sleepPlan');
  const prompt = inputEl.value.trim();
  if (!prompt) {
    outputEl.textContent = 'Please describe your sleep habits and concerns.';
    return;
  }

  outputEl.textContent = 'Generating personalized plan…';

  try {
    // Build messages: system instructs behavior; user provides sleep info
    const messages = [
      { role: 'system', content: 'You are an expert sleep coach. Provide a friendly, actionable, and personalized sleep improvement plan. Include short-term tips, a 2-week routine, and suggestions for when to consult a professional.' },
      { role: 'user', content: `Here are my sleep habits and concerns:\n\n${prompt}\n\nPlease give me a personalized sleep improvement plan.` }
    ];

    const r = await AiPass.generateCompletion({
      model: 'gpt-5-mini',
      temperature: 1,
      max_tokens: 16000,
      messages
    });

    // REQUIRED: read the response this way
    const reply = r.choices[0].message.content;
    outputEl.textContent = reply;
  } catch (err) {
    console.error(err);
    outputEl.textContent = 'Sorry — something went wrong. Please try again.';
  }
}

document.getElementById('generateBtn').addEventListener('click', requestSleepPlan);
</script>

Notes:

temperature: 1 makes outputs creative and flexible; adjust only if you have a reason.
max_tokens: 16000 allows long, detailed plans.
Keep the system prompt focused and concise for best results.

Step 5: Deploy

Option A — Self-host

Host the static HTML on GitHub Pages, Netlify, or Vercel. No server required since the SDK and API calls are client-side and authenticated via the user's login.

Option B — Publish on AI Pass catalog

Publish your app to the AI Pass catalog so other users can find and use it. When users use your app through the catalog, you earn revenue (see below).

Earn Revenue

Developers earn a 50% commission on every API call made through their published app. To manage clients and see earnings, visit the developer dashboard: https://aipass.one/panel/developer.html

Complete Source Code

Full working HTML file. Replace nothing in the code except insert your actual Client ID where indicated if publishing; while developing keep the placeholder YOUR_CLIENT_ID:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>AI Sleep Coach</title>
  <style>
    body { font-family: system-ui, Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 16px; line-height: 1.5; color: #111; }
    h1 { margin-bottom: 0.25rem; }
    textarea { width: 100%; min-height: 160px; padding: 12px; font-size: 14px; box-sizing: border-box; margin-bottom: 8px; }
    button { padding: 10px 14px; font-size: 15px; cursor: pointer; }
    pre { white-space: pre-wrap; background: #f7f7f7; padding: 12px; border-radius: 6px; }
    .meta { margin-bottom: 12px; color: #555; }
  </style>
</head>
<body>
  <h1>AI Sleep Coach</h1>
  <p class="meta">Describe your sleep habits (bedtime, wake time, naps, caffeine, issues, goals). The AI will return a personalized sleep improvement plan.</p>

  <label for="sleepInput"><strong>Your sleep habits & concerns</strong></label>
  <textarea id="sleepInput" placeholder="E.g. I go to bed at 1am, wake at 7am, wake up during the night, drink coffee after lunch..."></textarea>

  <div>
    <button id="generateBtn">Get My Sleep Plan</button>
  </div>

  <h2>Personalized Plan</h2>
  <pre id="sleepPlan">Your personalized plan will appear here.</pre>

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

  <script>
  async function requestSleepPlan() {
    const inputEl = document.getElementById('sleepInput');
    const outputEl = document.getElementById('sleepPlan');
    const prompt = inputEl.value.trim();
    if (!prompt) {
      outputEl.textContent = 'Please describe your sleep habits and concerns.';
      return;
    }

    outputEl.textContent = 'Generating personalized plan…';

    try {
      const messages = [
        { role: 'system', content: 'You are an expert sleep coach. Provide a friendly, actionable, and personalized sleep improvement plan. Include short-term tips, a 2-week routine, and signs that warrant a medical consultation.' },
        { role: 'user', content: `User sleep description:\n\n${prompt}\n\nPlease provide a personalized sleep improvement plan, with practical steps, daily routine suggestions, and quick tips.` }
      ];

      const r = await AiPass.generateCompletion({
        model: 'gpt-5-mini',
        temperature: 1,
        max_tokens: 16000,
        messages
      });

      // Use the response content per SDK response shape
      const reply = r.choices[0].message.content;
      outputEl.textContent = reply;
    } catch (err) {
      console.error('AI Pass error:', err);
      outputEl.textContent = 'Sorry — something went wrong. Please try again.';
    }
  }

  document.getElementById('generateBtn').addEventListener('click', requestSleepPlan);
  </script>
</body>
</html>

Notes on publishing

While developing, keep YOUR_CLIENT_ID placeholder. Replace it with the real client ID from your dashboard before publishing.
If you publish to the AI Pass catalog, follow the listing guidelines in the developer dashboard.

You're all set — build, test, and iterate on system prompts and UI to tailor the coaching tone and level of detail. Happy building!