MCP系统监视器

一个全面的实时系统监控解决方案，使用Python MCP（模型上下文协议）服务器和React TypeScript仪表板构建。采用JSON-RPC 2.0协议的WebSocket通信功能，用于实时监控CPU、内存、磁盘使用情况、进程和系统日志。

特性

MCP服务器（Python）

实时系统监控：使用psutil跟踪CPU、内存和磁盘使用情况
流程管理：通过CPU/内存使用情况监控顶级进程，并提供详细的进程信息
智能日志记录：自动记录系统事件，包括严重级别和文件轮换
WebSocket通信：使用JSON-RPC 2.0协议的高性能实时数据流
警报系统：可配置阈值，自动生成系统资源过载警报
后台任务：异步系统监控，有效利用资源

React仪表板（TypeScript）

实时系统概述：使用Recharts库的交互式实时图表和仪表
进程监视器：具有CPU/内存使用详细信息的顶级进程的可排序表视图
日志查看器：具有实时更新、搜索和过滤功能的彩色编码日志条目
警报通知：用于即时系统过载通知的视觉警报横幅系统
暗/亮主题切换：具有持久主题切换和系统偏好检测的专业用户界面
响应式设计：完全响应的Tailwind CSS设计，针对桌面和移动设备进行了优化
实时更新：基于WebSocket的实时数据更新，带有连接状态指示器

建筑

┌─────────────────┐    WebSocket     ┌─────────────────┐
│   React         │ ◄──────────────► │   Python MCP    │
│   Dashboard     │   JSON-RPC 2.0   │    Server       │
│  (TypeScript)   │   ws://8765      │  (AsyncIO)      │
└─────────────────┘                  └─────────────────┘
         │                                    │
    ┌────▼────┐                          ┌───▼────┐
    │Tailwind │                          │ psutil │
    │Recharts │                          │aiofiles│
    │ Lucide  │                          │        │
    └─────────┘                          └────────┘

技术栈

后端（Python）

WebSocket服务器: websockets 带有async/await的库
系统监控: psutil 用于系统度量
协议：JSON-RPC 2.0用于结构化通信
日志记录: aiofiles 用于异步文件操作
后台任务：asyncio用于并发监控

前端（React TypeScript）

框架：使用TypeScript创建React应用程序
样式：支持暗模式的顺风CSS v3
图表：交互式数据可视化技术
图标：Lucide React用于一致的图像
状态管理：用于主题管理的React Context API
WebSocket客户端：带有JSON-RPC 2.0的本机WebSocket API

此自定义MCP实现的工作原理

什么是MCP（模型上下文协议）？

模型上下文协议（MCP）是将AI助手连接到数据源和工具的开放标准。该项目实现了 自定义MCP服务器 专门为系统监控而设计，展示了MCP如何扩展到传统的AI助手用例之外。

我们的定制MCP架构

1. MCP服务器核心(`server/jsonrpc_handler.py`)

# Custom JSON-RPC 2.0 implementation with MCP-style method registration
class JSONRPCHandler:
    def __init__(self):
        self.methods = {}
        self.subscriptions = {}
    
    def register_method(self, name, handler):
        self.methods[name] = handler
    
    def register_subscription(self, name, handler):
        self.subscriptions[name] = handler

主要特点：

方法注册：系统监控功能的动态注册
计时制：实时数据流用于实时更新
错误处理：强大的JSON-RPC 2.0错误响应
异步支持：非阻塞操作的完全异步集成

2. 系统监控集成(`server/system_monitor.py`)

# Real-time system metrics collection using psutil
class SystemMonitor:
    async def get_system_stats(self):
        return {
            "cpu": psutil.cpu_percent(interval=1),
            "memory": psutil.virtual_memory()._asdict(),
            "disk": psutil.disk_usage('/')._asdict()
        }

MCP方法绑定：

system.get_stats → 实时CPU、内存、磁盘指标
system.get_processes → 运行进程信息
logs.get_recent → 系统日志检索
alerts.check → 基于阈值的警报

3. WebSocket通信层(`server/websocket_server.py`)

