MCP分析仪表板
用于模型上下文协议（MCP）服务器统计的单页分析仪表板。使用Next.js、React和Recharts构建。
特性
- 时间序列图：使用交互式图表可视化MCP服务器随时间的计数
- 服务器类型筛选：按本地服务器、远程服务器或两者筛选
- 时间粒度：在每小时、每日、每周和每月视图之间切换
- 主题支持：通过偏好持久性在浅色和深色主题之间切换
- 实时更新：数据反映了最新的可用快照（通过GitHub Actions每小时更新一次）
入门指南
先决条件
- 已安装Node.js 18+
- npm或yarn包管理器
安装
- 安装依赖项：
npm install- 运行开发服务器：
npm run dev- 打开 http://localhost:3000 在浏览器中
生产大楼
npm run build这将在中创建静态导出 out/ 可以部署到任何静态托管服务的目录。
项目结构
mcp-analytics-dashboard/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Main dashboard page
│ ├── about/ # About page
│ ├── layout.tsx # Root layout with theme provider
│ └── globals.css # Global styles
├── components/ # React components
│ ├── charts/ # Chart components
│ ├── filters/ # Filter components
│ ├── theme/ # Theme components
│ └── layout/ # Layout components
├── lib/ # Business logic
│ ├── api/ # API client
│ ├── utils/ # Utility functions
│ └── types/ # TypeScript types
├── public/ # Static assets
│ └── data/ # Analytics data files
└── .github/ # GitHub Actions workflows
└── workflows/ # Data aggregation workflow数据聚合
分析数据通过GitHub Actions每小时汇总一次。工作流程：
- 从MCP注册表API获取所有服务器
- 对每台服务器进行分类（本地/远程/两者/未知）
- 创建具有计数的快照
- 验证数据完整性
- 将数据存储在
public/data/analytics-latest.json
重要：数据聚合使用UTC时区进行一致性。看 UTC时区处理 了解详情。
文档
发展
运行测试
npm test代码检查
npm run lint部署
该应用程序已配置为静态导出，可以部署到：
- 维塞尔
- Netlify
- GitHub页面
- 任何静态托管服务
只需奔跑 npm run build 并部署 out/ 目录。
许可证
麻省理工学院