modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ext-apps/examples/customer-segmentation-server
History
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Anton Pidkuiko 8550545ccb
 fix: add mimeType to resource declarations in examples (#149) 
According to spec, mimeType should be present in both the resource
declaration and the resource content. This adds the missing mimeType
to the registerResource() declaration (third parameter) in all example
servers and the quickstart documentation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: ochafik <olivier.chafik@gmail.com>
2025-12-15 12:09:47 +00:00
..
src Fix widget layout to use full available width 2025-12-08 14:01:28 +00:00
mcp-app.html Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00
package.json Implement BYO zod v3 or v4 2025-12-12 11:29:02 +01:00
README.md Smoothen the process of getting started (#103) 2025-12-09 16:15:32 +01:00
server.ts fix: add mimeType to resource declarations in examples (#149) 2025-12-15 12:09:47 +00:00
tsconfig.json Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00
vite.config.ts Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00

README.md

Example: Customer Segmentation Explorer

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.

Account age vs revenue Tickets, NPS, engagement Age, engagement, revenue

Features

  • Interactive Scatter Plot: Bubble chart visualization using Chart.js with configurable X/Y axes
  • Segment Clustering: 250 customers grouped into 4 segments (Enterprise, Mid-Market, SMB, Startup)
  • Axis Selection: Choose from 6 metrics for each axis (Revenue, Employees, Account Age, Engagement, Tickets, NPS)
  • Size Mapping: Optional bubble sizing by a third metric for additional data dimension
  • Legend Filtering: Click segment pills to show/hide customer groups
  • Detail Panel: Hover or click customers to see name, segment, revenue, engagement, and NPS
  • Theme Support: Adapts to light/dark mode preferences

Running

  1. Install dependencies:

    npm install

  2. Build and start the server:

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

  3. View using the basic-host example or another MCP Apps-compatible host.

Architecture

Server (server.ts)

Exposes a single get-customer-data tool that returns:

  • Array of 250 generated customer records with segment assignments
  • Segment summary with counts and colors for each group
  • Optional segment filter parameter

The tool is linked to a UI resource via _meta[RESOURCE_URI_META_KEY].

App (src/mcp-app.ts)

  • Uses Chart.js bubble chart for the visualization
  • Fetches data once on connection
  • Dropdown controls update chart axes and bubble sizing
  • Custom legend with clickable segment toggles
  • Detail panel updates on hover/click interactions

Data Generator (src/data-generator.ts)

  • Generates realistic customer data with Gaussian clustering around segment centers
  • Each segment has characteristic ranges for revenue, employees, engagement, etc.
  • Company names generated from word-list combinations (e.g., "Apex Data Corp")
  • Data cached in memory for session consistency