Project 5 of 5 · AI-Powered Web Application
AI Data Analyst
Assistant
Upload any CSV and receive an AI-generated executive summary, auto-rendered charts, and a conversational interface to dig into your data — in seconds. No BI tools. No formulas. No data team.
11/11
Tests passed
<10s
Summary generated
3–4
Auto-rendered charts
5MB
Max CSV supported
The Problem
Business data that never gets analyzed
Small and medium businesses generate operational data constantly. Sales records, inventory logs, customer transactions. Most of it sits unread in Downloads folders. Hiring a data analyst is expensive. Learning Power BI or Tableau takes weeks. Spreadsheet formulas are intimidating for non-technical teams.
CSVs from CRMs & ERPs
Exported and forgotten. No one reads them. No insights extracted.
Slow answers
“Which region is underperforming?” — a question that should take 5 seconds requires an analyst or a half-day in spreadsheets.
Expensive BI tools
Tableau and Power BI are overkill for a business that needs answers once a week, not a permanent dashboard.
No conversational interface
You can’t ask a spreadsheet a follow-up question. Static charts don’t adapt to your curiosity.
The Solution
Three tiers. One seamless experience.
A single HTML file frontend, a Netlify serverless function as the API proxy, and Claude as the intelligence layer. The full analysis pipeline runs in under 10 seconds.
Browser
→
PapaParse
→
Data summary
→
Netlify Fn
→
Claude API
→
Charts + Chat
→
PapaParse
→
Data summary
→
Netlify Fn
→
Claude API
→
Charts + Chat
01
Client-side parsing
PapaParse processes the CSV entirely in the browser — handling BOM characters, quoted commas, mixed types, and Windows line endings. It extracts column names, data types, row count, min/max stats, and a 50-row sample. The summary, not the raw data, is sent to Claude — keeping the prompt compact and focused.
↓
02
Serverless API proxy
The Netlify function receives the structured data summary and routes it to Claude with a carefully engineered system prompt. The ANTHROPIC_API_KEY is read from environment variables — never in client-side code, never in the GitHub repo. CORS is handled here too.
↓
03
Dual-output AI response
A single Claude call returns two distinct outputs: a 3–5 sentence plain-English executive summary surfacing the most important KPIs and trends, and a JSON chart configuration array specifying chart types, labels, and datasets. Chart.js renders 3–4 charts automatically — no second API call needed.
↓
04
Conversational follow-up
The chat interface sends full conversation history + the complete data context on every follow-up message. Claude answers with specific numbers from the uploaded data — never generalities. Ask “which product had the highest return rate?” or “what was my worst month?” and get a grounded, precise answer.
Prompt Engineering
Two modes. One AI. Precise outputs.
The system prompt does the heavy architectural lifting. Claude operates in two distinct modes depending on whether it’s the initial analysis or a follow-up chat message.
MODE 01 — INITIAL ANALYSIS
Structured JSON output
Claude is instructed to act as a business data analyst and return a strict dual-output JSON: a prose executive summary (3–5 sentences, most important insight first) plus a chart configuration array.
// Schema Claude must return:
{
“summary”: “string”,
“charts”: [{
“type”: “bar|line|pie”,
“title”: “string”,
“labels”: [“…”],
“datasets”: [{…}]
}]
}
{
“summary”: “string”,
“charts”: [{
“type”: “bar|line|pie”,
“title”: “string”,
“labels”: [“…”],
“datasets”: [{…}]
}]
}
MODE 02 — FOLLOW-UP CHAT
Grounded conversational answers
Follow-up messages include the full data summary and prior conversation history. Claude is instructed to reference specific numbers from the data in every answer — never speak in generalities when exact figures are available.
// Context sent on every follow-up:
{
“dataSummary”: {/* cols, stats */},
“history”: [
{ “role”: “user”, … },
{ “role”: “assistant”, … }
],
“message”: “current Q”
}
{
“dataSummary”: {/* cols, stats */},
“history”: [
{ “role”: “user”, … },
{ “role”: “assistant”, … }
],
“message”: “current Q”
}
CHART SELECTION LOGIC
AI-driven chart type selection
Claude selects chart types based on data shape. The client implements zero chart selection logic — it just maps Claude’s output to Chart.js renderers. Selection is intelligent and context-aware, not rule-based.
// Claude’s selection rules:
time series → line chart
categories → bar chart
proportions → pie/doughnut
time series → line chart
categories → bar chart
proportions → pie/doughnut
// No chart logic in the client
// — only rendering
Tech Stack
Architecture & tools
Claude API — claude-sonnet-4-6
Dual-output analysis (summary + chart config) and conversational follow-up with full data context and prompt caching
PapaParse
Client-side CSV parsing with full edge-case handling: BOM, quoted commas, mixed types, Windows line endings
Chart.js v4
Bar, line, pie, and doughnut charts rendered from Claude’s JSON chart config — no client-side selection logic
Vanilla JS + HTML + CSS
Single-file frontend — 1,037 lines. Upload zone, parser, stats extractor, chart renderer, chat interface. No build step.
Netlify Serverless Function
API proxy (chat.js, 308 lines). Handles CORS, reads API key from env, routes analyze and chat modes to Claude
Hostinger + GitHub
Static frontend hosted at dataanalyst.bizguro.net. Full codebase version-controlled and linked from the portfolio
Engineering Highlights
What made this technically interesting
01
Summary-not-raw-data pattern
Instead of dumping the full CSV into the Claude prompt, the app sends column metadata, stats, and a 50-row sample. This runs entirely client-side before any API call — keeping prompts compact and accurate even for large files, while eliminating context window bloat.
02
Dual-output initial response
One Claude call returns both the prose summary and the structured chart configuration. No second API call for charts. The JSON is embedded in Claude’s response and parsed client-side — with JSON fence-stripping applied before
JSON.parse() to handle markdown code blocks.03
Zero API key exposure
The Netlify function pattern keeps
ANTHROPIC_API_KEY strictly server-side. The client POSTs to /.netlify/functions/chat and receives Claude’s response — the key never appears in any client-side code, network tab, or GitHub commit.04
Conversational context persistence
Every follow-up message includes the full data summary and prior message history. Multi-turn analysis maintains coherence — “and how does that compare to last month?” works without re-uploading or re-explaining. Prompt caching on the data context reduces latency and cost on longer conversations.
05
Preloaded zero-friction demo
The demo button loads a fictional e-commerce CSV (order_date, product_name, category, quantity, unit_price, total_revenue, region, customer_type) and triggers the full analysis pipeline automatically. Portfolio visitors see a full summary and 3–4 charts within 10 seconds of arrival — no upload, no friction.
Skills Demonstrated
What this project proves
Prompt Engineering
- Dual-output structured responses
- Strict JSON schema enforcement
- Chart type selection via AI
- Grounded follow-up chat
- Prompt caching strategy
Frontend Engineering
- Drag-and-drop file upload
- Client-side CSV parsing
- Chart.js integration
- Single-file architecture
- Mobile-responsive layout
API Integration
- Netlify serverless proxy
- Claude API (analyze + chat)
- CORS configuration
- Secure key management
- Error handling + edge cases
Architecture Patterns
- Summary-not-raw-data
- Three-tier web architecture
- Reusable Netlify proxy pattern
- Offline test coverage (11/11)
- Claude Code deployment
Use Cases
Who this is built for
Retail & e-commerce
Monthly sales CSVs analyzed in seconds — no data analyst on staff required. Spot underperforming SKUs, regional trends, and seasonal patterns instantly.
Marketing teams
Campaign performance exports from Google Ads or Meta Ads Manager — upload, ask questions, get answers. No pivot tables, no dashboards.
Operations & logistics
Delivery time, cost, and volume data from any ERP system. Ask follow-up questions to drill into root causes without leaving the browser.
Freelancers & consultants
Prepare client data reports in minutes. Upload the export, get the AI summary and charts, and present findings without building a custom dashboard.
Future Roadmap
📊 Excel (.xlsx) via SheetJS
📄 PDF report export
🔄 n8n scheduled analysis
🔗 CRM direct integration
📁 Multi-file comparison
📄 PDF report export
🔄 n8n scheduled analysis
🔗 CRM direct integration
📁 Multi-file comparison
Want this kind of AI integration
in your product?
in your product?
I build AI-powered tools that work in production — not just demos. Let’s talk about what you’re trying to automate or analyze.
Built by Cenred (Cj) · Powered by Claude & n8n · Davao, Philippines