Mcpstudio

🚀 MCPStudio：モデルコンテキストプロトコルのポストマンプラットフォーム

MCPStudioは、モデルコンテキストプロトコル（MCP）サーバーの作成、テスト、管理、および発見に特化した、強力で使いやすいプラットフォームです。PostmanがAPI開発とテストを革命的に変えたように、MCPStudioは直感的なビジュアルインターフェースを通じてMCPサーバーとやり取りし、複雑な基盤技術を簡素化します。

🚀 クイックスタート

MCPStudioを使用するには、以下の手順に従ってインストールとセットアップを行います。

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

   git clone https://github.com/lonexreb/mcpstudio.git
   cd mcpstudio
   

2. バックエンドの設定：

   cd backend/mcp_studio_backend
   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

3. フロントエンドの設定：

   cd frontend/ai-server-forge
   npm install
   

4. 開発サーバーを起動する バックエンド：

   cd backend/mcp_studio_backend
   uvicorn mcp_studio.main:app --reload
   

   フロントエンド：

   cd frontend/ai-server-forge
   npm run dev
   

5. ブラウザを開き、http://localhost:3000にアクセスします。

✨ 主な機能

サーバー管理

• MCPサーバーの作成、一覧表示、更新、および削除。
• サーバーへの接続と切断をサポート。

ツール管理

• 特定のサーバーの利用可能なすべてのツールを一覧表示。
• 指定されたツールの操作を実行。

認証

• JWTベースの認証。
• Google OAuthログインをサポート。

📦 インストール

1. リポジトリをクローン：

   git clone https://github.com/lonexreb/mcpstudio.git
   cd mcpstudio
   

2. バックエンドのセットアップ：

   cd backend/mcp_studio_backend
   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

3. フロントエンドのセットアップ：

   cd frontend/ai-server-forge
   npm install
   

4. 開発サーバーを起動： バックエンド：

   cd backend/mcp_studio_backend
   uvicorn mcp_studio.main:app --reload
   

   フロントエンド：

   cd frontend/ai-server-forge
   npm run dev
   

5. ブラウザを開き、http://localhost:3000にアクセス。

💻 使用例

基本的な使用法

以下は、MCPStudioを使用してMCPサーバーを作成する基本的なコマンド例です。

# リポジトリをクローン
git clone https://github.com/lonexreb/mcpstudio.git
cd mcpstudio

# バックエンドのセットアップ
cd backend/mcp_studio_backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install uv
uv pip install -e .

# フロントエンドのセットアップ
cd frontend/ai-server-forge
npm install

# 開発サーバーを起動
# バックエンド
cd backend/mcp_studio_backend
uvicorn mcp_studio.main:app --reload
# フロントエンド
cd frontend/ai-server-forge
npm run dev

📚 ドキュメント

モデルコンテキストプロトコル (MCP) とは?

モデルコンテキストプロトコルは、AIシステム（大規模言語モデルなど）を外部ツール、サービス、または他のシステムにシームレスに接続できるようにする標準です。MCPは、AIエージェントとその環境との間のインターフェースを定義し、これらのエージェントが操作を実行して結果を取得できるようにします。

コアアーキテクチャ

バックエンド

フロントエンド

APIエンドポイント

サーバー管理

• POST /api/servers - 新しいサーバーを作成
• GET /api/servers - すべてのサーバーを一覧表示
• GET /api/servers/{server_id} - サーバーの詳細を取得
• PUT /api/servers/{server_id} - サーバーを更新
• DELETE /api/servers/{server_id} - サーバーを削除
• POST /api/servers/{server_id}/connect - サーバーに接続
• POST /api/servers/{server_id}/disconnect - サーバーから切断

ツール管理

• GET /api/servers/{server_id}/tools - サーバー上のツールを一覧表示
• GET /api/tools/{tool_id} - ツールの詳細を取得
• POST /api/servers/{server_id}/tools/{tool_id}/execute - ツールの操作を実行

認証

• POST /api/auth/token - JWTアクセストークンを取得
• GET /api/auth/google/auth - Google OAuthリンクを取得
• GET /api/auth/google/callback - Google OAuthコールバックを処理
• GET /api/auth/user - 現在のユーザー情報を取得

🔧 技術詳細

実装段階

バックエンド (Python)

1. 環境を初期化：

   python -m venv venv
   source venv/bin/activate  # Windows: venv\Scripts\activate
   pip install uv
   uv pip install -e .
   

2. 設定ファイルのパス：

   mcpstudio/
   ├── backend/
   │   └── mcp_studio/
   │       ├── config.py
   │       └── main.py
   └── frontend/
       └── ai-server-forge/
           └── package.json
   

仕組み

1. ユーザーがインターフェースを通じてMCPサーバーを作成します。
2. プラットフォームがサーバーに接続要求を送信します。
3. 接続に成功すると、ユーザーはサーバー上のツールを表示および管理できます。
4. ツールの操作を実行すると、プラットフォームは結果を受信して表示します。

技術スタック

バックエンド

• 言語：Python
• フレームワーク：FastAPI
• 依存関係管理：UV
• 設定：
  • ポート：8000
  • ドキュメント：/docs

フロントエンド

• 言語：React
• 状態管理：Redux
• スタイル：Tailwind CSS
• ビルドツール：Webpack

プロジェクト構造

mcpstudio/
├── backend/
│   └── mcp_studio_backend/
│       ├── config.py
│       └── main.py
└── frontend/
    └── ai-server-forge/
        └── package.json

📄 ライセンス

このプロジェクトはMITライセンスに従います。詳細はLICENSEファイルを参照してください。

🔗 コントリビューションガイド

1. コードを提出する際は、Gitワークフローに従ってください：

   git checkout main
   git pull origin main
   git checkout feature/my-feature
   # 開発...
   git add .
   git commit -m "feat: 新機能の追加"
   git push origin feature/my-feature
   

2. Pull Requestを提出する前に、コードがすべてのテストに合格していることを確認してください。

📞 連絡先

何か質問や提案がある場合は、以下の方法で連絡してください：

• メール：contact@example.com
• GitHub：https://github.com/lonexreb/mcpstudio