# WebSocket server with JSON-RPC 2.0 protocol
class MCPWebSocketServer:
    async def handle_client(self, websocket, path):
        async for message in websocket:
            request = json.loads(message)
            response = await self.rpc_handler.handle_request(request)
            await websocket.send(json.dumps(response))

协议流程：

客户端连接：React仪表板通过WebSocket连接
方法请求：JSON-RPC 2.0系统数据请求
订阅管理：通过订阅模式实时更新
错误处理：标准化错误响应

4. React客户端集成(`dashboard/src/services/MCPWebSocketService.ts`)

// MCP client with automatic reconnection and subscription management
class MCPWebSocketService {
    async callMethod(method: string, params: any): Promise {
        const request = {
            jsonrpc: "2.0",
            id: this.generateId(),
            method,
            params
        };
        return this.sendRequest(request);
    }
    
    subscribe(method: string, callback: Function): void {
        this.subscriptions.set(method, callback);
    }
}

数据流示例

1.系统度量请求：

// Client → Server
{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "system.get_stats",
    "params": {}
}

// Server → Client  
{
    "jsonrpc": "2.0",
    "id": 1,
    "result": {
        "cpu": 45.2,
        "memory": {"total": 16777216, "used": 8388608},
        "disk": {"total": 1000000, "used": 500000}
    }
}

2.实时订阅：

// Client subscribes to live updates
{
    "jsonrpc": "2.0",
    "id": 2,
    "method": "subscribe",
    "params": {"event": "system.stats", "interval": 2000}
}

// Server sends periodic updates
{
    "jsonrpc": "2.0",
    "method": "system.stats",
    "params": {"cpu": 47.1, "memory": {...}, "timestamp": "2025-09-15T10:30:00Z"}
}

为什么这种MCP设计有效

标准化协议JSON-RPC 2.0确保兼容性和可扩展性
实时能力：用于实时监控的WebSocket+订阅模型
模块化架构：易于添加新的监控功能
类型安全：前端完全集成TypeScript
差错恢复：强大的错误处理和自动重新连接
演出：非阻塞操作全程异步/等待

该实现展示了如何应用MCP原理来创建具有实时功能的专用监控工具，超越传统的人工智能助手集成，创建强大的系统管理工具。

项目结构

MCP/
├── server/                      # Python MCP Server
│   ├── __init__.py
│   ├── system_monitor.py        # System stats collection with psutil
│   ├── log_manager.py           # Async logging with file rotation
│   ├── jsonrpc_handler.py       # JSON-RPC 2.0 protocol implementation
│   └── websocket_server.py      # WebSocket server with client management
├── dashboard/                   # React TypeScript Dashboard
│   ├── src/
│   │   ├── components/          # React components
│   │   │   ├── SystemOverview.tsx    # System stats with charts
│   │   │   ├── ProcessesPanel.tsx    # Process monitoring table
│   │   │   ├── LogsPanel.tsx         # Log viewer with filtering
│   │   │   ├── AlertBanner.tsx       # Alert notification system
│   │   │   └── ThemeToggle.tsx       # Dark/light theme switcher
│   │   ├── contexts/
│   │   │   └── ThemeContext.tsx      # Theme management context
│   │   ├── services/
│   │   │   └── MCPWebSocketService.ts # WebSocket client with JSON-RPC
│   │   ├── types/               # TypeScript type definitions
│   │   └── App.tsx              # Main application component
│   ├── public/                  # Static assets
│   ├── package.json             # Node.js dependencies
│   └── tailwind.config.js       # Tailwind CSS configuration
├── logs/                        # System logs directory (auto-created)
├── venv/                        # Python virtual environment (for local dev)
├── main.py                      # Local development server entry point
├── main.docker.py               # Docker container entry point
├── Dockerfile                   # Production Docker build configuration
├── docker-compose.yml           # Docker compose for local testing
├── publish-docker.bat           # Windows Docker publishing script
├── publish-docker.sh            # Linux/Mac Docker publishing script
├── requirements.txt             # Python dependencies
├── .env.example                # Environment template
├── .env                        # Environment configuration (local)
├── .gitignore                  # Git ignore patterns
├── .dockerignore               # Docker ignore patterns
├── LICENSE                     # MIT License
└── README.md                   # This comprehensive guide

