ext-apps/examples/system-monitor-server at main · modelcontextprotocol/ext-apps · GitHub
https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/system-monitor-server • 290 KB fetched Open original page
ext-apps/examples/system-monitor-server at main · modelcontextprotocol/ext-apps · GitHub
Skip to content
Navigation Menu
Sign in Appearance settings
* Platform
* AI CODE CREATION
* GitHub Copilot Write better code with AI
* GitHub Copilot app Direct agents from issue to merge
* MCP Registry Integrate external tools
* DEVELOPER WORKFLOWS
* Actions Automate any workflow
* Codespaces Instant dev environments
* Issues Plan and track work
* Code Review Manage code changes
* Code Quality Enforce quality at merge
* APPLICATION SECURITY
* GitHub Advanced Security Find and fix vulnerabilities
* Code security Secure your code as you build
* Secret protection Stop leaks before they start
* EXPLORE
* Why GitHub
* Documentation
* Blog
* Changelog
* Marketplace
View all features
* Solutions
* BY COMPANY SIZE
* Enterprises
* Small and medium teams
* Startups
* Nonprofits
* BY USE CASE
* App Modernization
* DevSecOps
* DevOps
* CI/CD
* View all use cases
* BY INDUSTRY
* Healthcare
* Financial services
* Manufacturing
* Government
* View all industries
View all solutions
* Resources
* EXPLORE BY TOPIC
* AI
* Software Development
* DevOps
* Security
* View all topics
* EXPLORE BY TYPE
* Customer stories
* Events & webinars
* Ebooks & reports
* Business insights
* GitHub Skills
* SUPPORT & SERVICES
* Documentation
* Customer support
* Community forum
* Trust center
* Partners
View all resources
* Open Source
* COMMUNITY
* GitHub Sponsors Fund open source developers
* PROGRAMS
* Security Lab
* Maintainer Community
* GitHub Stars
* Archive Program
* REPOSITORIES
* Topics
* Trending
* Collections
* Enterprise
* ENTERPRISE SOLUTIONS
* Enterprise platform AI-powered developer platform
* AVAILABLE ADD-ONS
* GitHub Advanced Security Enterprise-grade security features
* Copilot for Business Enterprise-grade AI features
* Premium Support Enterprise-grade 24/7 support
* Pricing
Search /
Sign in
Sign up Appearance settings
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
Uh oh!
There was an error while loading. Please reload this page .
modelcontextprotocol
/
ext-apps
Public
*
Notifications
You must be signed in to change notification settings
*
Fork
377
*
Star
2.8k
*
Code
*
Issues
124
*
Pull requests
82
*
Discussions
*
Actions
*
Projects
*
Security and quality
0
*
Insights
Additional navigation options
*
Code
*
Issues
*
Pull requests
*
Discussions
*
Actions
*
Projects
*
Security and quality
*
Insights
Files Expand file tree
main
Breadcrumbs
* ext-apps
* / examples
/ system-monitor-server
/
Copy path
Directory actions
More options
More options
Directory actions
More options
More options
Latest commit
History
History
History
main
Breadcrumbs
* ext-apps
* / examples
/ system-monitor-server
/
Copy path
Top
Folders and files
Name Name Last commit message
Last commit date
parent directory
..
src
src
.gitignore
.gitignore
README.md
README.md
grid-cell.png
grid-cell.png
main.ts
main.ts
mcp-app.html
mcp-app.html
package.json
package.json
screenshot.png
screenshot.png
server.ts
server.ts
tsconfig.json
tsconfig.json
tsconfig.server.json
tsconfig.server.json
vite.config.ts
vite.config.ts
View all files
README.md
Outline
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-host example 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 ontoolresult when the host sends the get-system-info result
* Polls poll-system-stats every 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)
Footer
(c) 2026 GitHub, Inc.
Footer navigation
*
Terms
*
Privacy
*
Security
*
Status
*
Community
*
Docs
*
Contact
*
Manage cookies
*
Do not share my personal information
You can’t perform that action at this time.
Links found on this page
- Skip to content [direct]
- Sign in [direct]
- GitHub Copilot Write better code with AI [direct]
- GitHub Copilot app Direct agents from issue to merge [direct]
- MCP Registry Integrate external tools [direct]
- Actions Automate any workflow [direct]
- Codespaces Instant dev environments [direct]
- Issues Plan and track work [direct]
- Code Review Manage code changes [direct]
- Code Quality Enforce quality at merge [direct]
- GitHub Advanced Security Find and fix vulnerabilities [direct]
- Code security Secure your code as you build [direct]
- Secret protection Stop leaks before they start [direct]
- Why GitHub [direct]
- Documentation [direct]
- Blog [direct]
- Changelog [direct]
- Marketplace [direct]
- View all features [direct]
- Enterprises [direct]
- Small and medium teams [direct]
- Startups [direct]
- Nonprofits [direct]
- App Modernization [direct]
- DevSecOps [direct]
- DevOps [direct]
- CI/CD [direct]
- View all use cases [direct]
- Healthcare [direct]
- Financial services [direct]
- Manufacturing [direct]
- Government [direct]
- View all industries [direct]
- View all solutions [direct]
- AI [direct]
- Software Development [direct]
- DevOps [direct]
- Security [direct]
- View all topics [direct]
- Customer stories [direct]
- Events & webinars [direct]
- Ebooks & reports [direct]
- Business insights [direct]
- GitHub Skills [direct]
- Customer support [direct]
- Community forum [direct]
- Trust center [direct]
- Partners [direct]
- View all resources [direct]
- GitHub Sponsors Fund open source developers [direct]
- Security Lab [direct]
- Maintainer Community [direct]
- GitHub Stars [direct]
- Archive Program [direct]
- Topics [direct]
- Trending [direct]
- Collections [direct]
- Copilot for Business Enterprise-grade AI features [direct]
- Premium Support Enterprise-grade 24/7 support [direct]
- Pricing [direct]
- Sign up [direct]
- modelcontextprotocol [direct]
- ext-apps [direct]
- Notifications [direct]
- Issues
124 [direct]
- Pull requests
82 [direct]
- Discussions [direct]
- Actions [direct]
- Projects [direct]
- Security and quality
0 [direct]
- Insights [direct]
- ext-apps [direct]
- examples [direct]
- History [direct]
- src [direct]
- .gitignore [direct]
- README.md [direct]
- grid-cell.png [direct]
- main.ts [direct]
- mcp-app.html [direct]
|
|