| Filename | Latest commit message | Latest commit date |
|---|---|---|
c25d464d18* feat: publish example servers to npm Make example MCP App servers publishable to npm under the @modelcontextprotocol scope: - server-basic-react - server-basic-vanillajs - server-budget-allocator - server-cohort-heatmap - server-customer-segmentation - server-scenario-modeler - server-system-monitor - server-threejs - server-wiki-explorer Changes: - Remove `private: true` from example package.json files - Add proper npm metadata (description, repository, license, files) - Update ext-apps dependency from relative to ^0.2.2 - Copy server-utils.ts into each package for standalone use - Add publish-examples job to npm-publish.yml workflow The examples will be published automatically when a GitHub release is created, after the main SDK package is published. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: publish examples with pkg-pr-new for PR testing * feat: export createServer from example servers * style: format integration-server/server.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: update e2e snapshots for basic-server examples Update golden screenshots for basic-react and basic-vanillajs after the tool output was simplified from JSON to plain text in #182. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * merge * refactor: update sheet-music-server and video-resource-server to new publishing pattern - Move server-utils.ts from src/ to root level - Add npm publishing metadata (scoped name, repository, license, files) - Change ext-apps dependency from local to versioned ^0.2.2 - Update server.ts to handle stdio mode inline * update package-lock * fix: update package-lock.json for renamed server packages * feat: add NASA public domain video to video-resource-server Added 'nasa-earth' option - NASA ISS Earth observations (6.4MB). Source: archive.org/details/NASA-Ultra-High-Definition (public domain) * fix: add default videoId for video-resource-server * fix: use existing bunny-1mb as default video, remove nasa-earth * refactor: update new framework examples to publishing pattern Add publishing metadata for: - @modelcontextprotocol/server-basic-preact - @modelcontextprotocol/server-basic-solid - @modelcontextprotocol/server-basic-svelte - @modelcontextprotocol/server-basic-vue Changes: - Move server-utils.ts from src/ to root - Add npm publishing metadata - Update ext-apps dep to versioned ^0.2.2 - Add stdio mode support in main() * fix: add missing @rollup/rollup-win32-arm64-msvc to optionalDependencies This fixes the Windows ARM64 CI build failure caused by npm's optional dependency bug. The package.json was missing this platform-specific rollup binding. --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Olivier Chafik <ochafik@anthropic.com> |
||
| .. | ||
| src | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server-utils.ts | ||
| server.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Example: System Monitor App
A demo MCP App that displays real-time OS metrics with a stacked area chart for per-core CPU usage and a bar gauge for memory.
 |
 |
 |
Features
- Per-Core CPU Monitoring: Stacked area chart showing individual CPU core utilization over a 1-minute sliding window
- Memory Usage: Horizontal bar gauge with color-coded thresholds (green/yellow/red)
- System Info: Hostname, platform, and uptime display
- Auto-Polling: Automatically starts monitoring on load with 2-second refresh interval
- Theme Support: Adapts to light/dark mode preferences
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-hostexample or another MCP Apps-compatible host.
Architecture
Server (server.ts)
Exposes a single get-system-stats tool that returns:
- Raw per-core CPU timing data (idle/total counters)
- Memory usage (used/total/percentage)
- System info (hostname, platform, uptime)
The tool is linked to a UI resource via _meta.ui.resourceUri.
App (src/mcp-app.ts)
- Uses Chart.js for the stacked area chart visualization
- Polls the server tool every 2 seconds
- Computes CPU usage percentages client-side from timing deltas
- Maintains a 30-point history (1 minute at 2s intervals)
- Updates all UI elements on each poll