ext-apps/examples/customer-segmentation-server/mcp-app.html at 5b6ac194e2c165ca26c1bbff27bf7d4985feae36 · modelcontextprotocol/ext-apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <title>Customer Segmentation Explorer</title>
</head>
<body>
  <main class="main">
    <header class="header">
      <h1 class="title">Customer Segmentation</h1>
      <button id="fullscreen-btn" class="fullscreen-btn" title="Toggle fullscreen">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8.22461 11.082C8.41868 10.9539 8.68265 10.9756 8.85352 11.1465C9.02437 11.3173 9.04613 11.5813 8.91797 11.7754L8.85352 11.8535L4.70703 16H7.5C7.77614 16 8 16.2239 8 16.5C8 16.7761 7.77614 17 7.5 17H3.5C3.46695 17 3.43389 16.9967 3.40137 16.9902H3.39941C3.33993 16.9781 3.2851 16.9541 3.23535 16.9229C3.22314 16.9152 3.21185 16.9063 3.2002 16.8975C3.18573 16.8865 3.17138 16.8757 3.1582 16.8633C3.15452 16.8598 3.15008 16.8571 3.14648 16.8535C3.14173 16.8488 3.13832 16.8428 3.13379 16.8379C3.12089 16.8239 3.10891 16.8093 3.09766 16.7939C3.08941 16.7827 3.0814 16.7715 3.07422 16.7598C3.0639 16.7429 3.05517 16.7252 3.04688 16.707C3.04311 16.6988 3.03845 16.691 3.03516 16.6826C3.0248 16.6562 3.01653 16.6289 3.01074 16.6006C3.00395 16.5674 3 16.5337 3 16.5V12.5C3 12.2239 3.22386 12 3.5 12C3.77614 12 4 12.2239 4 12.5V15.293L8.14648 11.1465L8.22461 11.082ZM16.5 3C16.5374 3 16.5747 3.00436 16.6113 3.0127C16.6347 3.01803 16.6574 3.02559 16.6797 3.03418C16.687 3.03701 16.6939 3.04076 16.7012 3.04395C16.7213 3.05283 16.7409 3.06272 16.7598 3.07422C16.7675 3.07892 16.7757 3.08274 16.7832 3.08789C16.8082 3.10508 16.8317 3.12471 16.8535 3.14648L16.918 3.22461C16.9289 3.24116 16.9356 3.25988 16.9443 3.27734C16.95 3.28857 16.9572 3.29894 16.9619 3.31055C16.9868 3.37121 17 3.43545 17 3.5V7.5C17 7.77614 16.7761 8 16.5 8C16.2239 8 16 7.77614 16 7.5V4.70703L11.8535 8.85352C11.6583 9.04878 11.3417 9.04878 11.1465 8.85352C10.9512 8.65825 10.9512 8.34175 11.1465 8.14648L15.293 4H12.5C12.2239 4 12 3.77614 12 3.5C12 3.22386 12.2239 3 12.5 3H16.5Z" fill="currentColor"/>
        </svg>
      </button>
    </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>