Build an AI Wedding Speech Writer App with the AI Pass SDK
Build an AI Wedding Speech Writer App with the AI Pass SDK
Want to ship a tiny, delightful app that helps guests write heartfelt wedding speeches in seconds? This tutorial walks indie devs and vibe coders through building a minimal web app using the AI Pass SDK. Deploy to GitHub Pages, Netlify, or Vercel — or publish directly on the AI Pass catalog.
Who this is for: Indie devs, vibe coders, and anyone who wants to monetize an AI micro-app without complex backend auth.
Prerequisites
- Create a free account at aipass.one
- Open the Developer Dashboard → OAuth2 Clients to get your Client ID
- Developer Dashboard
SDK Setup
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
<script src="https://aipass.one/aipass-sdk.js"></script>
Initialize the SDK
AiPass.initialize({
clientId: "YOUR_CLIENT_ID",
requireLogin: true,
darkMode: true
});
requireLogin: true automatically shows the login screen — no custom auth UI needed.
Generate a Wedding Speech
Critical for GPT-5 models: Always include temperature: 1 and max_tokens: 16000 (the SDK defaults will cause empty responses without these):
const result = await AiPass.generateCompletion({
model: "gpt-5-mini",
temperature: 1,
max_tokens: 16000,
messages: [
{
role: "system",
content: "You are a wedding speech writer who crafts heartfelt, tasteful, and memorable speeches."
},
{
role: "user",
content: prompt
}
]
});
const speech = result.choices[0].message.content;
Complete Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AI Wedding Speech Writer</title>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
body { font-family: system-ui; max-width: 700px; margin: 2rem auto; padding: 0 1rem; }
label { display:block; margin-top:0.75rem; font-weight:500; }
input, select, textarea { width:100%; padding:0.5rem; margin-top:0.25rem; border:1px solid #ccc; border-radius:6px; box-sizing:border-box; }
textarea { height:100px; }
button { margin-top:1rem; padding:0.6rem 1.4rem; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:1rem; }
.output { white-space:pre-wrap; background:#f6f6f6; padding:1rem; border-radius:6px; margin-top:1rem; line-height:1.7; }
</style>
</head>
<body>
<h1>AI Wedding Speech Writer</h1>
<label>Couple names<input id="names" placeholder="Alex & Jamie" /></label>
<label>Your role
<select id="role">
<option>Best Man</option>
<option>Maid of Honor</option>
<option>Father of the Bride</option>
<option>Groom</option>
</select>
</label>
<label>Tone
<select id="tone">
<option>Heartfelt</option>
<option>Funny</option>
<option>Romantic</option>
<option>Short & Sweet</option>
</select>
</label>
<label>Personal anecdotes (optional)
<textarea id="custom" placeholder="Add stories, inside jokes, or memories..."></textarea>
</label>
<button id="generate">Generate Speech</button>
<p id="status"></p>
<div class="output" id="output"></div>
<script>
AiPass.initialize({
clientId: "YOUR_CLIENT_ID",
requireLogin: true,
darkMode: true
});
document.getElementById("generate").addEventListener("click", async () => {
const names = document.getElementById("names").value || "the couple";
const role = document.getElementById("role").value;
const tone = document.getElementById("tone").value;
const custom = document.getElementById("custom").value;
const prompt = `Write a ${tone.toLowerCase()} wedding speech for the ${role} at ${names} wedding.
Length: 3-4 minutes when read aloud.
Personal anecdotes: ${custom || "None — use tasteful general content."}
Structure: warm opening, 2-3 body paragraphs, memorable closing toast.`;
document.getElementById("status").textContent = "Generating...";
document.getElementById("output").textContent = "";
try {
const result = await AiPass.generateCompletion({
model: "gpt-5-mini",
temperature: 1,
max_tokens: 16000,
messages: [
{ role: "system", content: "You are a wedding speech writer who crafts heartfelt, tasteful speeches." },
{ role: "user", content: prompt }
]
});
document.getElementById("output").textContent = result.choices[0].message.content;
document.getElementById("status").textContent = "Done!";
} catch (err) {
document.getElementById("status").textContent = "Error — see console.";
console.error(err);
}
});
</script>
</body>
</html>
Deployment Options
Option A — Self-host anywhere: Deploy to GitHub Pages, Netlify, or Vercel for free. The SDK handles all billing — users pay AI Pass directly, no payment integration needed on your end.
Option B — Publish on AI Pass catalog: Submit your app and get a dedicated page. See the live example. Published apps include a </> button (bottom-right) that generates iframe embed code — great for embedding in blog posts or partner sites.
Revenue: 50% Commission
When users make API calls through your app, you earn 50% commission on every call. Build it once, earn on repeat usage.