Build an AI Spreadsheet Analyzer App with the AI Pass SDK
Build an AI Spreadsheet Analyzer App with the AI Pass SDK
Data analysis tools have high perceived value and natural business use cases. This tutorial shows you how to build one using the AI Pass SDK — users paste CSV data, ask questions, get instant AI-powered analysis.
Prerequisites
- Free account at aipass.one
- Developer Dashboard → OAuth2 Clients → 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
AiPass.initialize({
clientId: "YOUR_CLIENT_ID",
requireLogin: true,
darkMode: true
});
Analyze Spreadsheet Data
Always include temperature: 1 and max_tokens: 16000 for GPT-5 models:
const result = await AiPass.generateCompletion({
model: "gpt-5-mini",
temperature: 1,
max_tokens: 16000,
messages: [
{
role: "system",
content: `You are a data analyst. The user will provide CSV data and questions.
Analyze the data clearly and concisely. Use tables or bullet lists for readability.
Provide specific values, trends, and actionable insights.`
},
{
role: "user",
content: `Data:\n${csvData}\n\nQuestion: ${userQuestion}`
}
]
});
const analysis = result.choices[0].message.content;
Complete Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AI Spreadsheet Analyzer</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: 900px; margin: 2rem auto; padding: 0 1rem; }
label { display:block; margin-top:0.8rem; font-weight:600; font-size:0.9rem; color:#374151; }
textarea { width:100%; padding:0.5rem; margin-top:0.25rem; border:1px solid #d1d5db; border-radius:6px; box-sizing:border-box; font-size:0.85rem; font-family:monospace; }
#csvData { height:200px; }
#question { height:60px; font-family:system-ui; }
button { margin-top:0.75rem; padding:0.65rem 1.5rem; background:#047857; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:1rem; font-weight:600; }
.output { background:#f0fdf4; padding:1.25rem; border-radius:8px; margin-top:1rem; border:1px solid #bbf7d0; }
.output pre { white-space:pre-wrap; line-height:1.7; font-size:0.95rem; margin:0; }
</style>
</head>
<body>
<h1>AI Spreadsheet Analyzer</h1>
<p>Paste your CSV data and ask a question — get instant insights.</p>
<label>Your CSV data
<textarea id="csvData" placeholder="date,product,revenue,units
2025-01,Widget A,12500,250
2025-01,Widget B,8300,166
2025-02,Widget A,14200,284
..."></textarea>
</label>
<label>Your question
<textarea id="question" placeholder="e.g., Which product has the highest revenue? How are trends changing month over month?"></textarea>
</label>
<button id="analyze">Analyze</button>
<p id="status"></p>
<div class="output" style="display:none" id="outputWrap">
<pre id="output"></pre>
</div>
<script>
AiPass.initialize({
clientId: "YOUR_CLIENT_ID",
requireLogin: true,
darkMode: true
});
document.getElementById("analyze").addEventListener("click", async () => {
const csvData = document.getElementById("csvData").value.trim();
const question = document.getElementById("question").value.trim();
if (!csvData || !question) {
alert("Please provide both CSV data and a question.");
return;
}
// Limit data to ~8000 chars to avoid token overflow
const truncated = csvData.length > 8000 ? csvData.substring(0, 8000) + "\n[data truncated]" : csvData;
document.getElementById("status").textContent = "Analyzing...";
document.getElementById("outputWrap").style.display = "none";
try {
const result = await AiPass.generateCompletion({
model: "gpt-5-mini",
temperature: 1,
max_tokens: 16000,
messages: [
{
role: "system",
content: "You are a data analyst. Analyze the provided CSV data and answer the user's question clearly and concisely. Use bullet points or tables for readability. Provide specific values and actionable insights."
},
{
role: "user",
content: `CSV Data:\n${truncated}\n\nQuestion: ${question}`
}
]
});
document.getElementById("output").textContent = result.choices[0].message.content;
document.getElementById("outputWrap").style.display = "block";
document.getElementById("status").textContent = "";
} catch (err) {
document.getElementById("status").textContent = "Error — see console.";
console.error(err);
}
});
</script>
</body>
</html>
Deployment Options
Option A — Self-host: GitHub Pages, Netlify, Vercel.
Option B — Publish on AI Pass: Get a dedicated page like the live example. Apps include a </> embed button for iframe sharing.
Revenue: 50% Commission
Earn 50% commission on every API call. Business users who analyze data regularly = reliable recurring commission.