AI导哈

MCP分析工具

一个用于可视化和探索模型上下文协议（MCP）仓库分析数据的全栈Web应用，具有分离的前端和后端架构。

  • by AiymunBhat
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 AiymunBhat/MCP

使用说明

MCP分析仪-全栈应用

A. 美观、全面的web应用程序 用于可视化和探索具有分离的前端和后端架构的模型上下文协议（MCP）存储库分析数据。

🌟 特性

📊 综合分析仪表板

  • 实时统计：工具总数、运输类型、置信度指标
  • 运输分析：详细的协议检测和证据追踪
  • 置信分布：显示刀具检测质量的可视化图表
  • 文件分组：按源文件组织的工具
  • 详细工具卡：每个检测到的工具的完整信息

🎨 高级UI/UX

  • 现代黑暗主题：充满活力的渐变，带有紫色和青色的色调
  • 平滑动画：淡入淡出、幻灯片和微交互
  • 玻璃化效应：磨砂玻璃美学
  • 响应式设计：非常适合台式机、平板电脑和移动设备
  • 交互式图表：视觉置信度分布
  • 智能搜索：具有去抖动功能的实时过滤
  • 高级筛选：按置信度筛选

🔌 强健的后端API

  • RESTful架构：干净、有序的端点
  • 综合数据：统计、分析、搜索功能
  • 错误处理：优雅的错误响应
  • CORS已启用：前端后端集成

🚀 快速开始

先决条件

  • Node.js v14或更高版本
  • npm 或 纱线

安装与运行

1.安装后端依赖关系

cd backend
npm install

2.启动后端服务器

npm start

后端将在上运行 http://localhost:3001

3.开放式前端

只需打开 frontend/index.html 在浏览器中，或使用本地服务器：

cd frontend
# Using Python
python -m http.server 8000

# Or using Node.js http-server
npx http-server -p 8000

然后访问 http://localhost:8000

📁 项目结构

Mcp-Analyzer2/
├── backend/                    # Backend API
│   ├── server.js              # Express server with all endpoints
│   ├── package.json           # Backend dependencies
│   └── node_modules/          # Installed packages
│
├── frontend/                   # Frontend application
│   ├── index.html             # Main HTML file
│   ├── styles.css             # Comprehensive CSS design system
│   └── app.js                 # JavaScript application logic
│
├── Mcp-Analyzer2/             # MCP analyzer data
│   ├── mcp-repo-analyzer/     # Python analyzer tool
│   └── report.json            # Analysis report (115KB)
│
└── README.md                   # This file

🎯 API终点

后端API（端口3001）

GET /api/health

健康检查端点

{
  "status": "ok",
  "timestamp": "2025-11-24T15:30:00.000Z"
}

GET /api/report

返回完整的MCP分析报告

{
  "repo": "https://github.com/...",
  "analysis_time": "2025-11-24T19:27:47.851239",
  "transport": { ... },
  "tools": [ ... ]
}

GET /api/stats

返回聚合统计信息

{
  "totalTools": 50,
  "transportType": "sse",
  "transportConfidence": 0.803,
  "averageConfidence": 0.407,
  "toolsByConfidence": {
    "high": 0,
    "medium": 50,
    "low": 0
  },
  "repository": "https://github.com/...",
  "analysisTime": "2025-11-24T19:27:47.851239"
}

GET /api/analysis

返回文件分组和分布的详细分析

{
  "repository": "https://github.com/...",
  "analysisTime": "2025-11-24T19:27:47.851239",
  "transport": { ... },
  "toolsByFile": { ... },
  "confidenceDistribution": { ... },
  "fileCount": 15,
  "totalEvidence": 600
}

GET /api/tools/search?q=query&confidence=level

搜索和筛选工具

参数：

  • q （可选）：搜索查询字符串
  • confidence （可选）：按置信度筛选(high, medium, low)

例子：

