Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik cce8d5c7a3 docs: add MCP client configuration to example READMEs Add stdio transport configuration snippets near the top of each example README to help users quickly set up the servers in their MCP clients. - Node.js examples use npx with the published npm packages - Python qr-server uses uv with local path - Removed Claude Desktop-specific references from qr-server		2026-01-16 14:00:57 +00:00
..
src	feat: use structuredContent with outputSchema in example servers (#220 )	2026-01-12 14:25:16 +00:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat: add example gallery with auto-generated screenshots (#253 )	2026-01-13 15:12:18 +00:00
main.ts	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	chore: bump version to 0.4.1 (#282 )	2026-01-15 16:11:53 +00:00
README.md	docs: add MCP client configuration to example READMEs	2026-01-16 14:00:57 +00:00
screenshot.png	feat: add example gallery with auto-generated screenshots (#253 )	2026-01-13 15:12:18 +00:00
server.ts	fix(examples): resolve DIST_DIR path for npm package execution (#277 )	2026-01-15 12:23:13 +00:00
tsconfig.json	Add budget-allocator-server example	2025-12-04 14:33:01 -06:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	Add budget-allocator-server example	2025-12-04 14:33:01 -06:00

README.md

Example: Budget Allocator App

An interactive budget allocation tool demonstrating real-time data visualization with MCP Apps.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "budget-allocator": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-budget-allocator",
        "--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

Install dependencies:
```
npm install
```

Build and start the server:

npm run start:http  # for Streamable HTTP transport
# OR
npm run start:stdio  # for stdio transport

View using the 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