AI
Pass

Build an AI Translator with AI Pass SDK

Eiliya · February 13, 2026 · 2 min read · tutorial

Build an AI Translator with AI Pass SDK

Ready to add fast, natural translations to your site — and earn while you do it? This guide walks you through building a simple, AI-powered translator using the AI Pass SDK. Your users get context-aware translations, and you earn commission on each API call.

What You'll Build

A tiny translation tool where people paste text, choose a target language, and get a natural-sounding translation back. Auth and billing are handled by AI Pass, and you earn 50% commission on every API call.

Step 1: Create Your AI Pass Account

Sign up at aipass.one and confirm your email so you can access the developer tools.

Step 2: Create an OAuth2 Client

  1. Go to Developer Dashboard
  2. Navigate to OAuth2 Clients
  3. Click Create Client
  4. Copy your Client ID (looks like client_ODyf..., NOT your app slug)

Step 3: Set Up the SDK

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

Step 4: Build the Translator

async function translate() {
  const text = document.getElementById('source').value;
  const lang = document.getElementById('targetLang').value;
  
  document.getElementById('result').innerText = 'Translating...';
  
  const r = await AiPass.generateCompletion({
    model: 'gpt-5-mini',
    messages: [
      { role: 'system', content: `You are a professional translator. Translate the following text to ${lang}. Preserve tone, idioms, and context. Return only the translation.` },
      { role: 'user', content: text }
    ]
  });
  
  document.getElementById('result').innerText = r.choices[0].message.content;
}

Step 5: Embed Anywhere

Option A: Self-host — put it on GitHub Pages, Netlify, Vercel, or your own server.

Option B: Embed — use the </> button (bottom-right) to grab iframe embed code and drop it in any page.

How You Earn

Every translation is an API call. You get 50% commission on each one.

Full Working Example

<!DOCTYPE html>
<html>
<head>
  <title>AI Translator</title>
  <script src="https://aipass.one/aipass-sdk.js"></script>
</head>
<body>
  <h1>AI Translator</h1>
  <textarea id="source" rows="5" placeholder="Enter text to translate..." style="width:100%;"></textarea>
  <br>
  <select id="targetLang">
    <option value="Spanish">Spanish</option>
    <option value="French">French</option>
    <option value="German">German</option>
    <option value="Chinese (Simplified)">Chinese</option>
    <option value="Japanese">Japanese</option>
    <option value="Korean">Korean</option>
    <option value="Arabic">Arabic</option>
    <option value="Portuguese">Portuguese</option>
    <option value="Russian">Russian</option>
    <option value="Hindi">Hindi</option>
  </select>
  <button onclick="translate()">Translate</button>
  <div id="result" style="white-space:pre-wrap;margin-top:20px;padding:10px;border:1px solid #ccc;min-height:50px;"></div>

  <script>
    AiPass.initialize({ clientId: 'YOUR_CLIENT_ID', requireLogin: true });
    
    async function translate() {
      const text = document.getElementById('source').value;
      const lang = document.getElementById('targetLang').value;
      document.getElementById('result').innerText = 'Translating...';
      
      try {
        const r = await AiPass.generateCompletion({
          model: 'gpt-5-mini',
          messages: [
            { role: 'system', content: `You are a professional translator. Translate to ${lang}. Preserve meaning, tone, and context. Return only the translated text.` },
            { role: 'user', content: text }
          ]
        });
        document.getElementById('result').innerText = r.choices[0].message.content;
      } catch(e) {
        document.getElementById('result').innerText = 'Error: ' + e.message;
      }
    }
  </script>
</body>
</html>

Next Steps

Build with the AI Pass SDK. Users pay, you earn.

Related Apps

translator