MCPHub 🚀

MCPHub 🚀

MCPHub は、Model Context Protocol（MCP）サーバーを管理するハイブリッド型のウェブ／拡張機能アプリケーションです。MCP サーバー向けの apt／pip のようなもので、モダンなウェブインターフェースと安全なローカルシステム連携を備えています。

🌟 特長

• 📦 MCP サーバーの閲覧とインストール
• ⚙️ サーバー設定の管理
• 🔐 Chrome 拡張機能を通じた安全なローカル操作
• 🌐 ウェブベースのインターフェース
• 🔄 リアルタイムのステータス監視
• 🛠️ 環境変数の管理
• 📝 Claude Desktop 設定との連携
• 🖥️ クロスプラットフォーム対応

🚀 クイックスタート

Chrome 拡張機能とネイティブホストのインストール

Windows:

1. このリポジトリをクローンします
2. インストールスクリプトを実行します：

cd chrome-extension/scripts
windows-install.bat

3. Chrome で拡張機能を読み込みます：
   • chrome://extensions/ を開きます
   • デベロッパーモードを有効にします
   • 「パッケージ化されていない拡張機能を読み込む」をクリックします
   • chrome-extension ディレクトリを選択します

MacOS/Linux:

1. このリポジトリをクローンします
2. インストールスクリプトを実行します：

cd chrome-extension/scripts
# For MacOS:
./macos-install.sh
# For Linux:
./linux-install.sh

3. Chrome で拡張機能を読み込みます：
   • chrome://extensions/ を開きます
   • デベロッパーモードを有効にします
   • 「パッケージ化されていない拡張機能を読み込む」をクリックします
   • chrome-extension ディレクトリを選択します

ウェブフロントエンドの実行

1. web ディレクトリに移動します：

cd web

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

npm install

3. 開発サーバーを起動します：

npm run dev

4. Chrome で http://localhost:3000 を開きます

📁 プロジェクト構成

mcphub/
├── chrome-extension/       # Chrome extension
│   ├── manifest.json      # Extension manifest
│   ├── background.js      # Service worker
│   ├── popup/            # Extension popup UI
│   ├── native-host/      # Native messaging host
│   └── scripts/          # Installation scripts
├── web/                  # Next.js frontend
│   ├── src/             # Source code
│   └── package.json     # Dependencies
└── registry/            # Server registry
    └── servers.yaml     # Available servers

⚙️ 設定

Claude Desktop との連携

MCPHub は、次の場所にある Claude Desktop の設定ファイルを管理します：

• Windows: %APPDATA%/Claude/claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

サーバー設定の例

{
  "mcpServers": {
    "github": {
      "command": "node",
      "args": [
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

🔄 開発

Chrome 拡張機能

• Manifest V3 を使用
• システム操作にネイティブメッセージングを使用
• 拡張機能 ID を自動生成
• クロスプラットフォームのインストールスクリプト

ウェブフロントエンド

• TypeScript を使用した Next.js 13
• Material-UI コンポーネント
• Chrome 拡張機能との連携
• リアルタイムのステータス監視

🤝 コントリビューション

1. リポジトリをフォークします
2. 機能ブランチを作成します：

git checkout -b feature/amazing-feature

3. 変更をコミットします：

git commit -m 'Add amazing feature'

4. ブランチにプッシュします：

git push origin feature/amazing-feature

5. プルリクエストを作成します

新しい MCP サーバーの追加

registry/servers.yaml にサーバーを追加します：

- name: "Your MCP Server"
  description: "Server description"
  runtime: "node"  # or "python"
  package: "your-package-name"
  version: "1.0.0"
  command_args:
    - "your-command-args"
  env:
    YOUR_ENV_VAR: ""

📝 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています。詳細は LICENSE ファイルをご覧ください。

🔗 リンク

• ドキュメント
• イシュートラッカー
• Model Context Protocol

---