ext-apps/examples/system-monitor-server
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Jonathan Hefner 61cd4ed219 Use content instead of structuredContent in examples
Not all MCP clients support structuredContent in MCP tool results, so
examples now return data as JSON in content and parse it client-side.

Pattern used:
- Server: content: [{ type: "text", text: JSON.stringify(data) }]
- Client: JSON.parse(result.content!.filter(...).map(...).join(""))

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 16:35:20 -06:00
..
src Use content instead of structuredContent in examples 2025-12-05 16:35:20 -06:00
mcp-app.html Add system-monitor-server example 2025-12-04 14:32:41 -06:00
package.json Add system-monitor-server example 2025-12-04 14:32:41 -06:00
README.md Add system-monitor-server example 2025-12-04 14:32:41 -06:00
server.ts Use content instead of structuredContent in examples 2025-12-05 16:35:20 -06: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

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

  1. Install dependencies:

    npm install
    
  2. Build and start the server:

    npm start
    

    The server will listen on http://localhost:3001/mcp.

  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