Mcphubs

🚀 MCPHubs - モデルコンテキストプロトコルプロジェクトセンター

MCPHubs は、Anthropic の Model Context Protocol (MCP) に関連するプロジェクトを展示するウェブサイトです。このサイトは Next.js を使用して構築され、以下の機能を提供します。

• GitHub から MCP 関連のプロジェクトを検索する
• AI を使用してプロジェクト内容を分析し、MCP との関連性を評価する
• プロジェクトのリストと詳細情報を表示する
• プロジェクトの README 内容と関連分析を表示する

🚀 クイックスタート

MCPHubs は、Next.js を用いて構築された、Anthropic の Model Context Protocol (MCP) 関連プロジェクトを展示するウェブサイトです。以下に、主な機能や技術スタック、ローカル開発方法などを説明します。

✨ 主な機能

• 環境適応型プロキシ: 開発環境では自動的にプロキシを使用して CORS 問題を解決し、本番環境では直接 API を呼び出します。
• GitHub API 統合: MCP 関連のプロジェクトを検索します。
• AI 分析: Google Gemini Pro を使用して、プロジェクトと MCP の関連性を評価します。
• レスポンシブデザイン: あらゆるデバイスサイズに対応します。

📦 インストール

ローカル開発手順

1. リポジトリをクローンします。

git clone https://github.com/yourusername/mcphubs.git
cd mcphubs

2. 依存関係をインストールします。

npm install

3. 環境変数を設定します。 .env.local ファイルを作成し、以下の内容を追加します。

# GitHub API トークン（オプションですが、API レート制限を回避するために推奨）
GITHUB_TOKEN=your_github_token_here

# Google Cloud Vertex AI 設定
GOOGLE_CLOUD_PROJECT=your-project-id
GOOGLE_CLOUD_LOCATION=us-central1
GOOGLE_APPLICATION_CREDENTIALS=./google-credentials.json
VERTEX_LOCATION=us-central1

4. Google Cloud サービスアカウントを設定します。 Google Cloud サービスアカウントの資格情報ファイル（JSON 形式）をプロジェクトのルートディレクトリに配置し、GOOGLE_APPLICATION_CREDENTIALS 環境変数で指定した名前と一致させます。 まだサービスアカウントを持っていない場合は、以下の手順で作成できます。
   • Google Cloud Console にアクセスします。
   • プロジェクトを選択します。
   • "IAM & Admin" > "Service Accounts" に移動します。
   • 新しいサービスアカウントを作成し、必要な権限（Vertex AI 使用者）を付与します。
   • JSON キーファイルを作成してダウンロードします。
   • ファイルをプロジェクトのルートディレクトリに配置します。
5. 開発サーバーを起動します。

./start-dev.sh

6. ブラウザで http://localhost:3001（またはコンソールに表示された他のポート）にアクセスします。

🔧 技術詳細

技術スタック

• Next.js 15
• TypeScript
• Tailwind CSS
• React Icons
• Axios（API リクエスト用）
• Google Cloud Vertex AI（Gemini Pro モデル、AI 分析用）
• React Markdown（README レンダリング用）

プロキシ設定の説明

このプロジェクトは環境適応型のプロキシ設定を持っています。

• 開発環境: API プロキシが自動的に有効になり、ローカル開発時の CORS 問題を解決します。
  • GitHub API: /api/github/* → https://api.github.com/*
  • Vertex AI: /api/vertex/* → https://us-central1-aiplatform.googleapis.com/v1/*
• 本番環境: プロキシは自動的に無効になり、外部 API を直接呼び出します。 この設定は、NODE_ENV 環境変数に基づいて自動的にプロキシの使用を決定するため、手動で切り替える必要はありません。

デプロイ

このプロジェクトは Vercel、Netlify またはその他の Next.js をサポートするプラットフォームにデプロイできます。 デプロイ時には、以下の環境変数を設定する必要があります。

• GITHUB_TOKEN
• GOOGLE_CLOUD_PROJECT
• GOOGLE_CLOUD_LOCATION
• GOOGLE_APPLICATION_CREDENTIALS
• VERTEX_LOCATION クラウドプラットフォームにデプロイする場合は、Google Cloud の資格情報をファイルではなく環境変数として直接設定する必要がある場合があります。

機能概要

• プロジェクト検索: GitHub API を通じて MCP 関連のプロジェクトを検索します。
• AI 分析: Google Gemini Pro を使用して、プロジェクト内容を分析し、MCP との関連性を評価します。
• プロジェクト展示: プロジェクトのリストと詳細情報を表示します。
• README レンダリング: React Markdown を使用して、プロジェクトの README 内容を表示します。

📄 ライセンス

このプロジェクトは MIT ライセンス に準拠しています。