Mcphubs

🚀 MCPHubs - Model Context Protocol Project Hub

MCPHubs is a website that showcases projects related to Anthropic's Model Context Protocol (MCP). Built with Next.js, it offers the following features:

• Search for MCP-related projects on GitHub.
• Analyze project content using AI to evaluate its relevance to MCP.
• Display project lists and detailed information.
• Show project README content and related analysis.

🚀 Quick Start

Prerequisites

Before you start, make sure you have the following installed:

• Node.js
• npm

Local Development

1. Clone the repository

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

2. Install dependencies

npm install

3. Configure environment variables Create a .env.local file and add the following content:

# GitHub API token (optional but recommended to avoid API rate limits)
GITHUB_TOKEN=your_github_token_here

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

4. Configure Google Cloud service account Place your Google Cloud service account credentials file (in JSON format) in the project root directory with the same name as specified in the GOOGLE_APPLICATION_CREDENTIALS environment variable. If you don't have a service account yet, you can create one by following these steps:
   • Go to Google Cloud Console.
   • Select your project.
   • Navigate to "IAM & Admin" > "Service Accounts".
   • Create a new service account and grant the necessary permissions (Vertex AI User).
   • Create and download the JSON key file.
   • Place the file in the project root directory.
5. Start the development server

./start-dev.sh

6. Access the application Open http://localhost:3001 (or the port shown in the console) in your browser.

✨ Features

• Environment-adaptive proxy: Automatically use a proxy in the development environment to solve CORS issues, and directly call the API in the production environment.
• GitHub API integration: Search for MCP-related projects.
• AI analysis: Use Google Gemini Pro to evaluate the relevance of projects to MCP.
• Responsive design: Adapt to various device sizes.

📦 Installation

The steps for local development also cover the installation process. In summary:

1. Clone the repository.
2. Install dependencies using npm install.
3. Configure environment variables and Google Cloud service account.

💻 Usage Examples

Project Search

// This is a simplified example of how to use the project search feature
// Assume there is an API call function named searchProjects
searchProjects('MCP').then(projects => {
    console.log(projects);
});

AI Analysis

// This is a simplified example of how to use the AI analysis feature
// Assume there is an API call function named analyzeProject
const projectContent = 'Some project content here';
analyzeProject(projectContent).then(result => {
    console.log(result);
});

📚 Documentation

Technical Stack

• Next.js 15
• TypeScript
• Tailwind CSS
• React Icons
• Axios (for API requests)
• Google Cloud Vertex AI (Gemini Pro model for AI analysis)
• React Markdown (for rendering README)

Function Overview

• Project Search: Search for MCP-related projects via the GitHub API.
• AI Analysis: Analyze project content using Google Gemini Pro to evaluate its relevance to MCP.
• Project Display: Show project lists and detailed information.
• README Rendering: Display project README content using React Markdown.

Proxy Configuration

The project has an environment-adaptive proxy configuration:

• Development Environment: Automatically enable the API proxy to solve CORS issues during local development.
  • GitHub API: /api/github/* → https://api.github.com/*
  • Vertex AI: /api/vertex/* → https://us-central1-aiplatform.googleapis.com/v1/*
• Production Environment: Automatically disable the proxy and directly call external APIs. This configuration does not require manual switching, and the system will automatically decide whether to use the proxy based on the NODE_ENV environment variable.

Deployment

The project can be deployed to Vercel, Netlify, or other platforms that support Next.js. When deploying, make sure to set the following environment variables:

• GITHUB_TOKEN
• GOOGLE_CLOUD_PROJECT
• GOOGLE_CLOUD_LOCATION
• GOOGLE_APPLICATION_CREDENTIALS
• VERTEX_LOCATION For cloud platform deployment, you may need to set Google Cloud credentials directly as environment variables instead of using a file.

🔧 Technical Details

The project uses Next.js 15 as the framework, which provides a powerful server-side rendering and routing mechanism. TypeScript is used to enhance code type safety, and Tailwind CSS is used for rapid UI development. Axios is used for API requests, and Google Cloud Vertex AI's Gemini Pro model is used for AI analysis of project content. React Markdown is used to render project README content.

The environment-adaptive proxy configuration is implemented by detecting the NODE_ENV environment variable. In the development environment, a proxy middleware is used to forward requests to the corresponding API endpoints, while in the production environment, requests are directly sent to the external APIs.

📄 License

This project is licensed under the MIT License.