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进行性能优化

1. TypeScript集成

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

1. API集成

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

1. 数据管理

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

1. 现代工具

- 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

🤝 贡献

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

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

📄 许可证

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

🙏 致谢

• 模型上下文协议 -对于令人敬畏的协议
• mcpservers.org -已建立的MCP服务器目录
• shadcn/ui -为了美丽的组件库
• Supabase -对于后端基础设施

📧 联系

Abhinav美国

• github： @阿比纳夫-SU
• 项目： MCP探索中心

______________________________________________________________________

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