Build an AI Travel Planner App with AI Pass SDK
Build an AI Travel Planner App with AI Pass SDK
Travel is one of the most searched-for topics online, and AI-powered planning is a growing niche. In this friendly guide, you’ll build a complete AI travel planner app using the AI Pass SDK — you ship the UI, while AI Pass handles billing and AI access. And yes, you can start with $1 free credit to try things out.
What we're building: A web app that generates day-by-day travel itineraries based on destination, duration, budget, and travel style.
Step 1: Create Your AI Pass Account & Get Client ID
- Sign up at aipass.one
- Go to Developer Dashboard → OAuth2 Clients
- Create a new client for your app
- Copy your Client ID (looks like
client_XXXXXXXX)
Step 2: Build the App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Travel Planner</title>
<link href="https://aipass.one/aipass-ui.css" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: linear-gradient(135deg, #667eea22, #764ba222); min-height: 100vh; }
.container { max-width: 800px; margin: 40px auto; padding: 20px; }
h1 { font-size: 2rem; margin-bottom: 8px; color: #2d3748; }
.subtitle { color: #718096; margin-bottom: 28px; font-size: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:600px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; }
label { font-weight: 600; margin-bottom: 6px; color: #4a5568; font-size: 14px; }
input, select, textarea {
padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
font-size: 14px; background: white;
}
textarea { height: 80px; resize: vertical; grid-column: 1/-1; }
.full-width { grid-column: 1/-1; }
button.plan-btn {
background: #667eea; color: white; border: none;
padding: 14px 32px; border-radius: 10px; font-size: 16px;
cursor: pointer; font-weight: 700; width: 100%; margin-top: 20px;
transition: background 0.2s;
}
button.plan-btn:hover { background: #5a67d8; }
#output {
margin-top: 28px; background: white; border-radius: 12px;
padding: 24px; border: 1px solid #e2e8f0; display: none;
}
#output h2 { font-size: 1.4rem; color: #2d3748; margin-bottom: 16px; }
#itinerary { white-space: pre-wrap; line-height: 1.7; color: #4a5568; font-size: 14px; }
.loading { text-align: center; padding: 20px; color: #718096; }
</style>
</head>
<body>
<div class="container">
<h1>🗺️ AI Travel Planner</h1>
<p class="subtitle">Describe your dream trip — get a full itinerary in seconds.</p>
<div class="form-grid">
<div class="form-group">
<label>Destination</label>
<input type="text" id="destination" placeholder="Porto, Portugal">
</div>
<div class="form-group">
<label>Trip Duration</label>
<select id="duration">
<option value="3 days">3 days</option>
<option value="5 days" selected>5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="2 weeks">2 weeks</option>
</select>
</div>
<div class="form-group">
<label>Travel Style</label>
<select id="style">
<option value="cultural & historical">Cultural & Historical</option>
<option value="food & nightlife">Food & Nightlife</option>
<option value="adventure & outdoor">Adventure & Outdoor</option>
<option value="relaxation & beaches">Relaxation & Beaches</option>
<option value="family-friendly">Family-Friendly</option>
<option value="budget backpacker">Budget Backpacker</option>
<option value="luxury">Luxury</option>
</select>
</div>
<div class="form-group">
<label>Budget Level</label>
<select id="budget">
<option value="budget ($30-50/day)">Budget ($30-50/day)</option>
<option value="mid-range ($80-150/day)" selected>Mid-range ($80-150/day)</option>
<option value="luxury ($250+/day)">Luxury ($250+/day)</option>
</select>
</div>
<div class="form-group full-width">
<label>Any special requests? (optional)</label>
<textarea id="notes" placeholder="e.g., Traveling with a toddler. Want to avoid touristy restaurants. Love street art."></textarea>
</div>
</div>
<button class="plan-btn" onclick="planTrip()">Plan My Trip ✈️</button>
<div id="output">
<h2 id="outputTitle">Your Itinerary</h2>
<div id="itinerary"></div>
</div>
</div>
<script src="https://aipass.one/aipass-sdk.js"></script>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
async function planTrip() {
const destination = document.getElementById('destination').value.trim();
if (!destination) return alert('Please enter a destination.');
const duration = document.getElementById('duration').value;
const style = document.getElementById('style').value;
const budget = document.getElementById('budget').value;
const notes = document.getElementById('notes').value.trim();
const output = document.getElementById('output');
const itinerary = document.getElementById('itinerary');
output.style.display = 'block';
itinerary.innerHTML = '<div class="loading">✈️ Planning your trip...</div>';
document.getElementById('outputTitle').textContent = `Your ${duration} in ${destination}`;
const notesLine = notes ? `\n\nSpecial requests: ${notes}` : '';
const prompt = `Create a complete ${duration} travel itinerary for ${destination}.
Travel style: ${style}
Budget: ${budget}${notesLine}
Please provide:
1. Day-by-day schedule (morning, afternoon, evening)
2. Top 3 must-see highlights
3. 2-3 hidden local gems
4. Best neighborhoods to stay in
5. Food recommendations (local dishes + specific spots)
6. Getting around (transportation tips)
7. Practical tips (customs, safety, best times to visit sites)
8. Rough daily budget breakdown
Make it specific and actionable — real place names, actual restaurants, practical logistics.`;
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5-mini',
temperature: 1,
max_tokens: 16000,
messages: [
{
role: 'system',
content: 'You are an expert travel planner with deep knowledge of destinations worldwide. Create detailed, practical itineraries with real local insights.'
},
{ role: 'user', content: prompt }
]
});
itinerary.textContent = r.choices[0].message.content;
} catch (err) {
itinerary.textContent = 'Error: ' + err.message;
}
}
</script>
</body>
</html>
Step 3: Deploy
Option A — Self-host: Deploy to Netlify, Vercel, GitHub Pages, or your own server. The SDK handles auth and billing — no backend needed.
Option B — AI Pass catalog: Upload via Developer Dashboard and get listed at aipass.one/apps/your-app. Use the </> embed button to generate iframe code for embedding anywhere.
Revenue Model
Every time a user generates an itinerary, they spend AI credits. AI Pass takes a small commission, and you earn 50% of that commission — automatically, with no extra setup.
Extensions to Build
- Export to PDF — users love a printable itinerary
- Multiple destinations — multi-city trip planning
- Packing list generator — generate a packing list from the itinerary
- Real-time weather — integrate a weather API for destination weather
Check out the live demo: AI Travel Planner →