modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add customer-segmentation-server example

Browse source 
Demo MCP App for customer data visualization featuring:
- Interactive bubble chart (Chart.js) with configurable X/Y axes
- 250 customers across 4 segments (Enterprise, Mid-Market, SMB, Startup)
- 6 metrics: Revenue, Employees, Account Age, Engagement, Tickets, NPS
- Optional bubble sizing by a third metric
- Clickable legend for segment filtering
- Detail panel on hover/click
- Light/dark theme support

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2025-12-04 13:37:03 -06:00
commit 98d8fcddff
1 changed files with 1300 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

70
examples/customer-segmentation-server/mcp-app.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Segmentation Explorer</title>
</head>
<body>
<main class="main">
<header class="header">
<h1 class="title">Customer Segmentation</h1>
</header>
<section class="controls-section">
<label class="select-label">
X:
<select id="x-axis" class="select">
<option value="annualRevenue">Annual Revenue</option>
<option value="employeeCount">Employees</option>
<option value="accountAge">Account Age (mo)</option>
<option value="engagementScore">Engagement</option>
<option value="supportTickets">Support Tickets</option>
<option value="nps">NPS</option>
</select>
</label>
<label class="select-label">
Y:
<select id="y-axis" class="select">
<option value="annualRevenue">Annual Revenue</option>
<option value="employeeCount">Employees</option>
<option value="accountAge">Account Age (mo)</option>
<option value="engagementScore" selected>Engagement</option>
<option value="supportTickets">Support Tickets</option>
<option value="nps">NPS</option>
</select>
</label>
<label class="select-label">
Size:
<select id="size-metric" class="select">
<option value="off">Off</option>
<option value="annualRevenue">Annual Revenue</option>
<option value="employeeCount">Employees</option>
<option value="accountAge">Account Age (mo)</option>
<option value="engagementScore">Engagement</option>
<option value="supportTickets">Support Tickets</option>
<option value="nps">NPS</option>
</select>
</label>
</section>
<section class="chart-section">
<div class="chart-container">
<canvas id="scatter-chart"></canvas>
</div>
</section>
<section class="legend-section">
<div id="legend" class="legend"></div>
</section>
<section class="detail-section">
<div id="detail-panel" class="detail-panel">
<span class="detail-placeholder">Hover over a point to see details</span>
</div>
</section>
</main>
<script type="module" src="./src/mcp-app.ts"></script>
</body>
</html>