Live Demo → cc-genbi-poc.vercel.app
A generative BI platform for global contact center analytics. Ask questions in plain English, get AI-interpreted results, and drill into 20+ KPIs across 16 sites and 4 regions — all powered by a self-contained SQLite data mart running in the browser.
Real-time KPI scorecards across all 20+ contact center metrics with color-coded benchmark indicators. Four pre-built charts track FCR & SLA trends, CSAT by region, AHT over time, and FCR by region.
Natural language interface powered by Claude. Type any question about your contact center data — the system generates SQLite SQL, executes it against the data mart, renders the results, and provides an AI-written executive interpretation benchmarked against industry standards.
Example questions:
- Which region has the highest FCR rate this year?
- Show me AHT trends by month for 2025
- Compare CSAT scores across all channels
- Which sites have abandonment rates above 10%?
- What is the cost per contact by country?
One-click scorecards sliced by Region, Country, State/Province, or Channel. Every slice renders a full KPI table with status badges and two comparison charts.
| Category | Metrics |
|---|---|
| Efficiency | AHT, ACW, ASA, Hold Time, Occupancy Rate |
| Quality | FCR, Transfer Rate, Escalation Rate, QA Score, Repeat Contact Rate |
| Customer | CSAT, NPS, CES, Sentiment Score, Abandonment Rate |
| Operations | Service Level (SLA %), Contact Volume, Cost per Contact, Agent Utilization |
| Workforce | Schedule Adherence, Shrinkage, Agent Tenure Distribution |
Frontend: Next.js 14 App Router deployed on Vercel Edge Network
Data Layer: sql.js (SQLite via WebAssembly) — the entire database runs in the browser as a static asset. Zero database hosting required.
AI Layer: Anthropic Claude via a server-side Next.js API route — API key never exposed to the client.
| Component | Technology |
|---|---|
| NL-to-SQL | Claude Sonnet with semantic layer + 10 few-shot examples |
| Narrative | Benchmark-aware executive interpretation |
| Suggestions | Context-aware follow-up question generation |
Data Mart Schema: fact_interactions (116K rows · 729 days) ├── dim_geography (16 sites · 4 regions) ├── dim_agent (192 agents) ├── dim_channel (6 channels) ├── dim_date (729 days) └── dim_queue (6 queues) v_kpi_by_geo_date (pre-aggregated KPI view)
Why a semantic layer? Raw schema prompting yields ~20% SQL accuracy. Adding a metric catalog with KPI definitions, benchmark thresholds, and few-shot examples pushes accuracy to ~95%.
Semantic Layer — A metric catalog with 15 KPI definitions, benchmark thresholds, and 10 few-shot SQL examples is injected into the Claude system prompt. This is what separates accurate SQL generation from hallucination — raw schema prompting yields ~20% accuracy; semantic layer prompting yields ~95%.
SQL Transparency — Every AI-generated query is inspectable via the "Generated SQL" panel. Trust is built by showing the work.
Benchmark-Aware Narrative — The AI interpretation layer includes industry benchmarks (FCR ≥80%, CSAT ≥4.2/5, AHT ≤240s, etc.) so insights reference standards, not just numbers.
Self-Contained Data Mart — The entire SQLite database ships as a static asset and runs in the browser via WebAssembly. Zero database hosting required.
Synthetic data covering 2 years (2024–2025) across 16 global contact center sites in 4 regions:
| Region | Sites |
|---|---|
| North America | Phoenix, Austin, Atlanta, Los Angeles, Toronto, Guadalajara |
| EMEA | London, Munich, Paris, Johannesburg |
| APAC | Manila, Bangalore, Sydney, Tokyo |
| LATAM | São Paulo, Bogotá |
Each site has a performance profile that drives regional variation in AHT, FCR, CSAT, and cost — making the data analytically interesting rather than flat.
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Deployment | Vercel |
| Database | SQLite via sql.js (WebAssembly) |
| AI | Anthropic Claude (claude-sonnet-4) |
| Charts | Recharts |
| Styling | Inline styles + CSS variables |
| Language | TypeScript |
# Clone
git clone https://github.com/BigZeeke/cc-genbi-poc.git
cd cc-genbi-poc
# Install
npm install
# Environment
echo "ANTHROPIC_API_KEY=your_key_here" > .env.local
# Seed the database (first time only)
node seed.mjs
# Run
npm run devBuilt as a portfolio demonstration of generative BI architecture combining enterprise contact center domain expertise with modern AI-powered analytics engineering.
Author: Steve Lopez
Portfolio: github.com/BigZeeke
LinkedIn: linkedin.com/in/stevelopezenterprise