Mcp Base

MCP Base - Model Context Protocol ディレクトリ

MCP Base は、Model Context Protocol（MCP）エコシステムに特化した、コミュニティ主導のウェブプラットフォームです。MCP サーバーやクライアントを見つけ、共有し、整理するための一元的なディレクトリとして機能します。

機能

MCP サーバーとクライアントのディレクトリ

• MCP サーバーとクライアントを幅広く収録
• カテゴリ別の絞り込みと検索
• GitHub のスター数による並べ替え
• AI による分析と説明

スマートなカテゴリ分類

• 60 以上の専門カテゴリ
• AI モデルの統合、コンテキスト管理、エージェントフレームワーク
• ナレッジ管理、開発者ツール、セキュリティソリューション
• 業界別および技術分野別のカテゴリ

最新のウェブ技術

• Next.js 14 App Router
• TypeScript による型安全性
• Tailwind CSS によるモダンなデザイン
• レスポンシブ対応、モバイルフレンドリー

ブログとコンテンツ管理

• MCP 関連のブログ記事
• Markdown 対応のコンテンツエディター
• SEO 最適化
• 読了時間の自動計算

安全なデータベース管理

• Supabase PostgreSQL
• 行レベルセキュリティ（RLS）
• リアルタイム更新
• 自動バックアップ

プロジェクト構成

mcp-base/
├── app/                     # Next.js App Router
│   ├── (legal)/            # Legal pages (privacy, terms)
│   ├── blog/               # Blog pages and slug routing
│   ├── clients/            # MCP client directory
│   ├── servers/            # MCP server directory
│   ├── globals.css         # Global styles
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Homepage
│   └── providers.tsx       # Context providers
├── backend/                # Backend logic
│   ├── queries/            # Supabase queries
│   │   ├── blog.ts         # Blog CRUD operations
│   │   ├── clients.ts      # Client data
│   │   └── servers.ts      # Server data
│   ├── sql/                # Database schema
│   ├── supabase/           # Supabase configuration
│   └── types/              # TypeScript type definitions
├── components/             # React components
│   ├── core/               # Core application components
│   ├── layout/             # Layout components
│   ├── magicui/            # Custom UI components
│   └── ui/                 # Shadcn/ui components
├── data/                   # Static data files
│   ├── categories.ts       # Category definitions
│   └── faqs.ts             # FAQ data
└── helpers/                # Helper functions
    └── estimateReadingTime.ts

インストール

前提条件

• Node.js 18+
• npm または yarn
• Supabase アカウント

1. リポジトリをクローンする

git clone https://github.com/berkayderin/mcp-base.git
cd mcp-base

2. 依存関係をインストールする

npm install
# or
yarn install

3. 環境変数を設定する

.env.local ファイルを作成します。

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

4. データベースをセットアップする

# Run the SQL files in backend/sql/ in Supabase SQL editor
# 1. 001-repo.sql - Main table structure
# 2. 002-blog.sql - Blog tables

5. 開発サーバーを起動する

npm run dev
# or
yarn dev

ブラウザーで http://localhost:3000 を開きます。

データベーススキーマ

メインテーブル

servers テーブル

- id (bigint): GitHub repo ID
- name (text): Repository name
- full_name (text): Full repository name (owner/repo)
- html_url (text): GitHub URL
- description (text): Description
- language (text): Programming language
- stars (integer): Star count
- categories (text[]): Category array
- ai_analysis (text): AI analysis
- slug (text): URL slug
- is_active (boolean): Active status

clients テーブル

• servers テーブルと同じ構成
• MCP クライアント専用

blog_posts テーブル

- id (string): UUID
- title (text): Article title
- description (text): Short description
- content (text): Markdown content
- keywords (text[]): Keywords
- slug (text): URL slug
- created_date (timestamp): Creation date

主な機能

検索と絞り込み

• テキスト検索：名前、説明、言語、AI 分析を検索
• カテゴリフィルター：60 以上のカテゴリで絞り込み
• ページネーション：パフォーマンスを最適化したページ移動
• 並べ替え：スター数による自動並べ替え

API エンドポイント

// Server queries
getTopServers(limit: number)
getServersWithPagination(page, pageSize, category)
searchServers(searchQuery, page, pageSize, category)
getServerById(slug)

// Client queries
getTopClients(limit: number)
getClientsWithPagination(page, pageSize, category)
searchClients(searchQuery, page, pageSize, category)
getClientById(slug)

// Blog operations
getAllBlogPosts()
getBlogPostBySlug(slug)

カテゴリシステム

コンテンツは 60 以上の専門カテゴリで整理されています。

• AI/ML：モデル統合、コンテキスト管理、エージェントフレームワーク
• ナレッジ管理：ナレッジベース、ベクトルデータベース、RAG システム
• 開発者ツール：CLI ツール、コード生成、API フレームワーク
• セキュリティ：セキュリティとプライバシー、AI セーフティ、コンプライアンス
• 業界：エンタープライズ、ヘルスケア、金融サービス

UI/UX 機能

デザインシステム

• Shadcn/ui：モダンなコンポーネントライブラリ
• Tailwind CSS：ユーティリティファーストの CSS フレームワーク
• Radix UI：アクセシビリティに配慮したプリミティブコンポーネント
• Lucide Icons：一貫性のあるアイコンシステム

レスポンシブデザイン

• モバイルファーストのアプローチ
• タブレットとデスクトップ向けに最適化
• ダークモード／ライトモードに対応
• アクセシビリティ基準に準拠

パフォーマンス

• Next.js App Router の最適化
• 画像の最適化
• コード分割
• 静的生成（SSG）

開発スクリプト

# Development server
npm run dev

# Production build
npm run build

# Production start
npm run start

# Linting
npm run lint

# Code formatting
npm run format

# Format check
npm run format:check

コントリビューション

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します

MCP サーバー／クライアントの追加

• GitHub issue を作成します
• リポジトリ情報を共有します
• カテゴリの提案を記載します
• コミュニティによるレビューをお待ちください

リンク

• ウェブサイト: model-context-protocol.com
• GitHub: github.com/berkayderin/mcp-base
• 課題: GitHub Issues
• ディスカッション: GitHub Discussions

謝辞

• Anthropic - MCP プロトコルの開発
• Next.js - React フレームワーク
• Supabase - バックエンドインフラストラクチャ
• Tailwind CSS - CSS フレームワーク
• MCP コミュニティ - 継続的な貢献とフィードバック

---

注: このプロジェクトはコミュニティ主導であり、Anthropic とは公式な関係はありません。MCP プロトコルの詳細については、Anthropic の公式ドキュメントをご覧ください。