Build an AI Name Meaning App - Complete SDK Tutorial
Build an AI Name Meaning App - Complete SDK Tutorial
Learn how to build an AI-powered name meaning app with the AI Pass SDK. Your users can discover cultural origins, personality portraits, and custom artwork—all in minutes.
What You'll Build
A complete name meaning web app that:
- Generates cultural origins and etymology for any name
- Creates personality portraits based on linguistic patterns
- Produces custom artistic representations
- Works instantly with zero backend setup
Prerequisites
- Basic HTML/JavaScript knowledge
- An AI Pass account (free signup)
- 5 minutes
Step 1: Get Your API Credentials
- Sign up at AI Pass — you'll get $1 free credit
- Go to Developer Dashboard → OAuth2 Clients
- Click Create New Client and give it a name
- Copy your Client ID (not the slug!)
The Client ID looks like: client_abc123xyz456
Step 2: Initialize the SDK
Add the SDK to your HTML:
<script src="https://aipass.one/aipass-sdk.js"></script>
Initialize with your Client ID:
const aipass = new AIPass({
clientId: 'YOUR_CLIENT_ID', // From Developer Dashboard
requireLogin: true, // Shows auth screen automatically
});
The requireLogin: true setting handles authentication for you—no need to build login screens.
Step 3: Generate Name Meaning
Here's the complete function:
async function getNameMeaning(name, portraitStyle = 'artistic') {
try {
const r = await aipass.apikey.v1.chat.completions({
model: 'google/gemini-2.5-flash-lite',
messages: [
{
role: 'system',
content: `You are an expert in etymology, cultural history, and personality analysis. Analyze the given name and provide:
1. Cultural origins (language family, historical roots)
2. Personality traits associated with the name
3. Famous bearers throughout history
4. Cultural significance and symbolism
Be specific, well-researched, and insightful.`
},
{
role: 'user',
content: `Analyze the name "${name}". Provide detailed cultural analysis and personality portrait.`
}
],
temperature: 1,
max_tokens: 16000
});
const meaningText = r.choices[0].message.content;
return meaningText;
} catch (error) {
console.error('Error generating name meaning:', error);
throw error;
}
}
Step 4: Generate Portrait Image
After getting the meaning, generate a visual portrait:
async function getNamePortrait(name, style = 'artistic') {
const stylePrompts = {
artistic: 'surreal oil painting with vibrant colors, cultural motifs, dreamlike quality',
modern: 'clean minimalist illustration, bold colors, contemporary style',
traditional: 'classic renaissance style portrait, rich detail, warm tones'
};
const prompt = `A visual portrait representing the name "${name}". ${stylePrompts[style]}. The image should embody the essence, energy, and cultural symbolism of this name. High quality, artistic interpretation.`;
try {
const r = await aipass.apikey.v1.images.generations({
model: 'flux-pro/v1.1',
prompt: prompt,
n: 1,
size: '1024x1024'
});
const imageUrl = r.data[0].url;
return imageUrl;
} catch (error) {
console.error('Error generating portrait:', error);
throw error;
}
}
Step 5: Build the UI
Create a simple form:
<!DOCTYPE html>
<html>
<head>
<title>AI Name Meaning</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; font-size: 16px; background: #007AFF; color: white; border: none; cursor: pointer; }
button:hover { background: #0051D5; }
#results { margin-top: 30px; display: none; }
#portrait { max-width: 100%; border-radius: 8px; margin: 20px 0; }
</style>
</head>
<body>
<h1>AI Name Meaning</h1>
<p>Discover the cultural story behind any name</p>
<div>
<input type="text" id="nameInput" placeholder="Enter a name...">
<select id="styleSelect">
<option value="artistic">Artistic</option>
<option value="modern">Modern</option>
<option value="traditional">Traditional</option>
</select>
<button onclick="generateMeaning()">Discover Meaning</button>
</div>
<div id="results">
<img id="portrait" src="" alt="Name Portrait">
<div id="meaning"></div>
</div>
<script>
const aipass = new AIPass({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
async function generateMeaning() {
const name = document.getElementById('nameInput').value;
const style = document.getElementById('styleSelect').value;
if (!name) {
alert('Please enter a name');
return;
}
document.getElementById('results').style.display = 'none';
try {
// Generate meaning text
const meaning = await getNameMeaning(name, style);
// Generate portrait image
const portraitUrl = await getNamePortrait(name, style);
// Display results
document.getElementById('portrait').src = portraitUrl;
document.getElementById('meaning').innerHTML = `<pre>${meaning}</pre>`;
document.getElementById('results').style.display = 'block';
} catch (error) {
alert('Error: ' + error.message);
}
}
async function getNameMeaning(name, portraitStyle) {
const r = await aipass.apikey.v1.chat.completions({
model: 'google/gemini-2.5-flash-lite',
messages: [
{
role: 'system',
content: `You are an expert in etymology, cultural history, and personality analysis. Analyze the given name and provide:
1. Cultural origins (language family, historical roots)
2. Personality traits associated with the name
3. Famous bearers throughout history
4. Cultural significance and symbolism
Be specific, well-researched, and insightful.`
},
{
role: 'user',
content: `Analyze the name "${name}". Provide detailed cultural analysis and personality portrait.`
}
],
temperature: 1,
max_tokens: 16000
});
return r.choices[0].message.content;
}
async function getNamePortrait(name, style) {
const stylePrompts = {
artistic: 'surreal oil painting with vibrant colors, cultural motifs, dreamlike quality',
modern: 'clean minimalist illustration, bold colors, contemporary style',
traditional: 'classic renaissance style portrait, rich detail, warm tones'
};
const prompt = `A visual portrait representing the name "${name}". ${stylePrompts[style]}. The image should embody the essence, energy, and cultural symbolism of this name. High quality, artistic interpretation.`;
const r = await aipass.apikey.v1.images.generations({
model: 'flux-pro/v1.1',
prompt: prompt,
n: 1,
size: '1024x1024'
});
return r.data[0].url;
}
</script>
</body>
</html>
Step 6: Embed on Your Site
Click the </> button on any AI Pass app to get iframe embed code. Or use the SDK directly as shown above.
Revenue Opportunity: 50% Commission
When you build with AI Pass, you earn 50% commission on every API call made through your apps. That's on top of your own revenue.
How it works:
- Build your app (like this name meaning tool)
- Share it or embed it on your site
- Users sign up through your app
- You earn 50% of their API spend—forever
No hosting fees. No setup costs. Just pure commission.
Cost Breakdown
For this name meaning app:
- Text generation (Gemini 2.5 Flash Lite): ~$0.0002 per request
- Image generation (Flux Pro v1.1): ~$0.015 per image
- Total per user query: ~$0.015
With $1 free credit on signup, users get ~66 queries before paying. That's a generous trial that builds trust.
What's Next?
- Add more portrait styles (cyberpunk, watercolor, sketch)
- Store results in local storage
- Add social sharing
- Create batch analysis for family names
- Integrate with genealogy databases
Full Demo
See the live app: AI Name Meaning
Get Started Now
Sign up for AI Pass — $1 free credit, no credit card needed.
Get your Client ID from the Developer Dashboard and start building.
Need help? Check the AI Pass SDK docs or join our community.