Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik 1a713173cc Migrate to MCP SDK 2.0 with official Protocol and isolated role peers (#720 ) App and AppBridge extend the public Protocol from @modelcontextprotocol/client; the iframe wire protocol (ui/initialize only) is unchanged. Peers move to the split SDK 2.0 packages with client and server as optional role peers. Fixups (lockfile, peer ranges, restored handler guards, docs, wire-compat tests) follow in a separate PR. Co-authored-by: Andrew Khadder <andrew@manufact.com> Co-authored-by: Felix Weinberger <fweinberger@anthropic.com> Closes #702		2026-09-08 12:44:49 +01:00
..
src	feat: use structuredContent with outputSchema in example servers (#220 )	2026-01-12 14:25:16 +00:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
main.ts	refactor: finish MCP SDK v2 migration	2026-07-14 17:07:30 -07:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	Migrate to MCP SDK 2.0 with official Protocol and isolated role peers (#720 )	2026-09-08 12:44:49 +01:00
README.md	Use `apps.extensions.modelcontextprotocol.io` domain for docs URLs	2026-02-24 11:38:54 -06:00
screenshot.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
server.ts	refactor: finish MCP SDK v2 migration	2026-07-14 17:07:30 -07:00
tsconfig.json	Add cohort-heatmap-server example	2025-12-04 14:32:53 -06:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	Add cohort-heatmap-server example	2025-12-04 14:32:53 -06:00

README.md

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.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "cohort-heatmap": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-cohort-heatmap",
        "--stdio"
      ]
    }
  }
}

Local Development

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "cohort-heatmap": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/cohort-heatmap-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

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

Install dependencies:
```
npm install
```

Build and start the server:

npm run start:http  # for Streamable HTTP transport
# OR
npm run start:stdio  # for stdio transport

View using the 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