modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ext-apps/examples/system-monitor-server
History
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Anton Pidkuiko 8550545ccb
 fix: add mimeType to resource declarations in examples (#149) 
According to spec, mimeType should be present in both the resource
declaration and the resource content. This adds the missing mimeType
to the registerResource() declaration (third parameter) in all example
servers and the quickstart documentation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: ochafik <olivier.chafik@gmail.com>
2025-12-15 12:09:47 +00:00
..
src Fix widget layout to use full available width 2025-12-08 14:01:28 +00:00
mcp-app.html Add system-monitor-server example 2025-12-04 14:32:41 -06:00
package.json Implement BYO zod v3 or v4 2025-12-12 11:29:02 +01:00
README.md Smoothen the process of getting started (#103) 2025-12-09 16:15:32 +01:00
server.ts fix: add mimeType to resource declarations in examples (#149) 2025-12-15 12:09:47 +00:00
tsconfig.json Add system-monitor-server example 2025-12-04 14:32:41 -06:00
vite.config.ts Add system-monitor-server example 2025-12-04 14:32:41 -06:00

README.md

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.

Initial state CPU data accumulated Extended CPU history

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

  1. Install dependencies:

    npm install

  2. Build and start the server:

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

  3. View using the basic-host example 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[RESOURCE_URI_META_KEY].

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