GET /api/tools/search?q=workflow&confidence=medium

GET /api/tools/:name

按名称获取特定工具

{
  "name": "list_workflows",
  "description": "...",
  "confidence": 0.407,
  ...
}

🎨 设计系统

调色板

  • 主要的，重要的：紫色渐变（HSL 260°，90%饱和度）
  • 口音：青色梯度（HSL 180°，80%饱和度）
  • 成功：绿色（#22C55E）
  • 警告：橙色（#FB923C）
  • 错误：红色（#EF4444）
  • 信息：蓝色（#0EA5E9）

排版

  • UI字体：Inter（谷歌字体）
  • 编码字体：JetBrains Mono（谷歌字体）

主要特点

  • 深色主题：现代，赏心悦目
  • 渐变：充满活力，引人注目
  • 动画：光滑、高性能
  • 阴影：深度和标高
  • 玻璃态：现代磨砂玻璃效果

📊 功能分解

概述部分

  • 工具总数
  • 运输类型和信心
  • 平均置信度得分
  • 高质量的工具很重要
  • 源文件计数
  • 证据项目总数

运输分析

  • 协议类型（SSE、stdio等）
  • 检测置信度百分比
  • 完整的证据线索
  • 详细说明

置信分布

  • 可视化柱状图
  • 5个置信区间（0-20%、20-40%等）
  • 每个范围的刀具数量
  • 动画条形图

按文件列出的工具

  • 按源文件分组
  • 可扩展/可折叠部分
  • 每个文件的工具计数
  • 快速信心概述

详细工具卡

  • 工具名称和描述
  • 信心徽章
  • 源文件位置
  • 参数计数
  • 解释
  • 代码片段
  • 输入/输出模式
  • 有效载荷形状
  • 证据项目

搜索和筛选

  • 实时搜索（300ms去抖动）
  • 多字段搜索（名称、描述、文件名）
  • 置信度过滤
  • 即时结果更新

🛠️ 使用的技术

后端

  • Node.js：JavaScript运行时
  • Express.js：Web框架（v4.18.2）
  • 跨域资源共享：跨源资源共享（v2.8.5）

前端

  • HTML5：语义标记
  • CSS3：具有自定义特性的现代风格
  • 普通JavaScript：无框架依赖关系
  • 谷歌字体：Inter&JetBrains单声道

🎯 性能优化

  • 取消公告搜索：300ms延迟，实现高效滤波
  • 延迟渲染：交错动画，加载流畅
  • 高效DOM：尽量减少回流和重新涂漆
  • CSS动画：GPU加速转换
  • 优化资产：最小依赖性

🔒 安全

  • 输入消毒：所有用户输入的HTML转义
  • CORS配置：受控的跨来源访问
  • 错误处理：错误消息中没有敏感数据
  • 安全的JSON解析：正确的错误处理

📱 响应式设计

  • 桌面：全功能体验（最大宽度1400px）
  • 药片，平板：优化布局（768像素-1024像素）
  • 移动：触摸友好界面（<768px）

🐛 故障排除

后端无法启动

  • 确保已安装Node.js： node --version
  • 检查端口3001是否可用
  • 安装依赖项： cd backend && npm install

前端无法连接到后端

  • 验证后端是否在端口3001上运行
  • 检查浏览器控制台是否存在CORS错误
  • 确保中的API_BASE app.js 指向正确的URL

无数据显示

  • 验证 report.json 存在于 Mcp-Analyzer2/ 文件夹
  • 检查后端控制台是否存在文件读取错误
  • 确保JSON文件有效

📝 许可证

MIT许可证-您可以自由地将此项目用于您自己的目的。

🤝 贡献

欢迎投稿！请随时提交问题或拉取请求。

📧 支持

如有疑问或问题，请在存储库上打开问题。

内置于❤️ 使用现代网络技术

MCP分析器-使模型上下文协议分析美观且易于访问

相关 MCP