Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik cce8d5c7a3 docs: add MCP client configuration to example READMEs Add stdio transport configuration snippets near the top of each example README to help users quickly set up the servers in their MCP clients. - Node.js examples use npx with the published npm packages - Python qr-server uses uv with local path - Removed Claude Desktop-specific references from qr-server		2026-01-16 14:00:57 +00:00
..
src	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
main.ts	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	chore: bump version to 0.4.1 (#282 )	2026-01-15 16:11:53 +00:00
README.md	docs: add MCP client configuration to example READMEs	2026-01-16 14:00:57 +00:00
screenshot.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
server.ts	fix(examples): resolve DIST_DIR path for npm package execution (#277 )	2026-01-15 12:23:13 +00:00
tsconfig.json	Add system-monitor-server example	2025-12-04 14:32:41 -06:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00: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.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "system-monitor": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-system-monitor",
        "--stdio"
      ]
    }
  }
}

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-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.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