An AI-powered Customer Data Platform — upload any CSV, get real segmentation, real analytics, and an AI assistant that actually queries your data.
Built as a portfolio project targeting full-stack / CDP-focused roles. Not a template, not a mockup — every number on screen comes from real math run on whatever dataset you upload.
Upload a CSV of customers, orders, or events → InsightIQ unifies it into customer profiles, segments them automatically, and lets you ask an AI assistant questions about your own data in plain English.
| Page | What's real about it |
|---|---|
| Dashboard | KPIs, revenue trend, and segment breakdown computed live from your uploaded rows |
| Customers | Every profile — spending, purchase count, engagement score — derived from actual row data, not placeholders |
| Segments | Rule-based classification (VIP / At Risk / New / Regular), with the exact rule shown for each — fully transparent, no black-box ML claims |
| AI Assistant | Real tool-calling: the model picks a function, the server runs it against your real dataset, the answer cites real figures — click "Show reasoning" to see exactly which function ran |
| Data Sources | Drag-and-drop CSV upload with auto-detected column mapping — works with any tabular dataset, not just a fixed schema |
1. Empty state — before any data is loaded
No dataset, no fake placeholder numbers. The app is honest about having nothing to show yet, with a clear call to action.
2. Uploading a dataset
Drag-and-drop or click to browse — any CSV works, not a fixed template.
3. Auto-detected column mapping
The app guesses which columns are name, email, amount, date, and category — editable if it gets anything wrong. This mapping is what every chart, segment, and AI answer downstream is built on.
4. Import summary
Confirms exactly what was ingested — row count, unique customers, total value, and earliest record — before you trust the dashboard.
5. Live dashboard
KPIs and the revenue trend chart, generated entirely from the uploaded CSV — no mock data underneath.
6. Category breakdown
Real distribution of activity across categories/products in the dataset.
7. Customers table
Sortable, filterable, searchable — every row backed by a real computed engagement score and segment.
8. Segments with transparent rules
Each segment (VIP / At Risk / New / Regular) is shown with the exact rule used to classify it — no black-box logic.
9. AI Assistant in action
Asked for growth strategy, the assistant pulled real top spenders and at-risk customers from the dataset to ground its recommendation — not a generic answer.
No database, by design. Dataset lives in the browser (React state + localStorage), and lib/analytics.ts derives everything from raw rows on the fly. This keeps it a genuine zero-config, one-click Vercel deploy — no Postgres to provision, no migrations to run. Swapping in a real database later means replacing one file (lib/dataset-context.tsx) without touching any UI.
Real agentic AI, not a chat skin. The AI Assistant (app/api/ai/route.ts) implements an actual tool-use loop against Groq's llama-3.3-70b-versatile:
Your question
↓
Model decides which tool to call
(get_top_spenders, get_churn_risk, get_segment_breakdown,
get_revenue_trend, get_category_breakdown, search_customer)
↓
Server runs real JS against your uploaded rows
↓
Result returned to the model
↓
Model writes the final answer, citing real numbers
Every answer is backed by an actual function call you can inspect — no hallucinated statistics.
Transparent, explainable segmentation — not a black box:
VIP → top 40% by spending AND 3+ purchases
AT_RISK → no activity in 60+ days, but has purchased before
NEW → first seen within the last 14 days
REGULAR → everyone else
- Framework: Next.js 15 (App Router), TypeScript
- Styling: Tailwind CSS v4, custom dark/light theme system
- Charts: Recharts
- CSV parsing: PapaParse
- AI: Groq API (
llama-3.3-70b-versatile) with OpenAI-compatible tool calling - Deployment: Vercel, zero external services required
npm install
cp .env.example .env.local
# add your key: GROQ_API_KEY=gsk_...
npm run devOpen localhost:3000 → Data Sources → upload public/insightiq_demo_customers.csv (included, pre-built to hit every segment) → explore Dashboard, Customers, Segments, and ask the AI Assistant a question.
Without a GROQ_API_KEY, everything works except the AI Assistant, which shows a clear setup message instead of failing silently.
- Push to GitHub
- Import the repo on vercel.com
- Add
GROQ_API_KEYunder Project Settings → Environment Variables - Deploy
No database, no other services to configure.
app/
page.tsx → Dashboard
customers/ → Customer list + [id] profile
segments/ → Segment breakdown + rules
ai-assistant/ → Chat interface
data-sources/ → CSV upload + column mapping
api/ai/route.ts → AI tool-calling loop
api/events/route.ts → Event ingestion stub (for API-based data sources)
components/ → Sidebar, Topbar, theme toggle, click-sparkle effect, shared UI
lib/
csv.ts → CSV parsing + column auto-detection
analytics.ts → Segmentation + KPI computation engine
dataset-context.tsx → App-wide dataset state (React context + localStorage)
screenshots/ → App walkthrough (images + demo video)
- Dataset storage is browser-local, not server-persisted — fine for a demo/portfolio, would need a real DB (Postgres/Prisma) for multi-user production use.
POST /api/eventsis an in-memory stub to demonstrate the ingestion API pattern; it resets on cold start.- Segmentation rules are intentionally simple and rule-based rather than ML-driven — chosen for transparency and explainability over black-box complexity.
Built by Gulsum Begam