AI导哈

MCP 服务器管理平台

MCP Hub 是一个用于发现、评估和集成 MCP 服务器的平台，适用于 AI 应用程序的开发和部署。

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

使用说明

MCP集线器

您通往模型上下文协议生态系统的门户。为您的AI应用程序发现、评估和集成MCP服务器。

特性

  • 认证：使用GitHub OAuth进行Supabase身份验证
  • 仪表盘：管理已安装的服务器和操作
  • 实时监控：健康指标、日志和图表
  • 配置生成器：Claude、Cursor和Windsurf的导出配置
  • 状态生命周期模拟：待定→ 安装→ 跑步
  • 服务器注册表：搜索和筛选可用服务器
  • 类型安全数据：Zod验证了JSON数据层，完全支持TypeScript
  • 响应式用户界面：使用Next.js 16、Tailwind CSS v4和shadcn/ui构建

技术栈

  • 框架：Next.js 16（应用路由器）
  • 样式：顺风CSS v4
  • 组件：柚皮（根+尾风）
  • 数据库：使用Prisma ORM的PostgreSQL（Neon）
  • 认证：Supabase认证
  • 状态管理：React查询（TanStack查询）
  • 图表：Recharts
  • 动画：帧运动
  • 验证：Zod用于运行时类型检查
  • 语言：TypeScript 5
  • 包管理器：npm

入门指南

先决条件

  • Node.js 20+
  • npm或pnpm

安装

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

# Install dependencies
npm install

# Start development server
npm run dev

打开 http://localhost:3000 在您的浏览器中。

环境变量

DATABASE_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

为生产而建

npm run build

项目结构

mcp-hub/
├── app/
│   ├── (dashboard)/        # Dashboard layout group
│   │   ├── dashboard/      # Overview page
│   │   ├── registry/       # Server browser
│   │   ├── monitor/        # Health monitoring
│   │   └── config/         # Config generator
│   ├── api/                # API routes
│   │   ├── installations/  # CRUD + lifecycle
│   │   ├── health/         # Health metrics
│   │   └── config/         # Config generation
│   ├── servers/[id]/       # Server detail pages
│   ├── login/              # Auth pages
│   └── page.tsx            # Landing page
├── components/
│   ├── dashboard/          # Dashboard components
│   ├── config/             # Config manager
│   ├── monitor/            # Monitoring UI
│   └── ui/                 # shadcn components
├── lib/                    # Utilities + lifecycle simulator
├── prisma/                 # Database schema
└── data/servers.json       # Static server data

数据层

服务器存储在 data/servers.json 通过Zod模式实现完全类型安全。

模式（lib/schemas.ts）

const ServerSchema = z.object({
  id: z.string(),
  name: z.string(),
  description: z.string(),
  author: z.string(),
  authorUrl: z.string().url().optional(),
  tags: z.array(ServerTagSchema),
  githubUrl: z.string().url(),
  npmPackage: z.string().optional(),
  downloads: z.string(),
  version: z.string(),
  license: z.string(),
  tools: z
    .array(
      z.object({
        name: z.string(),
        description: z.string(),
      })
    )
    .optional(),
})

可用标签

  • official -官方Anthropic服务器
  • filesystem -文件系统操作
  • github -GitHub集成
  • database -数据库连接器
  • postgres, sqlite -特定数据库
  • search, web -网络搜索功能
  • browser, automation -浏览器自动化
  • api -API集成
  • ai, tools, cloud -其他类别

数据访问函数（lib/Data.ts）

getAllServers() // Get all servers
getServerById(id) // Get single server
getAllTags() // Get unique tags
getServersByTag(tag) // Filter by tag
searchServers(query) // Search by text

代码质量

# Format code with Prettier
npm run format

# Check formatting
npm run format:check

# Run ESLint
npm run lint

# Type check
npm run type-check

预分级配置

  • 没有分号
  • 单引号
  • 100字符线宽
  • 顺风CSS类排序

添加新服务器

  1. 编辑 data/servers.json
  2. 按照架构添加服务器对象
  3. 跑 npm run type-check 验证
  4. 跑 npm run format 格式化

例子：

{
  "id": "my-server",
  "name": "My MCP Server",
  "description": "Does something useful",
  "author": "myusername",
  "tags": ["api", "tools"],
  "githubUrl": "https://github.com/...",
  "downloads": "1k+",
  "version": "1.0.0",
  "license": "MIT"
}

路线图

  • [x] 任务1：UI基础
  • [x] 任务2:JSON数据层
  • [x] 任务3：服务器详细信息页面
  • [x] 任务4：搜索功能
  • [x] 任务5：提交服务器表单（部分完成，稍后可以添加）

许可证

麻省理工学院

免责声明

与Anthropic无关。MCP是Anthropic的商标。

DB种子后触发部署

相关 MCP