This is a submission for the Notion MCP Challenge.
What I Built
KPI Tracker is an AI-powered client quarterly performance dashboard where Notion is the entire backend — no traditional database, no SQL, no Redis. Just Notion, connected through the official Model Context Protocol (MCP) server.
The problem it solves: consultants, analysts, and account managers who track multiple clients' performance currently spend hours manually copy-pasting data from quarterly reports. KPI Tracker reduces that to under 2 minutes.
How it works
- Paste a URL or drag-and-drop a PDF — an earnings press release, 10-K, 10-Q, or any financial report
- AI extracts all KPIs automatically — Revenue, Gross Margin, Net Margin, EPS, Operating Income, Customer Count, and more
- Human-in-the-loop review — you see every extracted KPI with its confidence score before anything saves
- One click saves everything to Notion — the app creates a client record, a quarterly report entry, and individual KPI rows via Notion MCP
- Live dashboard renders 11+ interactive charts — all reading directly from Notion
Key features
- Multi-Model AI — choose from 5 models at runtime: Gemini 2.5 Flash, Gemini 2.5 Pro, Claude Haiku 4.5, Sonnet 4.5, or Sonnet 4.6. No restart needed.
- AI Revenue Forecasting — trend-based next-quarter revenue predictions per client, with reasoning
- 11+ Chart Types — Revenue Trend (Area), Revenue Forecast (Bar), Margin Trends (Line), EPS Trends (Line), Segment Revenue (Stacked Bar), KPI Distribution (Pie), Confidence Distribution (Pie), QoQ Heatmap, Revenue vs Margins (Composed), KPI Gauges (Horizontal Bar), KPI Landscape (Treemap)
- Drag-and-Drop Charts — reorder any chart by dragging; order persists in localStorage across sessions
- Pin KPI Charts — click any KPI in the data table to view its historical trend, then pin it as a new chart on the dashboard
- Ask AI — query your data in natural language ("Which client had the highest revenue growth?")
- Custom KPIs — manually add metrics the AI missed
- Smart $B Formatting — revenue values ≥ $1,000M auto-display as billions (e.g., $12.7B)
- All Clients Aggregation — summary cards intelligently aggregate across all clients (Revenue/OpIncome summed, margins/EPS averaged)
- PDF + URL Ingestion — works with public URLs or local files
- Secure — API keys never touch the browser; prompt injection detection built-in
Tech stack
| Layer | Technology |
|---|---|
| Framework | Next.js 15.1 (App Router) |
| Frontend | React 19, Tailwind CSS 3.4 |
| Charts | Recharts 2.13 (11+ chart types) |
| Drag-and-Drop | @dnd-kit/core + @dnd-kit/sortable |
| AI (default) | Google Gemini 2.5 Flash |
| AI (alternative) | Anthropic Claude Haiku / Sonnet |
| Backend/DB | Notion (via MCP + direct SDK) |
| MCP | @modelcontextprotocol/sdk 1.27, @notionhq/notion-mcp-server 2.2 |
| PDF Parsing | pdf-parse |
| Deployment | Vercel |
Demo
Static demo (no API keys needed): notion-kpi.sasrath.com
Show us the code
sasrath
/
notion-kpi-tracker
Turn any quarterly report URL into a live KPI dashboard. Powered by Claude/Gemini AI + Notion MCP. Zero traditional database.
📊 KPI Tracker — Powered by Notion MCP
AI-powered client quarterly performance tracker with multi-model support (Google Gemini + Anthropic Claude), 11+ interactive charts, AI revenue forecasting, and Notion as the sole backend. Zero traditional database.
Built for the dev.to Notion MCP Challenge
✨ Features
- 🤖 AI Report Ingestion — paste a URL or drag-and-drop a PDF, AI extracts KPIs automatically
- 📊 Interactive Dashboard — 11+ chart types (Area, Bar, Line, Pie, Heatmap, Treemap, Composed & more)
- 🔮 AI Revenue Forecasting — trend-based next-quarter revenue predictions per client
- 🧠 Multi-Model AI — choose from 5 models: Gemini 2.5 Flash/Pro, Claude Haiku 4.5, Sonnet 4.5/4.6
- ✋ Human-in-the-Loop — review and edit extracted KPIs before anything saves to Notion
- 🔄 Drag-and-Drop Charts — reorder dashboard charts by dragging; order persists across sessions
- 📌 Pin KPI Charts — click any KPI in the table to view its trend, then pin it to the…
The full source is on GitHub: github.com/sasrath/notion-kpi-tracker
Architecture at a glance
User Browser (React SPA)
│
├── Google Gemini API (web search, extraction, forecasts)
├── Anthropic Claude API (extraction, queries, forecasts)
│
└── Next.js API Routes
│
└── lib/notion-mcp.js (MCP Client singleton)
│ (stdio)
└── @notionhq/notion-mcp-server (subprocess)
│ (HTTP)
└── Notion API → 3 Databases
The MCP server runs as a long-lived subprocess managed as a singleton. It starts on the first API call and stays alive for subsequent requests. The callNotionTool() helper handles JSON parsing, error detection, and auto-reconnect.
Key files
-
app/page.jsx— Main dashboard: 11+ charts, DnD grid, KPI table, saving progress, tab persistence -
lib/notion-mcp.js— MCP client singleton with auto-reconnect and 21-tool mapping -
lib/llm.js— Multi-model AI layer (Gemini + Claude),safeParseJSONfor truncated responses -
lib/transforms.js— 19 data transform functions for chart preparation -
setup-notion.mjs— Automated Notion database setup script
How I Used Notion MCP
Notion is not a side feature — it is the backend. Every data operation flows through the official Notion MCP server (@notionhq/notion-mcp-server). There is zero traditional database code anywhere in the project.
The three-database schema
The app uses three relational Notion databases:
Clients — one row per company (Name, Industry, Website, Status)
Quarterly Reports — one row per earnings report, linked to a Client (Quarter, Year, Report URL, Raw Summary)
KPIs — one row per metric, linked to both a Report and a Client (KPI Name, Value, Unit, Quarter, Year, Source, Confidence, Notes)
MCP operations in action
| What the app does | MCP Tool used |
|---|---|
| Save a new client, report, or KPI | API-post-page |
| Load all clients / search KPIs | API-post-search |
| Delete (archive) a KPI row | API-patch-page |
| Verify Notion connection on startup | API-get-self |
| Check database schema | API-retrieve-a-database |
Here's how the MCP connection is established in lib/notion-mcp.js:
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
const transport = new StdioClientTransport({
command: "npx",
args: ["-y", "@notionhq/notion-mcp-server"],
env: {
...process.env,
OPENAPI_MCP_HEADERS: JSON.stringify({
Authorization: `Bearer ${process.env.NOTION_API_KEY}`,
"Notion-Version": "2022-06-28",
}),
},
});
const client = new Client({ name: "kpi-tracker", version: "1.0.0" });
await client.connect(transport);
Every read and write — from loading the dashboard to saving AI-extracted KPIs to deleting a row — goes through this MCP connection. The app treats Notion exactly like a traditional database, but through the standardized MCP protocol.
Why MCP over the direct Notion SDK?
Using MCP means the app communicates through a standardized protocol layer. This gives us:
- Tool discovery — the MCP server exposes 21 tools that map to Notion's REST API; the app discovers them at startup
- Protocol standardization — the same MCP client pattern works with any MCP-compatible service
- Decoupled auth — credentials flow through the MCP transport layer, not hardcoded in API calls
The result
The entire data lifecycle — AI extraction → human review → save to Notion → read for dashboard → AI forecasting — runs through Notion MCP. No separate database server to manage, no migrations to run, no connection pools to configure. Just Notion.
🔐 Full Demo Access
The public demo at notion-kpi.sasrath.com shows sample data to protect API limits.
For the full live experience with real Notion + Gemini:
👉 notion-kpi.sasrath.com/judges
Pre-loaded with real earnings data from Apple,
Microsoft and Intel Q4 2025.
About Me
I'm a consultant focused on practical AI integrations, data tooling, and building small, maintainable web apps that solve real problems. I publish code, demos, and write-ups so others can learn and contribute — feedback, issues, and pull requests are very welcome.My Github (source: https://github.com/sasrath).
Top comments (0)