| Filename | Latest commit message | Latest commit date |
|---|---|---|
f81d17f385
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> |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
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
-
Install dependencies:
npm install -
Build and start the server:
npm startThe server will listen on
http://localhost:3001/mcp. -
View using the
basic-hostexample 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