Add cohort-heatmap-server example
Demo MCP App visualizing cohort retention data with: - Interactive heatmap with HSL color interpolation - Multiple metrics: Retention %, Revenue Retention, Active Users - Monthly/weekly period views - Cell hover tooltips and row/column highlighting - Light/dark theme support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
98d8fcddff
commit
c711b1aac4
1 changed files with 1131 additions and 7 deletions
50
examples/cohort-heatmap-server/README.md
Normal file
50
examples/cohort-heatmap-server/README.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
# Example: Cohort Heatmap App
|
||||
|
||||
A demo MCP App that displays cohort retention data as an interactive heatmap, showing customer retention over time by signup month.
|
||||
|
||||
## Features
|
||||
|
||||
- **Cohort Retention Heatmap**: Color-coded grid showing retention percentages across cohorts and time periods
|
||||
- **Multiple Metrics**: Switch between Retention %, Revenue Retention, and Active Users
|
||||
- **Period Types**: View data by monthly or weekly intervals
|
||||
- **Interactive Exploration**: Hover cells for detailed tooltips, click to highlight rows/columns
|
||||
- **Color Scale**: Green (high retention) through yellow to red (low retention)
|
||||
- **Theme Support**: Adapts to light/dark mode preferences
|
||||
|
||||
## Running
|
||||
|
||||
1. Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. Build and start the server:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The server will listen on `http://localhost:3001/mcp`.
|
||||
|
||||
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Server (`server.ts`)
|
||||
|
||||
Exposes a single `get-cohort-data` tool that returns:
|
||||
|
||||
- Cohort rows with signup month, original user count, and retention cells
|
||||
- Period headers and labels
|
||||
- Configurable parameters: metric type, period type, cohort count, max periods
|
||||
|
||||
The tool generates synthetic cohort data using an exponential decay model with configurable retention curves per metric type.
|
||||
|
||||
### App (`src/mcp-app.tsx`)
|
||||
|
||||
- Uses React for the heatmap visualization
|
||||
- Fetches data on mount and when filters change
|
||||
- Displays retention percentages in a grid with HSL color interpolation
|
||||
- Shows detailed tooltips on hover with user counts and exact retention values
|
||||
- Supports row/column highlighting on cell click
|
||||
Loading…
Reference in a new issue