Build an AI Relationship Coach App with AI Pass SDK — Complete Tutorial
Build an AI Relationship Coach App with AI Pass SDK — Complete Tutorial
The digital wellness industry is shifting. Users no longer want static habit trackers; they want dynamic, empathetic interaction. For developers in the relationship and mental wellbeing space, the barrier to entry has often been the high cost of LLM tokens and the complexity of managing secure user authentication.
In this tutorial, we will build "HeartSync", a responsive AI Relationship Coach. We’ll use the AI Pass SDK, which handles user authentication, payment processing, and AI model orchestration in one swoop, allowing you to focus purely on the coaching logic.
Why AI Pass?
AI Pass is designed for developers who want to monetize wellness apps immediately. By using their SDK, you gain access to high-performance models like gpt-4o-mini while offloading the billing infrastructure. Plus, when you list your app in their catalog, you earn a 50% commission on user spend.
Prerequisites
- Basic knowledge of HTML, CSS, and JavaScript.
- An active developer account.
- Your Client ID: Visit the AI Pass Developer Panel to register your app and retrieve your
YOUR_CLIENT_ID.
Step 1: Defining the Empathetic System Prompt
The secret to a successful wellness app is the "System Prompt." This dictates the AI's personality. For a relationship coach, we need the AI to be non-judgmental, use active listening techniques, and avoid giving "legal" advice.
Our Prompt:
"You are HeartSync, an empathetic relationship coach. Use active listening. Ask clarifying questions. Validate the user's feelings before offering perspective. Keep responses concise but warm. Your goal is to help users communicate better with their partners."
Step 2: Setting Up the Structure
We will build a single-page application (SPA). We need to include the AI Pass SDK script in the <head> and create a chat container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HeartSync | AI Relationship Coach</title>
<!-- Critical: AI Pass SDK -->
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #fdf6f6; margin: 0; display: flex; flex-direction: column; height: 100vh; }
#chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.message { max-width: 80%; padding: 12px 16px; border-radius: 15px; line-height: 1.4; }
.user { align-self: flex-end; background: #ff8e8e; color: white; border-bottom-right-radius: 2px; }
.ai { align-self: flex-start; background: white; border: 1px solid #eee; border-bottom-left-radius: 2px; }
#input-area { padding: 20px; background: white; border-top: 1px solid #eee; display: flex; gap: 10px; }
input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 25px; outline: none; }
button { background: #ff4b4b; color: white; border: none; padding: 10px 20px; border-radius: 25px; cursor: pointer; }
button:disabled { background: #ccc; }
</style>
</head>
<body>
<div id="chat-container">
<div class="message ai">Hi, I'm HeartSync. How are things going in your relationship today?</div>
</div>
<div id="input-area">
<input type="text" id="userInput" placeholder="Type how you're feeling...">
<button id="sendBtn">Send</button>
</div>
<script>
// Logic goes here
</script>
</body>
</html>
Step 3: Initializing the SDK and Handling Chat
The AiPass.initialize function is critical. Setting requireLogin: true ensures that the user is authenticated and has a balance to interact with the AI, saving you from building your own paywall.
// 1. Configuration
const CLIENT_ID = 'YOUR_CLIENT_ID'; // Replace with your real ID
let conversationHistory = [
{ role: 'system', content: "You are HeartSync, an empathetic relationship coach. Use active listening. Ask clarifying questions. Validate the user's feelings." }
];
// 2. Initialize SDK
AiPass.initialize({
clientId: CLIENT_ID,
requireLogin: true
});
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
// 3. Helper to append messages to UI
function appendMessage(role, text) {
const div = document.createElement('div');
div.className = `message ${role}`;
div.innerText = text;
chatContainer.appendChild(div);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
// 4. The Core AI Logic
async function handleChat() {
const text = userInput.value.trim();
if (!text) return;
// UI Update
appendMessage('user', text);
userInput.value = '';
sendBtn.disabled = true;
// Update History
conversationHistory.push({ role: 'user', content: text });
try {
// AI Pass Completion Call
// Note: Using gpt-4o-mini for speed and empathy
const result = await AiPass.generateCompletion({
model: 'gpt-4o-mini',
temperature: 1,
max_tokens: 16000,
messages: conversationHistory
});
const aiResponse = result.choices[0].message.content;
// Update UI & History
appendMessage('ai', aiResponse);
conversationHistory.push({ role: 'assistant', content: aiResponse });
} catch (error) {
console.error("AI Pass Error:", error);
appendMessage('ai', "I'm having trouble connecting. Please check your AI Pass balance.");
} finally {
sendBtn.disabled = false;
}
}
sendBtn.onclick = handleChat;
userInput.onkeypress = (e) => { if(e.key === 'Enter') handleChat(); };
Step 4: Critical Considerations
Privacy & Wellness Ethics
When building companion apps, data privacy is paramount. AI Pass handles the heavy lifting of user identity, but you should ensure:
- Session Security: Do not log user messages to your own unencrypted servers.
- Crisis Detection: While the system prompt guides the AI, always include a static UI element providing links to professional counseling or emergency hotlines.
- Data Minimization: Only store the
conversationHistoryin the local browser state unless you have a robust database strategy.
Optimization (The Temperature Setting)
In the code above, we set temperature: 1. For relationship coaching, this is vital. A lower temperature (e.g., 0.2) makes the AI robotic and repetitive. A temperature of 1 allows for the "creative empathy" needed to rephrase user concerns and offer varied perspectives.
Step 5: Deployment & Monetization
Once your HTML file is ready, you can host it on GitHub Pages, Vercel, or Netlify.
The AI Pass Catalog Advantage: Once your app is live, submit your URL to the AI Pass Catalog. This is where the developer-advocate side of this SDK really shines:
- No Credit Card Required: Users pay for tokens through their central AI Pass account.
- 50% Commission: For every token a user spends in your "HeartSync" app, you receive 50% of the revenue generated.
- Global Reach: Your app becomes visible to all users within the AI Pass ecosystem.
Conclusion
Building a wellness app used to require a backend team, a payment architect, and a data scientist. With the AI Pass SDK, we’ve built a functional, empathetic relationship coach in under 100 lines of code.
By leveraging the gpt-4o-mini model with a high max_tokens limit (16,000) and a carefully tuned temperature, you can provide deep, meaningful support to users while generating passive income.
Next Steps:
- Get your Client ID at aipass.one.
- Customize the CSS to match your brand's "calm" aesthetic.
- Deploy and start earning your 50% commission.
Happy coding, and here's to building tech that makes people feel heard!