b4642b4338Update all documentation links from `modelcontextprotocol.github.io/ext-apps` to the new custom domain across README.md, docs/, and example READMEs. Add `cname` to the `peaceiris/actions-gh-pages` deploy action in `.github/workflows/docs.yml` so the CNAME file persists across deploys. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# Example: Budget Allocator App
|
|
|
|
An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.
|
|
|
|
<table>
|
|
<tr>
|
|
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/01-initial.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/01-initial.png" alt="Initial" width="100%"></a></td>
|
|
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/02-over-budget.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/02-over-budget.png" alt="Over budget" width="100%"></a></td>
|
|
<td><a href="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/03-tech-heavy.png"><img src="https://apps.extensions.modelcontextprotocol.io/screenshots/budget-allocator-server/03-tech-heavy.png" alt="Tech-heavy" width="100%"></a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
## MCP Client Configuration
|
|
|
|
Add to your MCP client configuration (stdio transport):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"budget-allocator": {
|
|
"command": "npx",
|
|
"args": [
|
|
"-y",
|
|
"--silent",
|
|
"--registry=https://registry.npmjs.org/",
|
|
"@modelcontextprotocol/server-budget-allocator",
|
|
"--stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Local Development
|
|
|
|
To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"budget-allocator": {
|
|
"command": "bash",
|
|
"args": [
|
|
"-c",
|
|
"cd ~/code/ext-apps/examples/budget-allocator-server && npm run build >&2 && node dist/index.js --stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## 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 run start:http # for Streamable HTTP transport
|
|
# OR
|
|
npm run start:stdio # for stdio transport
|
|
```
|
|
|
|
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.ui.resourceUri`.
|
|
|
|
### 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
|