AI
Pass

Build an AI Text Expander App - Complete SDK Tutorial

Eiliya · March 11, 2026 · 2 min read · Development

Build an AI Text Expander App - Complete SDK Tutorial

Learn how to build an AI-powered text expander with the AI Pass SDK. Create smart snippets that expand into full paragraphs.

What You'll Build

A text expander app that:

  • Expands short triggers into full content
  • Suggests AI variations
  • Customizes tone (formal, casual, technical)
  • Works instantly with zero backend

Prerequisites

  • Basic HTML/JavaScript
  • AI Pass account
  • 5 minutes

Step 1: Get API Credentials

  1. Sign up at AI Pass — $1 free credit
  2. Go to Developer Dashboard → OAuth2 Clients
  3. Create client and copy Client ID

Step 2: Initialize SDK

<script src="https://aipass.one/aipass-sdk.js"></script>

const aipass = new AIPass({
  clientId: 'YOUR_CLIENT_ID',
  requireLogin: true
});

Step 3: Expand Text

async function expandText(trigger, tone = 'casual') {
  const toneInstructions = {
    formal: 'Write in a professional, formal tone',
    casual: 'Write in a relaxed, conversational tone',
    technical: 'Write with precise technical language'
  };

  const r = await aipass.apikey.v1.chat.completions({
    model: 'openai/gpt-4.1-mini',
    messages: [
      {
        role: 'system',
        content: `You are a text expansion assistant. ${toneInstructions[tone]} Expand the trigger into a complete, well-written paragraph.`
      },
      {
        role: 'user',
        content: `Expand this trigger: "${trigger}"`
      }
    ],
    temperature: 1,
    max_tokens: 16000
  });

  return r.choices[0].message.content;
}

Step 4: Build UI

<!DOCTYPE html>
<html>
<head>
  <title>AI Text Expander</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
  <style>
    body { font-family: system-ui; max-width: 800px; margin: 40px auto; padding: 20px; }
    input { padding: 12px; font-size: 16px; width: 60%; }
    select { padding: 12px; font-size: 16px; }
    button { padding: 12px 24px; background: #007AFF; color: white; border: none; cursor: pointer; }
    #result { margin-top: 20px; padding: 20px; background: #f5f5f5; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>AI Text Expander</h1>
  <p>Type a trigger and expand it instantly</p>
  
  <input type="text" id="trigger" placeholder="e.g., followup, intro, thanks">
  <select id="tone">
    <option value="casual">Casual</option>
    <option value="formal">Formal</option>
    <option value="technical">Technical</option>
  </select>
  <button onclick="expand()">Expand</button>
  
  <div id="result"></div>

  <script>
    const aipass = new AIPass({
      clientId: 'YOUR_CLIENT_ID',
      requireLogin: true
    });

    async function expand() {
      const trigger = document.getElementById('trigger').value;
      const tone = document.getElementById('tone').value;
      
      const result = await expandText(trigger, tone);
      document.getElementById('result').innerText = result;
    }

    async function expandText(trigger, tone) {
      const toneInstructions = {
        formal: 'Write in a professional, formal tone',
        casual: 'Write in a relaxed, conversational tone',
        technical: 'Write with precise technical language'
      };

      const r = await aipass.apikey.v1.chat.completions({
        model: 'openai/gpt-4.1-mini',
        messages: [
          {
            role: 'system',
            content: `You are a text expansion assistant. ${toneInstructions[tone]} Expand the trigger into a complete, well-written paragraph.`
          },
          {
            role: 'user',
            content: `Expand this trigger: "${trigger}"`
          }
        ],
        temperature: 1,
        max_tokens: 16000
      });

      return r.choices[0].message.content;
    }
  </script>
</body>
</html>

Revenue: 50% Commission

Earn 50% commission on every API call.

Cost

~$0.0002 per expansion

Live Demo

AI Text Expander

Related Apps

text-expander