Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik c3e9d4d694 fix(examples): use server.registerTool for non-UI tool + fix missing imports (#173 ) * fix(threejs-server): use server.registerTool for non-UI tool The learn_threejs tool doesn't have a UI component - it only returns documentation text. Using registerAppTool without _meta causes a runtime error when the function tries to access config._meta.ui. Fixes crash: "Cannot read property 'ui' of undefined" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(examples): add missing registerAppTool and registerAppResource imports All example servers were using registerAppTool and registerAppResource but not importing them from @modelcontextprotocol/ext-apps/server, causing "ReferenceError: registerAppTool is not defined" at runtime. Affected servers: - budget-allocator-server - cohort-heatmap-server - customer-segmentation-server - scenario-modeler-server - system-monitor-server - threejs-server - wiki-explorer-server 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>		2025-12-17 00:17:45 +00:00
..
src	feat: add server helpers, make connect() to default to parent post transport (#165 )	2025-12-16 21:25:26 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	feat: make MCP SDK a peer dependency (#168 )	2025-12-16 22:09:59 +00:00
README.md	docs: add tool visibility and restructure _meta.ui (#131 )	2025-12-16 21:47:40 +00:00
server.ts	fix(examples): use server.registerTool for non-UI tool + fix missing imports (#173 )	2025-12-17 00:17:45 +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.

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

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-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.ui.resourceUri.

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