4ca20f21c4* Restructure threejs-server README to match marketing examples - Update title format to "Example: Three.js App" - Constrain screenshot width using table layout - Add Features section with key capabilities - Reorganize Running section with Tool Input subsection - Add Architecture section describing server and app components - Remove implementation-focused sections (WidgetProps, Creating a New Widget) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add bun as devDependency to example packages npm install now automatically installs bun, eliminating the need for separate installation instructions. Removed manual bun install step from customer-segmentation-server README. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add start:http and start:stdio npm scripts to examples For the 6 examples supporting --stdio transport, add explicit scripts: - serve:http / serve:stdio for running the server - start:http / start:stdio for build + serve - start now aliases to start:http for backward compatibility Update READMEs to document both transport options. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Default basic-host SERVERS to localhost:3001/mcp - Change threejs-server default port from 3109 to 3001 for consistency - Add default SERVERS value in basic-host serve.ts - Document SERVERS env var in basic-host README 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Improve Examples section in README Frame the three basic examples as foundational starting points and add a link to the examples directory for additional demo apps. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
57 lines
2.4 KiB
Markdown
57 lines
2.4 KiB
Markdown
# 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.
|
|
|
|
<table>
|
|
<tr>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/01-initial-state.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/01-initial-state.png" alt="Initial state" width="100%"></a></td>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/02-cpu-data-accumulated.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/02-cpu-data-accumulated.png" alt="CPU data accumulated" width="100%"></a></td>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/03-extended-cpu-history.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/system-monitor-server/03-extended-cpu-history.png" alt="Extended CPU history" width="100%"></a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
## 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:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Build and start the server:
|
|
|
|
```bash
|
|
npm run start:http # for Streamable HTTP transport
|
|
# OR
|
|
npm run start:stdio # for stdio transport
|
|
```
|
|
|
|
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/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
|