Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Jonathan Hefner 4ff22d0097 Fix build errors in examples (#180 ) * Update `package.json` * Add TypeScript type checking to example build scripts Add `tsc --noEmit &&` before `vite build` in all example `package.json` files to catch type errors during builds. Previously, type errors in `server.ts` files were not detected because Vite/Bun transpile without type checking. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Make `_meta` optional in `McpUiAppResourceConfig` The `_meta` and `ui` properties were required, causing TypeScript errors when calling `registerAppResource()` without providing metadata. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Fix Zod type compatibility in `registerAppTool()` Use `ZodRawShapeCompat \| AnySchema` from SDK's `zod-compat` module instead of raw `ZodRawShape` to resolve type errors when examples pass `ZodObject` schemas to `registerAppTool()`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Remove unused imports in example apps - `basic-server-react`: Remove unused `McpUiResourceTeardownResult` - `customer-segmentation-server`: Remove unused `PostMessageTransport` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Fix CI git install test for fork PRs Use `github.event.pull_request.head.repo.full_name` to correctly reference the fork repository when testing git installs from PRs. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>		2025-12-18 11:17:23 +00:00
..
src	feat: add server helpers, make connect() to default to parent post transport (#165 )	2025-12-16 21:25:26 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	Fix build errors in examples (#180 )	2025-12-18 11:17:23 +00:00
README.md	docs: add tool visibility and restructure _meta.ui (#131 )	2025-12-16 21:47:40 +00:00
server.ts	fix(examples): use server.registerTool for non-UI tool + fix missing imports (#173 )	2025-12-17 00:17:45 +00:00
tsconfig.json	Add budget-allocator-server example	2025-12-04 14:33:01 -06: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.

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