AI
Pass

AI Pass SDK Tutorial: Build an AI Text Detector App

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

What You'll Build

A simple web app called "AI Text Detector" that lets users paste any text and instantly get an assessment of whether the text is likely AI-generated. The app uses the AI Pass JavaScript SDK to call the gpt-5-mini model and returns the model answer (displaying r.choices[0].message.content) for transparency.

Prerequisites

  • Basic familiarity with HTML, JavaScript, and async/await.
  • A modern browser.
  • An AI Pass developer account (you'll need a Client ID).

Useful links:

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
  3. Copy your Client ID (looks like YOUR_CLIENT_ID)

Important: In sample code below we use the placeholder YOUR_CLIENT_ID. Replace it in your own deployment with the real ID from the dashboard.

Step 2: Set Up Your HTML File

Create an index.html file. The UI will be simple: a textarea for the input, a Detect button, and an output area for the model result (and optionally a parsed result).

Step 3: Initialize the AI Pass SDK

Include the SDK and initialize it. Use your Client ID in place of YOUR_CLIENT_ID:

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

The app above requires the user to log in (via requireLogin: true) so API calls are associated with their session.

Step 4: Build the AI Text Detector Logic

We will call AiPass.generateCompletion with:

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

We will send a clear prompt asking the model to determine whether the input text is AI-generated, and to return a short structured answer. Important: the app will display the raw model output from r.choices[0].message.content.

Complete working logic (excerpt):

<script>
async function detectAI(text) {
  // A clear system instruction to guide the model for a consistent output format.
  const messages = [
    { role: 'system', content: 'You are an assistant that decides whether a text was written by a human or generated by an AI. Answer in JSON with keys: ai_generated (true/false), confidence (0-100), explanation (short).' },
    { role: 'user', content: `Analyze the following text and answer in JSON only:\n\n"""${text}"""` }
  ];

  try {
    // CRITICAL: Always include temperature:1 and max_tokens:16000 and use model: 'gpt-5-mini'
    const r = await AiPass.generateCompletion({
      model: 'gpt-5-mini',
      temperature: 1,
      max_tokens: 16000,
      messages: messages
    });

    // The SDK returns choices; show the raw content from r.choices[0].message.content
    const output = r.choices[0].message.content;
    return { raw: output, meta: r };
  } catch (err) {
    console.error('AI Pass error', err);
    throw err;
  }
}
</script>

Notes:

  • We set a high max_tokens (16000) so the model can handle long inputs and return detailed responses.
  • We use temperature 1 for creative but consistent outputs; modify only if you need less variability.
  • Always read and display r.choices[0].message.content (this app shows the raw model answer for transparency).

Step 5: Deploy

Option A — Self-host

  • Host your static site on GitHub Pages, Netlify, or Vercel. Just push the index.html file and follow platform instructions.

Option B — Publish on AI Pass catalog

  • You can publish your app in the AI Pass catalog and earn revenue.
  • When users call the API through your published app, you earn 50% commission on those API calls.

Earn Revenue

Developers earn 50% commission on every API call made through their published app in the AI Pass catalog. Manage and track your apps and earnings from the developer dashboard: https://aipass.one/panel/developer.html

Complete Source Code

Below is a full working HTML file for the AI Text Detector. Replace YOUR_CLIENT_ID with your actual client ID when deploying.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>AI Text Detector — AI Pass</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 20px; color: #111; background: #f7f7f8; }
    h1 { margin-bottom: 0.2em; }
    textarea { width: 100%; height: 180px; padding: 10px; font-size: 14px; }
    button { padding: 10px 16px; font-size: 16px; margin-top: 10px; cursor: pointer; }
    pre { background: #fff; padding: 12px; border-radius: 6px; overflow: auto; }
    .row { margin-top: 16px; }
    .loading { opacity: 0.7; }
    .meta { color: #666; font-size: 13px; margin-top: 8px; }
  </style>
</head>
<body>

  <h1>AI Text Detector</h1>
  <p>Paste any text below and click "Detect" to see if it's likely AI-generated. The raw model response is shown for transparency.</p>

  <div class="row">
    <textarea id="inputText" placeholder="Paste text here..."></textarea>
  </div>

  <div class="row">
    <button id="detectBtn">Detect</button>
    <span id="status" class="meta"></span>
  </div>

  <div class="row">
    <h3>Model Output (raw)</h3>
    <pre id="outputRaw">No output yet.</pre>
  </div>

  <div class="row">
    <h3>Parsed Result (if JSON)</h3>
    <pre id="parsed">—</pre>
  </div>

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

    const inputEl = document.getElementById('inputText');
    const outputRawEl = document.getElementById('outputRaw');
    const parsedEl = document.getElementById('parsed');
    const detectBtn = document.getElementById('detectBtn');
    const statusEl = document.getElementById('status');

    async function detectAI(text) {
      const messages = [
        { role: 'system', content: 'You are an assistant that decides whether a text was written by a human or generated by an AI. Answer in JSON with keys: ai_generated (true/false), confidence (0-100), explanation (short).' },
        { role: 'user', content: `Analyze the following text and answer in JSON only:\n\n"""${text}"""` }
      ];

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

        // Must use r.choices[0].message.content as required
        const output = r.choices[0].message.content;
        return { raw: output, meta: r };
      } catch (err) {
        console.error('AI Pass error', err);
        throw err;
      }
    }

    function tryParseJson(text) {
      try {
        const j = JSON.parse(text);
        return j;
      } catch {
        // sometimes the model returns text + JSON; try to extract JSON substring
        const jsonMatch = text.match(/\{[\s\S]*\}/);
        if (jsonMatch) {
          try { return JSON.parse(jsonMatch[0]); } catch { return null; }
        }
        return null;
      }
    }

    detectBtn.addEventListener('click', async () => {
      const text = inputEl.value.trim();
      if (!text) {
        alert('Please paste some text to analyze.');
        return;
      }

      detectBtn.disabled = true;
      detectBtn.classList.add('loading');
      statusEl.textContent = 'Analyzing...';

      try {
        const result = await detectAI(text);

        outputRawEl.textContent = result.raw || 'No output returned.';
        const parsed = tryParseJson(result.raw);
        if (parsed) {
          parsedEl.textContent = JSON.stringify(parsed, null, 2);
        } else {
          parsedEl.textContent = 'Could not parse JSON from model output. See raw output above.';
        }

        statusEl.textContent = 'Done';
      } catch (err) {
        outputRawEl.textContent = 'Error: ' + (err.message || err);
        parsedEl.textContent = '—';
        statusEl.textContent = 'Error';
      } finally {
        detectBtn.disabled = false;
        detectBtn.classList.remove('loading');
      }
    });
  </script>

</body>
</html>

Notes and tips

  • The app displays the raw model answer from r.choices[0].message.content so you can inspect what the model returned.
  • If you publish this app in the AI Pass catalog, you’ll earn 50% commission on API calls made by your app users. Manage apps and payouts from your developer dashboard: https://aipass.one/panel/developer.html
  • Adjust the system prompt to suit your detection policy or to enforce stricter output formats (e.g., always return compact JSON).

That’s it — you now have a simple AI Text Detector powered by AI Pass using the JavaScript SDK. Replace the placeholder client ID with your real one and deploy.

Related Apps

ai-detector humanizer grammar-fix