AI
Pass

Build an AI Prompt Optimizer with AI Pass SDK — Step-by-Step Tutorial

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

What You'll Build

In this tutorial you'll build "AI Prompt Optimizer" — a small web app where users paste a weak or vague prompt and get back a powerful, optimized prompt ready to use with large language models. We'll use the AI Pass JavaScript SDK to authenticate users and call the model (gpt-5-mini) to rewrite and improve prompts.

Prerequisites

  • Basic HTML, CSS, and JavaScript knowledge.
  • A modern browser for testing.
  • An AI Pass account (https://aipass.one) and an OAuth2 client (Client ID).
  • Optional: hosting (GitHub Pages, Netlify, Vercel) for deployment.

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 textarea to paste the weak prompt
  • A button to trigger optimization
  • A place to show the optimized prompt
  • Include the AI Pass SDK script

We'll provide a complete file later. Keep the Client ID placeholder as YOUR_CLIENT_ID (do not replace it with a real ID in public examples).

Step 3: Initialize the AI Pass SDK

Include the SDK and initialize it. Use your client ID (placeholder below):

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

Note: requireLogin: true will ensure users must sign-in via AI Pass before using the app.

Step 4: Build the AI Prompt Optimizer Logic

Below is the core logic you need. This MUST include a generateCompletion call with temperature:1 and max_tokens:16000 and use model: 'gpt-5-mini'. The SDK call should read the resulting text via r.choices[0].message.content.

High-level flow:

  • Read the user's weak prompt.
  • Send a structured set of messages to the model with a system message telling it to optimize prompts.
  • Display the result (r.choices[0].message.content).

Example JavaScript (included in full HTML later):

async function optimizePrompt() {
  const input = document.getElementById('promptInput').value.trim();
  if (!input) {
    alert('Please paste a prompt to optimize.');
    return;
  }

  setLoading(true);

  try {
    const messages = [
      {
        role: 'system',
        content: "You are an expert prompt engineer. Take the user's weak prompt and rewrite it into a concise, powerful, and unambiguous prompt optimized for large language models. Preserve the original intent. Add explicit instructions for format, constraints, example outputs if appropriate, and any recommended parameters (temperature, max tokens, stop sequences) in a short comment."
      },
      {
        role: 'user',
        content: `Optimize this prompt:\n\n${input}`
      }
    ];

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

    // REQUIRED: read the completion via r.choices[0].message.content
    const optimized = r.choices[0].message.content;
    document.getElementById('result').textContent = optimized;
  } catch (err) {
    console.error('Optimization error', err);
    alert('Failed to optimize prompt. See console for details.');
  } finally {
    setLoading(false);
  }
}

Notes:

  • temperature:1 encourages creative rewriting while keeping consistency.
  • max_tokens:16000 allows long, detailed optimized prompts and recommended metadata.
  • Always access the text as r.choices[0].message.content per SDK output structure.

Step 5: Deploy

You have two common options:

Option A — Self-host:

  • GitHub Pages: push the HTML to a repo and enable Pages.
  • Netlify/Vercel: drag & drop or connect repo for automatic deployment.

Option B — Publish on AI Pass catalog:

  • Submit your app to the AI Pass catalog to reach users on the platform.
  • If accepted, your app can earn revenue as users call the API through it.

Publishing on the AI Pass catalog also enables discovery and monetization (see next section).

Earn Revenue

Developers on AI Pass earn a 50% commission on every API call their users make through the published app. To manage your apps and view earnings, go to the developer dashboard:

https://aipass.one/panel/developer.html

This is a great way to monetize helpful tools like a Prompt Optimizer.

Complete Source Code

Below is a full working single-file HTML app. Replace YOUR_CLIENT_ID with the client id you created in Step 1 before deploying (do not commit secrets to public repos). For the purposes of this tutorial and the CRITICAL CODE REQUIREMENTS, keep the placeholder in examples.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>AI Prompt Optimizer</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; color: #111; background: #f7f7fb; }
    header { margin-bottom: 1.5rem; }
    textarea { width: 100%; min-height: 140px; padding: 0.6rem; font-size: 1rem; border-radius: 6px; border: 1px solid #ddd; }
    button { padding: 0.6rem 1rem; font-size: 1rem; border: none; background: #286efa; color: white; border-radius: 6px; cursor: pointer; }
    button:disabled { opacity: 0.6; cursor: not-allowed; }
    pre { white-space: pre-wrap; background: #fff; padding: 1rem; border-radius: 6px; border: 1px solid #e6e6ef; min-height: 120px; }
    .row { display:flex; gap: 1rem; margin-top: 1rem; align-items:flex-start; }
    .col { flex:1; }
    .small { font-size:0.9rem; color:#555; margin-top:0.5rem; }
  </style>
</head>
<body>
  <header>
    <h1>AI Prompt Optimizer</h1>
    <p>Paste a weak or vague prompt and get back a powerful, optimized prompt for use with modern LLMs.</p>
  </header>

  <div>
    <label for="promptInput"><strong>Weak Prompt</strong></label>
    <textarea id="promptInput" placeholder="Enter the weak prompt you want optimized..."></textarea>
    <div class="small">Tip: Include any target output format or constraints in your weak prompt to preserve them in the optimized version.</div>

    <div class="row">
      <div class="col">
        <button id="optimizeBtn">Optimize Prompt</button>
      </div>
      <div style="display:flex;align-items:center;">
        <span id="loading" style="display:none;">⏳ Optimizing...</span>
      </div>
    </div>

    <h3>Optimized Prompt</h3>
    <pre id="result">Your optimized prompt will appear here.</pre>
  </div>

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

    const btn = document.getElementById('optimizeBtn');
    const loadingEl = document.getElementById('loading');

    function setLoading(isLoading) {
      loadingEl.style.display = isLoading ? 'inline' : 'none';
      btn.disabled = isLoading;
    }

    async function optimizePrompt() {
      const input = document.getElementById('promptInput').value.trim();
      if (!input) {
        alert('Please paste a prompt to optimize.');
        return;
      }

      setLoading(true);

      try {
        const messages = [
          {
            role: 'system',
            content: "You are an expert prompt engineer. Take the user's weak prompt and rewrite it into a concise, powerful, and unambiguous prompt optimized for large language models. Preserve the user's original intent. Include explicit output format instructions, constraints, and provide a short comment with recommended parameters and example output if applicable."
          },
          {
            role: 'user',
            content: `Optimize this prompt:\n\n${input}`
          }
        ];

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

        // CRITICAL: Use r.choices[0].message.content for the response text
        const optimized = r.choices[0].message.content;
        document.getElementById('result').textContent = optimized;
      } catch (err) {
        console.error('Optimization error', err);
        alert('Failed to optimize prompt. Check console for details.');
      } finally {
        setLoading(false);
      }
    }

    btn.addEventListener('click', optimizePrompt);
  </script>
</body>
</html>

That's it — you now have a working AI Prompt Optimizer that uses the AI Pass JavaScript SDK to call gpt-5-mini with the required parameters. Deploy it to your favorite host or publish it on the AI Pass catalog to start earning revenue.

For SDK reference and advanced options: https://aipass.one/docs/sdk/reference.html

Developer dashboard (manage clients, apps, and earnings): https://aipass.one/panel/developer.html

Related Apps

prompt-optimizer code-gen essay-writer