当前位置：首页 > news >正文

use-mcp实战：构建一个完整的MCP服务器监控面板

news 2026/6/5 4:56:25

use-mcp实战：构建一个完整的MCP服务器监控面板

【免费下载链接】use-mcp项目地址: https://gitcode.com/gh_mirrors/use/use-mcp

MCP（Modular Control Plane）服务器监控面板是管理和监控分布式服务器集群的重要工具。本文将带你从零开始，使用use-mcp框架构建一个功能完善的MCP服务器监控面板，即使你是新手也能轻松掌握。

为什么选择use-mcp构建监控面板

use-mcp是一个轻量级但功能强大的框架，特别适合构建服务器管理工具。它提供了：

模块化架构：通过组件化方式快速搭建界面
内置服务器连接：简化与MCP服务器的通信流程
响应式设计：自动适配不同设备屏幕尺寸
丰富的UI组件：提供多种预构建的界面元素

准备工作：环境搭建

一键安装步骤

首先确保你的开发环境中已安装Node.js和pnpm。然后克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/use/use-mcp cd use-mcp pnpm install

项目结构概览

use-mcp项目的核心结构如下：

use-mcp/ ├── examples/ # 示例应用 │ ├── chat-ui/ # 聊天界面示例 │ ├── inspector/ # 检查器工具 │ └── servers/ # 服务器实现 ├── src/ # 核心源代码 │ ├── auth/ # 认证相关 │ ├── react/ # React组件 │ └── utils/ # 工具函数 └── test/ # 测试文件

我们主要关注examples/inspector/和src/react/目录，这两个目录包含了构建监控面板所需的核心组件。

构建监控面板的核心步骤

1. 创建基础界面框架

首先，我们需要创建一个基础的界面框架。可以参考examples/inspector/src/App.tsx文件，该文件提供了一个简单的单页应用结构：

// 基础应用结构示例（来自examples/inspector/src/App.tsx） import { useState } from 'react'; import McpServers from './components/McpServers'; import './index.css'; function App() { const [darkMode, setDarkMode] = useState(false); return ( <div className={darkMode ? 'dark' : ''}> <div className="min-h-screen bg-gray-50 dark:bg-gray-900"> <header className="bg-white dark:bg-gray-800 shadow"> <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-6"> <h1 className="text-3xl font-bold text-gray-900 dark:text-white"> MCP Server Inspector </h1> </div> </header> <main> <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-6"> <McpServers /> </div> </main> </div> </div> ); } export default App;

这个基础结构包含了标题栏、主内容区和深色模式支持，我们可以在此基础上扩展监控功能。

2. 实现服务器列表组件

服务器列表是监控面板的基础，我们可以使用examples/chat-ui/src/components/McpServers.tsx组件作为参考。这个组件负责：

显示已配置的MCP服务器列表
提供添加/删除服务器的功能
显示服务器连接状态

核心实现思路是使用useState管理服务器列表状态，使用useEffect处理服务器连接状态更新：

// 服务器列表组件核心逻辑（简化版） const McpServers = () => { const [servers, setServers] = useState<McpServer[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null); useEffect(() => { // 加载服务器配置 loadServers().then(data => { setServers(data); setLoading(false); }).catch(err => { setError('Failed to load servers'); setLoading(false); }); }, []); // 渲染服务器列表... };

3. 添加服务器状态监控功能

要实现服务器状态监控，我们需要定期从服务器获取状态信息。可以使用src/react/useMcp.ts提供的钩子函数来简化与MCP服务器的通信：

// 使用useMcp钩子监控服务器状态 import { useMcp } from '../../../src/react/useMcp'; const ServerMonitor = ({ server }: { server: McpServer }) => { const { data: serverStatus, isLoading, error } = useMcp(server.url, { interval: 5000, // 每5秒更新一次 endpoint: '/status' }); if (isLoading) return <div>Loading status...</div>; if (error) return <div className="text-red-500">Error: {error.message}</div>; return ( <div className="p-4 border rounded-lg"> <h3 className="font-semibold">{server.name}</h3> <p>Status: {serverStatus?.online ? '🟢 Online' : '🔴 Offline'}</p> <p>CPU Usage: {serverStatus?.cpu}%</p> <p>Memory Usage: {serverStatus?.memory}%</p> </div> ); };

4. 实现数据可视化

监控面板通常需要直观的数据展示。虽然项目中没有提供现成的图表组件，但我们可以轻松集成第三方库如Recharts。首先安装依赖：

pnpm add recharts

然后创建一个简单的CPU使用率图表组件：

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; const CpuUsageChart = ({ data }: { data: { time: string; usage: number }[] }) => { return ( <div className="h-64 w-full"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="time" /> <YAxis /> <Tooltip /> <Line type="monotone" dataKey="usage" stroke="#8884d8" activeDot={{ r: 8 }} /> </LineChart> </ResponsiveContainer> </div> ); };

高级功能：告警系统实现

为监控面板添加告警功能可以及时发现服务器异常。我们可以在examples/chat-ui/src/utils/debugLog.ts的基础上扩展，实现一个简单的告警系统：

// 告警系统实现（简化版） import { debugLog } from '../utils/debugLog'; const useServerAlerts = (serverStatus: ServerStatus) => { useEffect(() => { if (!serverStatus) return; // CPU使用率超过80%触发告警 if (serverStatus.cpu > 80) { debugLog(`High CPU usage alert: ${serverStatus.cpu}%`); // 这里可以添加通知逻辑，如浏览器通知或API调用 } // 内存使用率超过90%触发告警 if (serverStatus.memory > 90) { debugLog(`High memory usage alert: ${serverStatus.memory}%`); } }, [serverStatus]); };