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 <noreply@anthropic.com>
This commit is contained in:
parent
c711b1aac4
commit
f81d17f385
1 changed files with 1648 additions and 0 deletions
49
examples/budget-allocator-server/README.md
Normal file
49
examples/budget-allocator-server/README.md
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
# Example: Budget Allocator App
|
||||
|
||||
An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.
|
||||
|
||||
## Features
|
||||
|
||||
- **Interactive Sliders**: Adjust budget allocation across 5 categories (Marketing, Engineering, Operations, Sales, R&D)
|
||||
- **Donut Chart**: Real-time visualization of allocation distribution using Chart.js
|
||||
- **Sparkline Trends**: 24-month historical allocation data per category
|
||||
- **Percentile Badges**: Compare your allocation vs. industry benchmarks
|
||||
- **Stage Selector**: Switch between Seed, Series A, Series B, and Growth benchmarks
|
||||
- **Budget Presets**: Quick selection of $50K, $100K, $250K, or $500K totals
|
||||
|
||||
## Running
|
||||
|
||||
1. Install dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. Build and start the server:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
The server will listen on `http://localhost:3001/mcp`.
|
||||
|
||||
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
||||
|
||||
## Architecture
|
||||
|
||||
### Server (`server.ts`)
|
||||
|
||||
Exposes a single `get-budget-data` tool that returns:
|
||||
|
||||
- Category definitions with colors and default allocations
|
||||
- Historical data (~120 data points) - 24 months of allocation history per category
|
||||
- Industry benchmarks (~60 data points) - Aggregated percentile data by company stage
|
||||
|
||||
The tool is linked to a UI resource via `_meta[RESOURCE_URI_META_KEY]`.
|
||||
|
||||
### App (`src/mcp-app.ts`)
|
||||
|
||||
- Uses Chart.js for the donut chart visualization
|
||||
- Renders sparkline trends using inline SVG
|
||||
- Computes percentile rankings client-side from benchmark data
|
||||
- Updates all UI elements reactively on slider changes
|
||||
Loading…
Reference in a new issue