37aab03de0* docs: add tool visibility and restructure _meta.ui - Restructure tool metadata: `_meta["ui/resourceUri"]` → `_meta.ui.resourceUri` - Add `visibility` array field: ["model"], ["apps"], or ["model", "apps"] - Default ["model"] preserves standard MCP behavior - ["apps"] enables widget-only tools hidden from agent - Add McpUiToolMeta interface for type safety - Add Design Decision #4 explaining approach vs OpenAI's two-field model 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * address PR review comments - Change default visibility to ["model", "apps"] - Add deprecation notice for flat ui/resourceUri format - Add McpUiToolMeta and McpUiToolVisibility to spec.types.ts - Improve tools/list and tools/call behavior wording 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: regenerate schemas for McpUiToolMeta types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: tool visibility and nested _meta.ui format - Rename visibility "apps" → "app" in McpUiToolVisibility type - Add _meta.ui.resourceUri nested format (deprecate flat format) - Add getToolUiResourceUri() utility with backward compatibility - Add visibility demo to system-monitor-server: - get-system-stats: visibility ["model"] with resourceUri - refresh-stats: visibility ["app"] (app-only polling) - Update all example servers to use new _meta.ui format - Add 11 unit tests for getToolUiResourceUri() 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: regenerate schemas with updated dependencies * feat: export McpUiToolMeta type and add type annotations - Export McpUiToolMeta and McpUiToolVisibility types from types.ts - Export corresponding Zod schemas (McpUiToolMetaSchema, McpUiToolVisibilitySchema) - Add `as McpUiToolMeta` type annotations to all example servers - Update docs/quickstart.md with proper typing Ensures type safety for `_meta.ui` tool metadata across the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: add server helpers and optional connect() transport Add `src/server/` with convenience functions for registering MCP App tools and resources: - `registerAppTool(server, name, config, handler)` - `registerAppResource(server, name, uri, config, callback)` The `transport` parameter in `App.connect()` is now optional, defaulting to `PostMessageTransport(window.parent)`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/server/index.ts Co-authored-by: Jonathan Hefner <jonathan@hefner.pro> * feat: update McpUiAppToolConfig to support both _meta.ui and flat formats * refactor: simplify server helper imports * docs: add deprecation notice and improve resourceUri documentation * feat: add backward compat normalization in registerAppTool - If _meta.ui.resourceUri is set, also set legacy flat key - If legacy flat key is set, also set _meta.ui.resourceUri - Preserves existing visibility when merging - Does not overwrite if both formats already set * refactor: avoid mutating config arg in registerAppTool * style: format with prettier --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Olivier Chafik <ochafik@anthropic.com> Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>
57 lines
2.5 KiB
Markdown
57 lines
2.5 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://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>
|
|
<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>
|
|
<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>
|
|
</tr>
|
|
</table>
|
|
|
|
## 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
|