Skip to content

Commit f81d17f

Browse files
jonathanhefnerclaude
jonathanhefner
and
claude
committed
Add budget-allocator-server example
Demo MCP App for interactive budget allocation with: - Slider controls for 5 categories (Marketing, Engineering, etc.) - Real-time donut chart visualization via Chart.js - 24-month sparkline trends per category - Industry benchmark percentile badges - Company stage selector (Seed through Growth) - Budget preset buttons ($50K-$500K) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent c711b1a commit f81d17f

File tree

10 files changed

+1648
-0
lines changed

10 files changed

+1648
-0
lines changed

‎examples/budget-allocator-server/README.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Example: Budget Allocator App
2+
3+
An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.
4+
5+
## Features
6+
7+
- **Interactive Sliders**: Adjust budget allocation across 5 categories (Marketing, Engineering, Operations, Sales, R&D)
8+
- **Donut Chart**: Real-time visualization of allocation distribution using Chart.js
9+
- **Sparkline Trends**: 24-month historical allocation data per category
10+
- **Percentile Badges**: Compare your allocation vs. industry benchmarks
11+
- **Stage Selector**: Switch between Seed, Series A, Series B, and Growth benchmarks
12+
- **Budget Presets**: Quick selection of $50K, $100K, $250K, or $500K totals
13+
14+
## Running
15+
16+
1. Install dependencies:
17+
18+
```bash
19+
npm install
20+
```
21+
22+
2. Build and start the server:
23+
24+
```bash
25+
npm start
26+
```
27+
28+
The server will listen on `http://localhost:3001/mcp`.
29+
30+
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
31+
32+
## Architecture
33+
34+
### Server (`server.ts`)
35+
36+
Exposes a single `get-budget-data` tool that returns:
37+
38+
- Category definitions with colors and default allocations
39+
- Historical data (~120 data points) - 24 months of allocation history per category
40+
- Industry benchmarks (~60 data points) - Aggregated percentile data by company stage
41+
42+
The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
43+
44+
### App (`src/mcp-app.ts`)
45+
46+
- Uses Chart.js for the donut chart visualization
47+
- Renders sparkline trends using inline SVG
48+
- Computes percentile rankings client-side from benchmark data
49+
- Updates all UI elements reactively on slider changes

‎examples/budget-allocator-server/mcp-app.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Budget Allocator</title>
7+
</head>
8+
<body>
9+
<div class="app-container">
10+
<header class="header">
11+
<h1 class="title">Budget Allocator</h1>
12+
<select id="budget-selector" class="budget-select"></select>
13+
</header>
14+
15+
<section class="chart-section">
16+
<canvas id="budget-chart"></canvas>
17+
</section>
18+
19+
<section class="sliders-section" id="sliders-container"></section>
20+
21+
<footer class="footer">
22+
<div id="status-bar" class="status-bar">
23+
Allocated: $0 / $0
24+
</div>
25+
<div class="comparison-bar">
26+
<span id="comparison-summary">Loading benchmarks...</span>
27+
<label class="stage-label">
28+
Stage:
29+
<select id="stage-selector" class="stage-select"></select>
30+
</label>
31+
</div>
32+
</footer>
33+
</div>
34+
<script type="module" src="/src/mcp-app.ts"></script>
35+
</body>
36+
</html>

‎examples/budget-allocator-server/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "budget-allocator-server",
3+
"version": "1.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "INPUT=mcp-app.html vite build",
8+
"watch": "INPUT=mcp-app.html vite build --watch",
9+
"serve": "bun server.ts",
10+
"start": "NODE_ENV=development npm run build && npm run serve",
11+
"dev": "NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
12+
},
13+
"dependencies": {
14+
"@modelcontextprotocol/ext-apps": "../..",
15+
"@modelcontextprotocol/sdk": "^1.22.0",
16+
"chart.js": "^4.4.0",
17+
"zod": "^3.25.0"
18+
},
19+
"devDependencies": {
20+
"@types/cors": "^2.8.19",
21+
"@types/express": "^5.0.0",
22+
"@types/node": "^22.0.0",
23+
"concurrently": "^9.2.1",
24+
"cors": "^2.8.5",
25+
"express": "^5.1.0",
26+
"typescript": "^5.9.3",
27+
"vite": "^6.0.0",
28+
"vite-plugin-singlefile": "^2.3.0"
29+
}
30+
}

0 commit comments

Comments
 (0)