@modelcontextprotocol/server-budget-allocator 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -0
- package/dist/index.js +30583 -0
- package/dist/mcp-app.html +183 -0
- package/dist/server.d.ts +12 -0
- package/dist/server.js +35984 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Example: Budget Allocator App
|
|
2
|
+
|
|
3
|
+
An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.
|
|
4
|
+
|
|
5
|
+
<table>
|
|
6
|
+
<tr>
|
|
7
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/01-initial.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/01-initial.png" alt="Initial" width="100%"></a></td>
|
|
8
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/02-over-budget.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/02-over-budget.png" alt="Over budget" width="100%"></a></td>
|
|
9
|
+
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/03-tech-heavy.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/budget-allocator-server/03-tech-heavy.png" alt="Tech-heavy" width="100%"></a></td>
|
|
10
|
+
</tr>
|
|
11
|
+
</table>
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- **Interactive Sliders**: Adjust budget allocation across 5 categories (Marketing, Engineering, Operations, Sales, R&D)
|
|
16
|
+
- **Donut Chart**: Real-time visualization of allocation distribution using Chart.js
|
|
17
|
+
- **Sparkline Trends**: 24-month historical allocation data per category
|
|
18
|
+
- **Percentile Badges**: Compare your allocation vs. industry benchmarks
|
|
19
|
+
- **Stage Selector**: Switch between Seed, Series A, Series B, and Growth benchmarks
|
|
20
|
+
- **Budget Presets**: Quick selection of $50K, $100K, $250K, or $500K totals
|
|
21
|
+
|
|
22
|
+
## Running
|
|
23
|
+
|
|
24
|
+
1. Install dependencies:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
2. Build and start the server:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm run start:http # for Streamable HTTP transport
|
|
34
|
+
# OR
|
|
35
|
+
npm run start:stdio # for stdio transport
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
39
|
+
|
|
40
|
+
## Architecture
|
|
41
|
+
|
|
42
|
+
### Server (`server.ts`)
|
|
43
|
+
|
|
44
|
+
Exposes a single `get-budget-data` tool that returns:
|
|
45
|
+
|
|
46
|
+
- Category definitions with colors and default allocations
|
|
47
|
+
- Historical data (~120 data points) - 24 months of allocation history per category
|
|
48
|
+
- Industry benchmarks (~60 data points) - Aggregated percentile data by company stage
|
|
49
|
+
|
|
50
|
+
The tool is linked to a UI resource via `_meta.ui.resourceUri`.
|
|
51
|
+
|
|
52
|
+
### App (`src/mcp-app.ts`)
|
|
53
|
+
|
|
54
|
+
- Uses Chart.js for the donut chart visualization
|
|
55
|
+
- Renders sparkline trends using inline SVG
|
|
56
|
+
- Computes percentile rankings client-side from benchmark data
|
|
57
|
+
- Updates all UI elements reactively on slider changes
|