Build an AI Market Analysis App — SDK Tutorial
Build an AI Market Analysis App — SDK Tutorial
Financial and market analysis tools have strong user retention — people who follow markets check in daily. In this tutorial, we use the Oil Market Analyst as a template to show you how to build domain-specific analysis apps with the AI Pass SDK.
The same architecture works for stock analysis, crypto commentary, real estate trends, and any market with complex, interconnected factors users need explained.
Setup
- Sign up at aipass.one
- Developer Dashboard → OAuth2 Clients → New Client
- Copy
YOUR_CLIENT_ID
Complete App Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Oil Market Analyst</title>
<script src="https://aipass.one/aipass-sdk.js"></script>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e5e7eb; padding: 24px; }
.container { max-width: 800px; margin: 0 auto; }
h1 { color: #f59e0b; font-size: 1.8rem; }
.card { background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.quick-queries { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qbtn { background: #1f2937; border: 1px solid #374151; color: #d1d5db; padding: 8px 14px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; }
.qbtn:hover { border-color: #f59e0b; color: #f59e0b; }
input { width: 100%; padding: 14px; background: #1f2937; border: 1px solid #374151; border-radius: 10px; color: #e5e7eb; font-size: 1rem; }
input:focus { outline: none; border-color: #f59e0b; }
button.primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #0a0a0a; border: none; padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; width: 100%; margin-top: 12px; }
.msg { padding: 16px; border-radius: 10px; margin: 8px 0; line-height: 1.7; }
.user-msg { background: #1f2937; border-left: 3px solid #f59e0b; }
.ai-msg { background: #0f1729; border-left: 3px solid #3b82f6; white-space: pre-wrap; }
</style>
</head>
<body>
<div class="container">
<h1>AI Oil Market Analyst</h1>
<p style="color:#9ca3af;margin-bottom:24px">Ask anything about oil markets, prices, and geopolitical impacts.</p>
<div class="card">
<div class="quick-queries">
<button class="qbtn" onclick="ask(this.textContent)">Why are oil prices rising?</button>
<button class="qbtn" onclick="ask(this.textContent)">What is OPEC+ doing in 2026?</button>
<button class="qbtn" onclick="ask(this.textContent)">Oil impact on inflation</button>
<button class="qbtn" onclick="ask(this.textContent)">WTI vs Brent crude difference</button>
<button class="qbtn" onclick="ask(this.textContent)">When to lock in fuel contracts</button>
</div>
<input type="text" id="question" placeholder="Ask about oil markets, prices, supply chains..." onkeydown="if(event.key==='Enter') ask()">
<button class="primary" onclick="ask()">Analyze</button>
</div>
<div id="chat"></div>
</div>
<script>
AiPass.initialize({
clientId: 'YOUR_CLIENT_ID',
requireLogin: true,
darkMode: true
});
const history = [];
const SYSTEM = 'You are an expert oil market analyst with deep knowledge of OPEC, US shale, geopolitics, macroeconomics, and commodity markets. Provide clear analytical responses with specific factors and context. Distinguish between certain, probable, and speculative information.';
async function ask(quickQ) {
const input = document.getElementById('question');
const question = quickQ || input.value.trim();
if (!question) return;
input.value = '';
history.push({ role: 'user', content: question });
const chat = document.getElementById('chat');
chat.innerHTML += '<div class="msg user-msg">You: ' + question + '</div>';
const loadingId = 'loading-' + Date.now();
chat.innerHTML += '<div class="msg ai-msg" id="' + loadingId + '">Analyzing...</div>';
try {
const r = await AiPass.generateCompletion({
model: 'gpt-5',
temperature: 1,
max_tokens: 16000,
messages: [{ role: 'system', content: SYSTEM }, ...history]
});
const response = r.choices[0].message.content;
history.push({ role: 'assistant', content: response });
document.getElementById(loadingId).textContent = response;
chat.scrollTop = chat.scrollHeight;
} catch (e) {
document.getElementById(loadingId).textContent = 'Error: ' + e.message;
}
}
</script>
</body>
</html>
Architecture: Domain Expert Prompting
The key pattern for market analysis apps is the system prompt that establishes deep domain expertise:
const SYSTEM = 'You are an expert oil market analyst with deep knowledge of OPEC, US shale, geopolitics, macroeconomics, and commodity markets. Provide clear analytical responses with specific factors and context.';
This pattern works for any domain: equities, crypto, real estate, commodities. Change the system prompt, keep the conversation architecture.
Why GPT-5 for Analysis?
model: 'gpt-5', // Not gpt-5-mini — premium model for domain knowledge depth
temperature: 1, // Required for GPT-5 models
max_tokens: 16000 // Required — complex analysis needs space
For commodity and financial analysis, gpt-5 significantly outperforms gpt-5-mini. The deeper knowledge base produces more accurate, nuanced assessments.
Deploy & Earn
- Self-host: Single HTML file, deploy anywhere
- AI Pass catalog: Publish and earn 50% commission on API calls
- Financial tool users are high-value — they query frequently and expect depth