AI导哈

MCP分析仪表盘

一个用于可视化MCP服务器统计数据的单页分析仪表盘，支持时间序列图表、服务器类型筛选、时间粒度切换和实时更新。

  • by EthanChenGuang
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 EthanChenGuang/mcp-analytics-dashboard

使用说明

MCP分析仪表板

用于模型上下文协议（MCP）服务器统计的单页分析仪表板。使用Next.js、React和Recharts构建。

特性

  • 时间序列图：使用交互式图表可视化MCP服务器随时间的计数
  • 服务器类型筛选：按本地服务器、远程服务器或两者筛选
  • 时间粒度：在每小时、每日、每周和每月视图之间切换
  • 主题支持：通过偏好持久性在浅色和深色主题之间切换
  • 实时更新：数据反映了最新的可用快照（通过GitHub Actions每小时更新一次）

入门指南

先决条件

  • 已安装Node.js 18+
  • npm或yarn包管理器

安装

  1. 安装依赖项：
npm install
  1. 运行开发服务器：
npm run dev
  1. 打开 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每小时汇总一次。工作流程：

  1. 从MCP注册表API获取所有服务器
  2. 对每台服务器进行分类（本地/远程/两者/未知）
  3. 创建具有计数的快照
  4. 验证数据完整性
  5. 将数据存储在 public/data/analytics-latest.json

重要：数据聚合使用UTC时区进行一致性。看 UTC时区处理 了解详情。

文档

发展

运行测试

npm test

代码检查

npm run lint

部署

该应用程序已配置为静态导出，可以部署到：

  • 维塞尔
  • Netlify
  • GitHub页面
  • 任何静态托管服务

只需奔跑 npm run build 并部署 out/ 目录。

许可证

麻省理工学院

相关 MCP