| Filename | Latest commit message | Latest commit date |
|---|---|---|
* chore: bump ext-apps to 1.7.4 * fix: resolve all npm audit vulnerabilities - Remove unused vitest devDependency from basic-host (critical advisory, package was never referenced by any test or config) - systeminformation ^5.31.5 -> ^5.31.6 (command injection, GHSA-hvx9-hwr7-wjj9) - Lockfile-only bumps: devalue 5.8.1, fast-uri 3.1.2, hono 4.12.23, ip-address 10.2.0, express-rate-limit 8.5.2, postcss 8.5.15, qs 6.15.2, svelte 5.56.1 npm audit now reports 0 vulnerabilities. |
||
| .. | ||
| src | ||
| .gitignore | ||
| grid-cell.png | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| server.ts | ||
| tsconfig.json | ||
| tsconfig.server.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.
![]() |
![]() |
![]() |
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"
]
}
}
}
Local Development
To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):
{
"mcpServers": {
"system-monitor": {
"command": "bash",
"args": [
"-c",
"cd ~/code/ext-apps/examples/system-monitor-server && npm run build >&2 && node dist/index.js --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-hostexample or another MCP Apps-compatible host.
Architecture
Server (server.ts)
Exposes two tools demonstrating a polling pattern:
-
get-system-info(Model-visible) — Returns static system configuration:- Hostname, platform, architecture
- CPU model and core count
- Total memory
-
poll-system-stats(App-only,visibility: ["app"]) — Returns dynamic metrics:- Per-core CPU timing data (idle/total counters)
- Memory usage (used/free/percentage)
- Uptime
The Model-visible tool is linked to a UI resource via _meta.ui.resourceUri.
App (src/mcp-app.ts)
- Receives static system info via
ontoolresultwhen the host sends theget-system-inforesult - Polls
poll-system-statsevery 2 seconds for dynamic metrics - Uses Chart.js for the stacked area chart visualization
- Computes CPU usage percentages client-side from timing deltas
- Maintains a 30-point history (1 minute at 2s intervals)


