MCP服务器目录浏览工具

一个基于Next.js的应用,用于浏览和搜索MCP服务器,支持AI摘要生成和SEO优化。

  • by Tenosia
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Tenosia/MCP-Server-TS

使用说明

MCP目录

一个Next.js应用程序,为MCP服务器的可浏览目录提供支持。它将元数据存储在Supabase中,通过外部API获取README内容,并使用LLM总结项目。

特性

  • 通过搜索和关键字过滤浏览功能强大的MCP服务器
  • 按类别浏览服务器的类别
  • 包含完整README内容和markdown渲染的项目详细信息页面
  • 通过API提交新的MCP服务器
  • 使用OpenAI从README文件中提取项目元数据的AI摘要
  • 通过站点地图、robots.txt和规范网址提供SEO支持

技术栈

层 技术
框架 Next.js 15,React 19
造型 顺风CSS,Framer Motion
数据库 数据库(PostgreSQL)
AI OpenAI(摘要),Jina AI(URL内容提取)
部署 Cloudflare Pages,Vercel

项目结构

├── app/                    # Next.js App Router
│   ├── (default)/         # Main routes: home, categories, project detail
│   ├── (policy)/          # Privacy policy, Terms of service
│   └── api/               # API routes
├── templates/tailspark/   # UI templates & components
├── models/                # Supabase data access (project, category, user)
├── services/              # Business logic (project parsing, LLM, readers)
├── types/                 # TypeScript definitions
├── pagejson/              # Static content & metadata
└── data/                  # SQL schema (install.sql)

先决条件

  • Node.js v20或更新版本
  • pnpm
  • Supabase账户

快速开始

1.克隆存储库

git clone https://github.com/chatmcp/mcp-directory.git
cd mcp-directory

2.安装依赖项

pnpm install

3.建立数据库

创建一个Supabase项目并在中运行架构 data/install.sql 通过Supabase SQL编辑器。

4.配置环境变量

创建一个 .env 项目根目录中的文件:

# Required — Supabase
SUPABASE_URL="your-supabase-project-url"
SUPABASE_ANON_KEY="your-supabase-anon-key"

# Required — App URL
NEXT_PUBLIC_WEB_URL="http://localhost:3000"

# Optional — AI summarization (for /api/summarize-project)
OPENAI_API_KEY="your-openai-api-key"
OPENAI_BASE_URL="https://api.openai.com/v1"
OPENAI_MODEL="gpt-4o-mini"

5.运行开发服务器

pnpm dev

在浏览器中打开localhost:3000。

脚本

命令 描述
pnpm dev 启动Next.js开发服务器
pnpm watch 从Turbopack开始
pnpm build 生产建设
pnpm start 启动生产服务器
pnpm lint 运行ESLint
pnpm pages:build 为Cloudflare页面构建
pnpm preview 在本地构建和运行Cloudflare页面
pnpm deploy 构建并部署到Cloudflare页面

部署

Cloudflare页面

  1. 添加和配置 wrangler.toml 对于该项目。
  2. 构建和部署:
pnpm deploy

维塞尔

vercel

API

端点 方法 描述
/api/submit-project POST 提交新的MCP项目(JSON正文)
/api/submit-projects POST 提交多个项目
/api/summarize-project POST 触发项目的AI摘要(正文: { "name": "project-name" })
/api/summarize-projects POST 批量汇总