@modelcontextprotocol/server-customer-segmentation 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 +66 -0
- package/dist/index.js +30586 -0
- package/dist/mcp-app.html +199 -0
- package/dist/server.d.ts +6 -0
- package/dist/server.js +36021 -0
- package/dist/src/data-generator.d.ts +3 -0
- package/dist/src/types.d.ts +22 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# Example: Customer Segmentation Explorer
|
|
2
|
+
|
|
3
|
+
A demo MCP App that displays customer data as an interactive scatter/bubble chart with segment-based clustering. Users can explore different metrics, filter by segment, and click to see detailed customer information.
|
|
4
|
+
|
|
5
|
+
<table>
|
|
6
|
+
<tr>
|
|
7
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/01-account-age-revenue.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/01-account-age-revenue.png" alt="Account age vs revenue" width="100%"></a></td>
|
|
8
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/02-tickets-nps-engagement.png" alt="Tickets, NPS, engagement" width="100%"></a></td>
|
|
9
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/07-age-engagement-revenue.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/customer-segmentation-server/07-age-engagement-revenue.png" alt="Age, engagement, revenue" width="100%"></a></td>
|
|
10
|
+
</tr>
|
|
11
|
+
</table>
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- **Interactive Scatter Plot**: Bubble chart visualization using Chart.js with configurable X/Y axes
|
|
16
|
+
- **Segment Clustering**: 250 customers grouped into 4 segments (Enterprise, Mid-Market, SMB, Startup)
|
|
17
|
+
- **Axis Selection**: Choose from 6 metrics for each axis (Revenue, Employees, Account Age, Engagement, Tickets, NPS)
|
|
18
|
+
- **Size Mapping**: Optional bubble sizing by a third metric for additional data dimension
|
|
19
|
+
- **Legend Filtering**: Click segment pills to show/hide customer groups
|
|
20
|
+
- **Detail Panel**: Hover or click customers to see name, segment, revenue, engagement, and NPS
|
|
21
|
+
- **Theme Support**: Adapts to light/dark mode preferences
|
|
22
|
+
|
|
23
|
+
## Running
|
|
24
|
+
|
|
25
|
+
1. Install dependencies:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
2. Build and start the server:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm run start:http # for Streamable HTTP transport
|
|
35
|
+
# OR
|
|
36
|
+
npm run start:stdio # for stdio transport
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
40
|
+
|
|
41
|
+
## Architecture
|
|
42
|
+
|
|
43
|
+
### Server (`server.ts`)
|
|
44
|
+
|
|
45
|
+
Exposes a single `get-customer-data` tool that returns:
|
|
46
|
+
|
|
47
|
+
- Array of 250 generated customer records with segment assignments
|
|
48
|
+
- Segment summary with counts and colors for each group
|
|
49
|
+
- Optional segment filter parameter
|
|
50
|
+
|
|
51
|
+
The tool is linked to a UI resource via `_meta.ui.resourceUri`.
|
|
52
|
+
|
|
53
|
+
### App (`src/mcp-app.ts`)
|
|
54
|
+
|
|
55
|
+
- Uses Chart.js bubble chart for the visualization
|
|
56
|
+
- Fetches data once on connection
|
|
57
|
+
- Dropdown controls update chart axes and bubble sizing
|
|
58
|
+
- Custom legend with clickable segment toggles
|
|
59
|
+
- Detail panel updates on hover/click interactions
|
|
60
|
+
|
|
61
|
+
### Data Generator (`src/data-generator.ts`)
|
|
62
|
+
|
|
63
|
+
- Generates realistic customer data with Gaussian clustering around segment centers
|
|
64
|
+
- Each segment has characteristic ranges for revenue, employees, engagement, etc.
|
|
65
|
+
- Company names generated from word-list combinations (e.g., "Apex Data Corp")
|
|
66
|
+
- Data cached in memory for consistency across requests
|