AI导哈

MCP服务器聚合平台

一个基于Next.js构建的MCP服务器信息聚合平台，支持标签筛选和实时搜索功能，适用于开发者探索和管理MCP服务器。

  • by saifeiLee
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 saifeilee/mcp-server-hub

使用说明

MCP Server Hub

一个基于 Next.js 构建的模型上下文协议（MCP）服务器信息聚合平台。发现和探索各种 MCP 服务器，支持标签筛选和实时搜索功能。

项目基于cursor开发，对话记录如下：

📸 项目演示

✨ 功能特性

  • 🎯 智能筛选 - 基于标签的多维度筛选系统
  • 🔍 实时搜索 - 支持按名称、描述、标签实时搜索
  • 📱 响应式设计 - 完美适配桌面端和移动端
  • 🌓 暗色主题 - 支持明暗主题自动切换
  • ⚡ 高性能 - 基于 Next.js 15 和 TailwindCSS 构建
  • 🏗️ 分层架构 - 良好的代码组织和可扩展性

🚀 快速开始

环境要求

  • Node.js 18+
  • npm、yarn、pnpm 或 bun

安装依赖

npm install
# 或
yarn install
# 或
pnpm install
# 或
bun install

启动开发服务器

npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

启动后打开 http://localhost:3000 查看应用。

构建生产版本

npm run build
npm start

🕷️ 数据爬虫

本项目使用 Python 爬虫获取 MCP 服务器数据作为基础数据源。

爬虫功能

  • 自动抓取 MCP 服务器信息
  • 数据清洗和格式化
  • 生成标准化的 JSON 数据

使用方法

详细的爬虫使用说明请参考：crawler/readme.md

cd crawler
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt
python scraper.py

生成的数据文件：crawler/data.json

🏗️ 项目架构

mcpserver-hub/
├── src/
│   ├── app/                 # Next.js 应用路由
│   │   ├── layout.tsx       # 根布局组件
│   │   ├── page.tsx         # 主页面
│   │   └── globals.css      # 全局样式
│   ├── components/          # 可复用组件
│   │   ├── MCPServerCard.tsx    # 服务器卡片组件
│   │   ├── SearchBar.tsx        # 搜索栏组件
│   │   ├── TagFilter.tsx        # 标签筛选组件
│   │   └── MCPServerGrid.tsx    # 服务器网格布局
│   ├── lib/                 # 工具库
│   │   └── api.ts           # API 抽象层
│   └── types/               # TypeScript 类型定义
│       └── mcp.ts           # MCP 相关类型
├── crawler/                 # Python 爬虫模块
│   ├── scraper.py           # 爬虫主程序
│   ├── data.json            # 爬取的数据
│   └── requirements.txt     # Python 依赖
├── docs/                    # 文档和图片
└── public/                  # 静态资源

🔧 技术栈

  • 前端框架: Next.js 15 (App Router)
  • 类型系统: TypeScript
  • 样式方案: TailwindCSS 4
  • 状态管理: React Hooks
  • 数据来源: 本地 JSON (可扩展为 API)
  • 爬虫工具: Python + BeautifulSoup

📊 API 设计

项目采用分层架构设计，API 抽象层便于后续接入真实的 HTTP 接口：

// 当前：基于本地 JSON 数据
MCPApi.getAllMCPServers()
MCPApi.getMCPServersByTags(tags)
MCPApi.searchMCPServers(query)

// 未来：可轻松替换为 HTTP 接口
// const response = await fetch('/api/servers')

🎯 开发路线图

  • [x] 基础 MCP 服务器列表展示
  • [x] 标签筛选功能
  • [x] 实时搜索功能
  • [x] 响应式设计
  • [x] 暗色主题支持
  • [ ] 服务器详情页面
  • [ ] 用户收藏功能
  • [ ] 后端 API 接口
  • [ ] 数据库集成
  • [ ] 用户认证系统

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🔗 相关链接

📞 联系方式

如有问题或建议，请通过以下方式联系：

  • 创建 Issue
  • 发起 Discussion
  • 提交 Pull Request

⭐ 如果这个项目对你有帮助，请给我们一个 Star！

相关 MCP