Build a Multi-Language Translation App with AI Pass SDK
Build a Multi-Language Translation App with AI Pass SDK
Ever wanted to add real-time translation to your app? This guide shows you how to build a full multi-language translation tool in under 30 minutes using the AI Pass SDK.
What You'll Build
A clean web app where users can:
- Input text in any language
- Select a target language
- Get instant AI-powered translation
Prerequisites
- Basic HTML/JavaScript knowledge
- An AI Pass Developer account
- Your OAuth2 Client ID (from Developer Dashboard > OAuth2 Clients)
Step 1: Set Up Your Developer Account
- Sign up at aipass.one
- Go to Developer Dashboard
- Click OAuth2 Clients > Create new client
- Copy your Client ID (looks like
client_XXXX...)
Step 2: Create the App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Translator</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
body { font-family: sans-serif; max-width: 700px; margin: 40px auto; padding: 20px; }
textarea { width: 100%; height: 120px; padding: 12px; font-size: 16px; }
select, button { padding: 10px 20px; font-size: 16px; margin: 8px 0; }
button { background: #6366f1; color: white; border: none; cursor: pointer; border-radius: 8px; }
#result { background: #f5f5f5; padding: 16px; border-radius: 8px; min-height: 80px; }
</style>
</head>
<body>
<h1>🌍 AI Translator</h1>
<textarea id="input" placeholder="Enter text to translate..."></textarea>
<select id="language">
<option value="Spanish">Spanish</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Japanese">Japanese</option>
<option value="Arabic">Arabic</option>
<option value="Chinese (Simplified)">Chinese (Simplified)</option>
<option value="Portuguese">Portuguese</option>
<option value="Russian">Russian</option>
<option value="Hindi">Hindi</option>
<option value="Italian">Italian</option>
</select>
<button onclick="translate()">Translate</button>
<h3>Translation:</h3>
<div id="result">Translation will appear here...</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: false
});
async function translate() {
const text = document.getElementById('input').value;
const lang = document.getElementById('language').value;
if (!text.trim()) return alert('Please enter some text');
document.getElementById('result').textContent = 'Translating...';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: 'You are a professional translator. Translate the given text to ' + lang + '. Output ONLY the translation, nothing else.'
},
{
role: 'user',
content: text
}
]
});
document.getElementById('result').textContent = r.choices[0].message.content;
} catch (err) {
document.getElementById('result').textContent = 'Error: ' + err.message;
}
}
</script>
</body>
</html>
Step 3: Replace YOUR_CLIENT_ID
Open Developer Dashboard > OAuth2 Clients > copy your Client ID and replace YOUR_CLIENT_ID in the code.
Step 4: Deploy
Option A — Self-host: Upload to any web server, GitHub Pages, Netlify, or Vercel. Done.
Option B — Publish on AI Pass: Submit your app to the AI Pass catalog and earn 50% commission on every API call your users make. Real passive income.
How It Works
The SDK's generateCompletion() call routes through AI Pass's infrastructure. When requireLogin: true is set, users see an auth screen automatically — you don't need to handle auth at all.
Key params for GPT-5:
temperature: 1— required (GPT-5 rejects the default 0.7)max_tokens: 16000— required (GPT-5 reasoning uses many tokens, small limits = empty responses)
The response is accessed via r.choices[0].message.content.
Customization Ideas
- Add auto-detect source language
- Support file upload (translate documents)
- Add copy-to-clipboard button
- Show character count
- Add pronunciation guide