快速开始

新功能：简化Docker部署\ 该项目已针对Docker部署进行了优化。所有设置脚本和开发工件都已删除，以获得更干净、生产就绪的代码库。运行系统监视器的最简单方法是通过预构建的Docker映像。

先决条件

Python 3.8+ （用Python 3.9+测试）
Node.js 16+ 使用npm
Git 用于版本控制

安装选项

选项1:Docker（推荐-一个命令设置）

最快的入门方法-无需本地设置：

docker run -d --name mcp-monitor \
  --privileged \
  -p 3000:3000 -p 8765:8765 \
  -v /proc:/host/proc:ro \
  -v /sys:/host/sys:ro \
  babyadi/mcp-system-monitor:v1.1.0

Docker Hub仓库： https://hub.docker.com/r/babyadi/mcp-system-monitor

访问仪表板 http://localhost:3000 -无需额外设置！

Docker要求：

Docker桌面已安装并正在运行
特权模式（系统监控所需）
端口3000和8765可用

选项2：手动安装

克隆存储库

   git clone https://github.com/Baby-adi/MCP---System-tracker.git
   cd MCP

设置Python环境

   # Windows (PowerShell):
   .\venv\Scripts\Activate.ps1

   # Linux/Mac:
   source venv/bin/activate

   # Install dependencies (already included)
   pip install -r requirements.txt

设置React仪表板

   cd dashboard
   npm install

配置环境（可选）

   # Copy and edit environment template
   cp .env.example .env
   # Default values work for local development

运行应用程序（手动安装）

启动MCP服务器 （1号航站楼）

   # From project root with venv activated
   python main.py

服务器在上运行 ws://localhost:8765

启动React仪表板 （2号航站楼）

   cd dashboard
   npm start

仪表板在以下位置打开 http://localhost:3000

查看仪表板

- 打开浏览器 http://localhost:3000 - 实时系统监控应自动启动 - 使用标题中的按钮在亮/暗主题之间切换

配置

环境变量（.env）

变量	默认值	描述
`MCP_HOST`	0.0.0.0	WebSocket服务器主机（所有接口均为0.0.0.0）
`MCP_PORT`	8765	WebSocket服务器端口
`LOG_LEVEL`	信息	记录级别（调试、信息、警告、错误、严重）
`STATS_UPDATE_INTERVAL`	2.0	系统统计数据更新频率（秒）
`CPU_ALERT_THRESHOLD`	80.0	CPU使用率警报阈值（%）
`MEMORY_ALERT_THRESHOLD`	90.0	内存使用警报阈值（%）
`DISK_ALERT_THRESHOLD`	95.0	磁盘使用率警报阈值（%）
`PROCESS_MONITOR_LIMIT`	10	要监视的顶级进程数量
`LOG_RETENTION_DAYS`	7天保留日志文件

警报系统

系统会自动监控并生成以下警报：

CPU 使用率 >80%（可配置）
内存使用 >90%（可配置）
磁盘使用 >95%（可配置）
过程异常 （CPU/内存使用率高）

主题系统

浅色模式：专业灯光主题（默认）
深色模式：深色主题，对比度适当
自动检测：首次访问时尊重系统主题偏好
持久性：主题选择保存在本地存储中

API文档

JSON-RPC 2.0方法

系统统计

get_system_stats -获取全面的系统指标

{
  "jsonrpc": "2.0",
  "method": "get_system_stats",
  "id": 1
}

答复：

{
  "jsonrpc": "2.0",
  "result": {
    "timestamp": "2025-09-15T10:30:45.123Z",
    "cpu": {"usage": 25.4, "cores": 8, "frequency": 3200},
    "memory": {"used": 8.2, "total": 16.0, "percent": 51.25},
    "disk": {"used": 250.5, "total": 500.0, "percent": 50.1},
    "uptime": 86400
  },
  "id": 1
}

流程管理

get_processes -按资源使用情况获取顶级进程

{
  "jsonrpc": "2.0",
  "method": "get_processes",
  "params": {
    "limit": 10,
    "sort_by": "cpu"  // or "memory"
  },
  "id": 2
}

