Build an AI Symptom Checker App with AI Pass SDK — Complete Tutorial
Build an AI Symptom Checker App with AI Pass SDK — Complete Tutorial
As healthcare moves toward a "digital-first" model, the demand for intelligent triage tools is skyrocketing. However, developing health-focused AI requires more than just a wrapper around an LLM; it requires a commitment to safety, data privacy, and clear communication of limitations.
In this tutorial, we will build a Responsible AI Symptom Checker using the AI Pass SDK. This tool will allow users to input symptoms and receive an AI-driven analysis, while strictly adhering to safety protocols, emergency screening, and clear medical disclaimers.
1. Prerequisites and Setup
Before we write code, you need to register your application to interact with the AI Pass ecosystem.
- Get your Client ID: Visit the AI Pass Developer Panel.
- Create an App: Register your project to receive your
YOUR_CLIENT_ID. - Environment: Since this is a client-side SDK implementation, any basic local development server (like VS Code Live Server) will work.
2. Responsible System Prompt Engineering
In health tech, the "System Prompt" is your most important safety guardrail. We must instruct the AI to:
- Prioritize emergency "Red Flags."
- Avoid definitive diagnoses (use "possible considerations").
- Mandate professional medical consultation.
- Maintain a clinical, empathetic, but non-prescriptive tone.
We will embed this logic directly into our completion call.
3. The Application Architecture
Our app consists of a single HTML5/JavaScript file. It uses the aipass-sdk.js to handle user authentication and secure API calls to high-performance models like gpt-5-mini.
The Complete Code
Create a file named index.html and paste the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MedCheck AI - Responsible Symptom Analysis</title>
<!-- AI Pass SDK -->
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
:root { --primary: #2c3e50; --danger: #e74c3c; --accent: #3498db; }
body { font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; background: #f4f7f6; }
.disclaimer-banner { background: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; color: #856404; }
.emergency-warning { display: none; background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; padding: 20px; border-radius: 8px; margin-bottom: 20px; font-weight: bold; }
.card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
textarea { width: 100%; height: 120px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-top: 10px; box-sizing: border-box; }
button { background: var(--accent); color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 1rem; margin-top: 10px; }
button:disabled { background: #ccc; }
#results { margin-top: 30px; white-space: pre-wrap; background: #f9f9f9; padding: 20px; border-radius: 8px; border-left: 5px solid var(--accent); display: none; }
.loading-spinner { display: none; color: var(--accent); font-weight: bold; }
</style>
</head>
<body>
<div class="disclaimer-banner">
<strong>⚠️ NOT MEDICAL ADVICE:</strong> This application provides information for educational purposes only. It is not a substitute for professional medical advice, diagnosis, or treatment. <strong>If you are experiencing a medical emergency, please call your local emergency services (e.g., 911) immediately.</strong>
</div>
<div id="emergencyDisplay" class="emergency-warning">
🚨 SEVERE SYMPTOMS DETECTED: Based on your input, please seek immediate medical attention at the nearest emergency department.
</div>
<div class="card">
<h1>Symptom Analysis Assistant</h1>
<p>Describe your symptoms in detail (e.g., duration, severity, location):</p>
<textarea id="symptomInput" placeholder="Example: I have a dull headache in my temples for 2 days, accompanied by slight nausea..."></textarea>
<button id="analyzeBtn" onclick="analyzeSymptoms()">Analyze Symptoms</button>
<div id="loading" class="loading-spinner">Analyzing health data... please wait.</div>
<div id="results"></div>
</div>
<script>
// Initialize AI Pass SDK
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true
});
async function analyzeSymptoms() {
const input = document.getElementById('symptomInput').value;
const btn = document.getElementById('analyzeBtn');
const resultDiv = document.getElementById('results');
const loading = document.getElementById('loading');
const emergencyDisplay = document.getElementById('emergencyDisplay');
if (!input.trim()) return alert("Please describe your symptoms.");
// UI State Reset
btn.disabled = true;
loading.style.display = 'block';
resultDiv.style.display = 'none';
emergencyDisplay.style.display = 'none';
const systemPrompt = `You are a professional Medical Information Assistant.
Your goal is to provide educational health information based on user symptoms.
RULES:
1. ALWAYS start with a disclaimer that you are an AI, not a doctor.
2. If symptoms suggest a life-threatening condition (chest pain, stroke signs, difficulty breathing), start with a bold EMERGENCY WARNING.
3. Provide a list of "Possible Considerations" (not diagnoses).
4. Suggest specific questions for the user to ask their real doctor.
5. Keep the tone clinical and helpful.`;
try {
const result = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: `Analyze these symptoms: ${input}` }
]
});
const text = result.choices[0].message.content;
// Simple heuristic for emergency display toggle
if (text.includes("EMERGENCY") || text.includes("911")) {
emergencyDisplay.style.display = 'block';
}
resultDiv.innerHTML = `<h3>Analysis Results</h3>${text}`;
resultDiv.style.display = 'block';
} catch (error) {
console.error("AI Pass Error:", error);
resultDiv.innerHTML = "An error occurred during analysis. Please try again.";
resultDiv.style.display = 'block';
} finally {
btn.disabled = false;
loading.style.display = 'none';
}
}
</script>
</body>
</html>
4. Key Implementation Details
The SDK Initialization
The AiPass.initialize function is the gatekeeper. By setting requireLogin: true, you ensure that users are authenticated through the AI Pass ecosystem. This offloads user management and security from your shoulders, allowing you to focus on the health logic.
Token and Temperature Strategy
We use temperature: 1 to allow for nuanced, natural language explanations, which are often preferred in patient-facing tools to make the information more accessible. Setting max_tokens: 16000 ensures that even complex symptom histories can be analyzed in full without being cut off mid-sentence.
The UI Safety Layer
Note the disclaimer-banner and emergency-warning divs. In responsible health tech, information hierarchy matters. The emergency warning is placed at the top of the visual stack and triggered programmatically if the AI detects high-risk language.
5. Deployment and the AI Pass Catalog
Once your app is ready, it's time to share it with the world and monetize your development efforts.
Step 1: Host your App
You can host this static HTML file on GitHub Pages, Vercel, or Netlify. Ensure your domain matches the one registered in your Developer Panel.
Step 2: List in the Catalog
AI Pass provides a centralized App Catalog. By listing your Symptom Checker here, you gain immediate access to the AI Pass user base.
Step 3: Monetization (50% Commission)
The AI Pass ecosystem is built on a fair-share model. When users access your app via the catalog:
- Seamless Access: Users pay for their own AI usage via their AI Pass subscription.
- Revenue Share: You, the developer, receive a 50% commission on the platform fees generated by users interacting with your application.
Conclusion
Building a health assistant requires a balance between advanced technology and human safety. By leveraging the AI Pass SDK, we’ve created a tool that provides valuable medical insights while maintaining strict adherence to safety protocols.
As a developer advocate, I encourage you to further refine your system prompts and consider adding features like "Save to PDF" for users to take their results to their next doctor's appointment.
Start building today at aipass.one.