AI导哈

MCP服务器发现工具

一个用于发现和探索Model Context Protocol (MCP)服务器的全栈Web应用，支持实时搜索、高级过滤和数据集成。

  • by Abhinav-SU
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Abhinav-SU/mcp-discovery-hub

使用说明

MCP探索中心

一个用于发现和探索模型上下文协议（MCP）服务器的现代全栈web应用程序。作为一个学习项目，用于演示React、TypeScript、Supabase集成和现代web开发实践。

🎯 项目概述

该项目是作为 作品集/学习练习 探索：

  • 使用TypeScript进行现代React开发
  • 基于组件的shadcn/ui架构
  • GitHub API集成和速率限制
  • Web抓取和数据解析
  • Supabase后端集成
  • 采用Tailwind CSS的响应式设计

备注：这是一个学习项目。要查找生产MCP服务器，请访问 mcpservers.org

✨ 特性

🔍 搜索与发现

  • 在300多台MCP服务器上进行实时搜索
  • 按13+个类别进行高级筛选
  • 按流行度、评级或字母顺序排序
  • modals中的详细服务器信息

📊 数据集成

  • 从官方MCP README解析的全面数据
  • 实时GitHub星数（缓存1小时到期）
  • GitHub API的智能速率限制
  • 离线时回退到本地数据

🎨 现代用户界面

  • 采用Tailwind CSS的美丽、灵敏的设计
  • 由shadcn/ui驱动的组件库
  • 流畅的动画和过渡
  • 黑暗模式就绪

🔧 技术特性

  • TypeScript用于类型安全
  • React钩子用于状态管理
  • Supabase就绪（可选后端）
  • GitHub API与缓存的集成
  • 自动数据抓取脚本

🚀 技术栈

  • 前端：React 18、TypeScript、Vite
  • 样式：顺风CSS、shadcn/ui组件
  • 后端：Supabase（可选）
  • 应用程序编程接口：GitHub REST API，Octokit
  • 数据：具有自动抓取功能的JSON文件
  • 构建：Vite带热模块更换

📦 安装

# Clone the repository
git clone https://github.com/Abhinav-SU/mcp-discovery-hub.git
cd mcp-discovery-hub

# Install dependencies
npm install

# Create .env.local file (optional)
cp .env.example .env.local

# Start development server
npm run dev

🔑 环境变量

创建一个 .env.local 根目录中的文件：

# Optional: For higher GitHub API rate limits
VITE_GITHUB_TOKEN=your_github_personal_access_token

# Optional: For Supabase integration
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

📊 数据源

该项目包括用于抓取和解析MCP服务器数据的脚本：

自动报废

# Parse official MCP README (requires downloads/README.md)
node scripts/parse-readme-smart.js

# Or use the original GitHub search scraper
node scripts/scrape-mcps.js

数据文件

  • src/data/mcps-comprehensive.json -300台精选服务器（应用程序使用）
  • src/data/mcps-all.json -1299+台服务器（参考）
  • src/data/mcpServers.ts -原始样本数据

🏗️ 项目结构

mcp-discovery-hub/
├── src/
│   ├── components/        # React components
│   │   ├── ui/           # shadcn/ui components
│   │   ├── MCPServerCard.tsx
│   │   ├── SearchBar.tsx
│   │   └── ...
│   ├── pages/            # Page components
│   │   └── Index.tsx
│   ├── lib/              # Utilities
│   │   ├── github.ts     # GitHub API integration
│   │   └── supabase.ts   # Supabase client
│   ├── hooks/            # Custom React hooks
│   │   └── useMCPServers.ts
│   ├── data/             # Data files
│   │   └── mcps-comprehensive.json
│   └── main.tsx          # Entry point
├── scripts/              # Data scraping scripts
│   ├── parse-readme-smart.js
│   └── scrape-mcps.js
├── public/               # Static assets
└── README.md

🎨 关键组件

MCP服务器卡

显示单个MCP服务器信息，包括：

  • 服务器名称、描述、类别
  • GitHub之星（带实时获取选项）
  • 验证徽章
  • 突出显示的服务器的特色功能区

搜索条

通过取消抖动在服务器名称和描述之间进行实时搜索。

类别筛选器

按13个以上类别过滤服务器，包括数据库、开发、人工智能、云等。

使用MCPServers挂钩

定制挂钩：

  • 从Supabase获取（配置时）
  • 返回到本地JSON数据
  • 处理加载和错误状态

📈 我学到了什么

构建这个项目教会了我：

  1. React最佳实践

    • 组件组成和可重用性
    • 用于业务逻辑的自定义挂钩
    • 使用useMemo进行性能优化

  2. TypeScript集成

    • 类型安全组件支柱
    • 数据模型的接口定义
    • 钩子中的泛型类型用法

  3. API集成

    • GitHub API速率限制策略
    • 使用本地存储进行缓存
    • 错误处理和回退

  4. 数据管理

    • 使用Node.js进行Web抓取
    • 解析markdown文档
    • 数据规范化和分类

  5. 现代工具

    • Vite快速发展
    • Node.js中的ES模块
    • TypeScript配置

🔍 挑战与解决方案

挑战1：GitHub API速率限制

解决方案：使用localStorage实现了智能缓存，并优先考虑重要服务器。

挑战2：解析1300多台服务器

解决方案：创建了一种分阶段的方法——首先（快速）解析所有服务器，然后仅获取顶级服务器的GitHub数据。

挑战3：数据完整性

解决方案：验证所有GitHub URL，提取真实描述，并自动对服务器进行分类。

🚀 部署

该项目已准备好在以下位置部署：

  • 维塞尔: vercel deploy
  • Netlify: netlify deploy
  • GitHub 页面：使用构建 npm run build，部署 dist/ 文件夹

📝 脚本

# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run preview          # Preview production build

# Data Scraping
node scripts/parse-readme-smart.js   # Parse official README
node scripts/scrape-mcps.js          # GitHub search scraper

🤝 贡献

这是一个个人学习项目，但请随时：

  • 把它叉起来做你自己的实验
  • 未解决的错误或建议问题
  • 将其用作项目的参考

📄 许可证

麻省理工学院许可证-欢迎使用此项目进行学习或参考。

🙏 致谢

📧 联系

Abhinav美国

内置于❤️ 作为一个探索现代web开发的学习项目。

相关 MCP