日志记录

get_logs -检索已筛选的系统日志

{
  "jsonrpc": "2.0",
  "method": "get_logs",
  "params": {
    "limit": 100,
    "level_filter": "ERROR",  // DEBUG, INFO, WARNING, ERROR, CRITICAL
    "search_term": "memory",
    "hours_back": 24
  },
  "id": 3
}

实时订阅

WebSocket订阅 实时更新：

subscribe_system_stats -实时系统指标（每2秒）
subscribe_alerts -即时警报通知
subscribe_logs -新日志条目出现时

订阅示例：

{
  "jsonrpc": "2.0",
  "method": "subscribe_system_stats",
  "params": {},
  "id": 1
}

发展

添加新功能

系统指标：

扩展 SystemMonitor 类在 server/system_monitor.py
添加新方法 JSONRPCHandler 在……里面 server/jsonrpc_handler.py
更新中的WebSocket处理程序 server/websocket_server.py
在中创建相应的React组件 dashboard/src/components/

UI组件：

在中创建新的TypeScript组件 dashboard/src/components/
添加到主 App.tsx 并在需要时更新路由
使用Tailwind类实现暗模式支持
在中添加正确的TypeScript接口 dashboard/src/types/

代码质量

Python（后端）：

# Install development dependencies
pip install black flake8 pytest pytest-asyncio

# Format code
black server/ main.py

# Lint code  
flake8 server/ main.py

# Run tests
pytest tests/ -v

TypeScript（前端）：

cd dashboard

# Type checking
npm run type-check

# Linting
npm run lint

# Testing
npm test

# Build for production
npm run build

项目依赖项

Python要求(requirements.txt):

psutil>=5.9.0 -系统监控
websockets>=11.0.0 -WebSocket服务器
aiofiles>=23.0.0 -异步文件操作
pydantic>=2.0.0 -数据验证

Node.js依赖关系(dashboard/package.json):

react & react-dom -UI框架
typescript -类型安全
tailwindcss -造型框架
recharts -数据可视化
lucide-react -图标库

安全考虑

地方发展：为了安全起见，WebSocket服务器默认绑定到localhost
无身份验证：当前实施仅用于本地系统监控
日志安全：系统日志可能包含敏感信息-适当的安全访问
环境变量：将敏感配置存储在 .env 文件（未提交到Git）
生产部署：添加身份验证、HTTPS和访问控制以供生产使用

许可证

该项目根据 MIT许可证 -看看许可证文件以获取详细信息。

故障排除

常见问题

WebSocket连接问题

Error: WebSocket connection failed

解决方案：确保MCP服务器正在运行(python main.py)
检查：端口8765未被防火墙阻止
视窗：使用IPv4绑定（服务器自动处理）

GPU监控不工作

Warning: GPU monitoring unavailable

备注：此版本中当前未实现GPU监控
替代：专注于CPU、内存和磁盘监控，以进行全面的系统监督
未来：GPU监控可能会在未来的版本中添加

CPU使用率高

Dashboard consuming high CPU

解决方案：增加 STATS_UPDATE_INTERVAL 在……里面 .env （默认值：2秒）
替代：减少前端的图表数据保留
检查：任务管理器中的后台进程

权限错误（Windows）

PermissionError: Access denied

解决方案：以管理员身份运行终端以完全访问系统
替代：如果没有管理员权限，某些指标可能会受到限制
备注：流程信息需要提升权限

图表未更新

System stats showing but charts frozen

解决方案：检查浏览器控制台是否存在WebSocket错误
修复：刷新页面以重置WebSocket连接
检查：浏览器开发工具中的“网络”选项卡

性能优化

为了降低资源使用率：

集 STATS_UPDATE_INTERVAL=5 更新时间为5秒，而不是2秒
减少 PROCESS_MONITOR_LIMIT=5 监控更少的进程

为了更好的响应：

使用 STATS_UPDATE_INTERVAL=1 1秒更新
增加 PROCESS_MONITOR_LIMIT=20 有关更详细的流程视图
启用调试日志记录： LOG_LEVEL=DEBUG

______________________________________________________________________

MCP System Tracker

快速接入

详细介绍