@modelcontextprotocol/server-cohort-heatmap 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -0
- package/dist/index.js +30583 -0
- package/dist/mcp-app.html +160 -0
- package/dist/server.d.ts +2 -0
- package/dist/server.js +35894 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Example: Cohort Heatmap App
|
|
2
|
+
|
|
3
|
+
A demo MCP App that displays cohort retention data as an interactive heatmap, showing customer retention over time by signup month.
|
|
4
|
+
|
|
5
|
+
<table>
|
|
6
|
+
<tr>
|
|
7
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/01-initial-view.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/01-initial-view.png" alt="Initial view" width="100%"></a></td>
|
|
8
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/02-hover-state.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/02-hover-state.png" alt="Hover state" width="100%"></a></td>
|
|
9
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/03-low-retention-hover.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/cohort-heatmap-server/03-low-retention-hover.png" alt="Low retention hover" width="100%"></a></td>
|
|
10
|
+
</tr>
|
|
11
|
+
</table>
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- **Cohort Retention Heatmap**: Color-coded grid showing retention percentages across cohorts and time periods
|
|
16
|
+
- **Multiple Metrics**: Switch between Retention %, Revenue Retention, and Active Users
|
|
17
|
+
- **Period Types**: View data by monthly or weekly intervals
|
|
18
|
+
- **Interactive Exploration**: Hover cells for detailed tooltips, click to highlight rows/columns
|
|
19
|
+
- **Color Scale**: Green (high retention) through yellow to red (low retention)
|
|
20
|
+
- **Theme Support**: Adapts to light/dark mode preferences
|
|
21
|
+
|
|
22
|
+
## Running
|
|
23
|
+
|
|
24
|
+
1. Install dependencies:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Build and start the server:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm run start:http # for Streamable HTTP transport
|
|
34
|
+
# OR
|
|
35
|
+
npm run start:stdio # for stdio transport
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
39
|
+
|
|
40
|
+
## Architecture
|
|
41
|
+
|
|
42
|
+
### Server (`server.ts`)
|
|
43
|
+
|
|
44
|
+
Exposes a single `get-cohort-data` tool that returns:
|
|
45
|
+
|
|
46
|
+
- Cohort rows with signup month, original user count, and retention cells
|
|
47
|
+
- Period headers and labels
|
|
48
|
+
- Configurable parameters: metric type, period type, cohort count, max periods
|
|
49
|
+
|
|
50
|
+
The tool generates synthetic cohort data using an exponential decay model with configurable retention curves per metric type.
|
|
51
|
+
|
|
52
|
+
### App (`src/mcp-app.tsx`)
|
|
53
|
+
|
|
54
|
+
- Uses React for the heatmap visualization
|
|
55
|
+
- Fetches data on mount and when filters change
|
|
56
|
+
- Displays retention percentages in a grid with HSL color interpolation
|
|
57
|
+
- Shows detailed tooltips on hover with user counts and exact retention values
|
|
58
|
+
- Supports row/column highlighting on cell click
|