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
Jonathan Hefner 61cd4ed219 Use content instead of structuredContent in examples 
Not all MCP clients support structuredContent in MCP tool results, so
examples now return data as JSON in content and parse it client-side.

Pattern used:
- Server: content: [{ type: "text", text: JSON.stringify(data) }]
- Client: JSON.parse(result.content!.filter(...).map(...).join(""))

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 16:35:20 -06:00
..
src Use content instead of structuredContent in examples 2025-12-05 16:35:20 -06:00
mcp-app.html Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00
package.json Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00
README.md Add customer-segmentation-server example 2025-12-04 14:32:47 -06:00
server.ts Use content instead of structuredContent in examples 2025-12-05 16:35:20 -06: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.

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 start

    The server will listen on http://localhost:3001/mcp.

  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