Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik bea0ae27f5 feat: add server helpers, make connect() to default to parent post transport (#165 ) * feat: add server helpers and optional connect() transport Add `src/server/` with convenience functions for registering MCP App tools and resources: - `registerAppTool(server, name, config, handler)` - `registerAppResource(server, name, uri, config, callback)` The `transport` parameter in `App.connect()` is now optional, defaulting to `PostMessageTransport(window.parent)`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/server/index.ts Co-authored-by: Jonathan Hefner <jonathan@hefner.pro> * fix: refine server helper types - Make RESOURCE_URI_META_KEY required in McpUiAppToolConfig (tools need a UI resource) - Make _meta optional in McpUiAppResourceConfig (not all resources need custom metadata) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: simplify RESOURCE_URI_META_KEY re-export * refactor: consolidate export statements --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>		2025-12-16 21:25:26 +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	fix: Windows compatibility - bun as optional dep, cross-env for examples (#145 )	2025-12-16 14:07:38 +00:00
README.md	Smoothen the process of getting started (#103 )	2025-12-09 16:15:32 +01:00
server.ts	feat: add server helpers, make connect() to default to parent post transport (#165 )	2025-12-16 21:25:26 +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[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