Watch

Olivier Chafik 298e884ec3

chore: stable spec release 2026-01-26 and SDK v1.0.0 (#362 )

* chore: add stable spec release 2026-01-26

- Use git mv to copy specification from draft to specification/2026-01-26/apps.mdx (preserves history)
- Update status from 'Draft' to 'Stable (2026-01-26)'
- Add specification version table to README
- Update Resources section with links to both stable and draft specs

* chore: bump version to 1.0.0

- Update main package version from 0.4.2 to 1.0.0
- Update all example package versions to 1.0.0
- Regenerate package-lock.json

* prettier

* chore: align protocol version with spec release 2026-01-26

- Add 'Protocol Version: 2026-01-26' to spec header
- Update LATEST_PROTOCOL_VERSION from '2025-11-21' to '2026-01-26'
- Update spec examples to use '2026-01-26' protocol version
- Add '2025-11-21' to SUPPORTED_PROTOCOL_VERSIONS for backwards compatibility

* chore: update spec references to stable 2026-01-26

- Update typedoc.config.mjs navigation link
- Update docs/overview.md spec links (10 occurrences)
- Update plugins/mcp-apps/skills/create-mcp-app/SKILL.md spec link
- Update src/spec.types.ts @see links
- Update AGENTS.md spec path
- Regenerate src/generated/schema.ts with updated links

* chore: simplify versioning - first stable release

- Remove backwards compatibility version (2025-11-21) - this is the first stable release
- Remove redundant 'Protocol Version' header - spec version IS the protocol version

* chore: add history reference comment to stable spec

2026-01-26 17:31:33 +00:00

3.9 KiB

Raw Permalink Blame History

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.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "customer-segmentation": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-customer-segmentation",
        "--stdio"
      ]
    }
  }
}

Local Development

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "customer-segmentation": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/customer-segmentation-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

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 consistency across requests

3.9 KiB Raw Permalink Blame History