MCPStudio: The Postman for Model Context Protocol

MCPStudio：Model Context Protocol のための Postman

MCPStudio は、Model Context Protocol (MCP) サーバーを作成、テスト、管理、検索するためのウェブプラットフォームです。API 向けの Postman のように、MCPStudio はプロトコルの複雑さを抽象化するビジュアルインターフェースを提供します。ブラウザーから MCP サーバーに接続し、ツールを検索してパラメーターを指定して実行し、結果を確認できます。

戦略的な方向性： ウェブアプリ（現在）→ CLI ツール → SDK／ライブラリ → デスクトップアプリ

機能

• サーバー管理 — MCP サーバーの作成、設定、接続、監視を行い、ステータス（接続済み／切断／エラー）を追跡します
• ツールの検索と実行 — MCP サーバーが公開するツールを自動検索し、動的フォームでパラメーターを入力して、整形されたレスポンスを表示します
• ツールライブラリ — 接続済みサーバーのすべてのツールを検索し、サーバーで絞り込めます
• 実行ダッシュボード — Recharts によるリアルタイム指標（実行時間、ツールの分布、成功／エラー率）と、IndexedDB による永続的な履歴を提供します
• 実行履歴 — 展開可能な行、ページネーション、消去機能を備えたサーバー側の永続的な実行ログです
• ビジュアルパイプラインビルダー — ドラッグ＆ドロップ式の React Flow キャンバスで MCP ツールを DAG パイプラインにつなぎ、自動レイアウトとフロントエンド実行エンジンを利用できます
• ツール実行アリーナ — ツールの実行を比較するための、サイズ変更可能な横並びパネルです。JSON 差分と実行時間を比較できます
• MCP サーバーの検索 — ソースで絞り込み、インストールコマンドを確認しながら、npm と GitHub のレジストリで MCP 対応サーバーを検索できます
• リソースブラウザー — 接続済みの MCP サーバーが公開するデータソースを検索して閲覧できます
• プロンプトテンプレート — {{variable}} プレースホルダーを使った再利用可能なプロンプトパターンを作成、編集、タグ付け、管理できます（IndexedDB に保存）
• 設定のエクスポート／インポート — サーバー設定を JSON または YAML としてエクスポートできます（認証情報は伏せられます）。ファイルのアップロード、ドラッグ＆ドロップ、または貼り付けによるインポートにも対応します
• 認証 — JWT トークンを使用した Supabase 認証（メールアドレス／パスワードによる登録とログイン）に加え、サービス連携（Google Drive）向けの OAuth2 フローに対応します
• ガイド付きオンボーディング — 初回起動時のスプラッシュ画面で、インタラクティブなスポットライトツアーと紙吹雪の演出を行います
• 設定 — テーマの切り替え（ダーク／ライト）、API ベース URL の設定、プロフィール、データ管理に対応します
• ドキュメントとサポート — 組み込みのドキュメント、FAQ、クイックリンク、フィードバックフォームを提供します
• リアルタイム更新 — ツール実行とサーバーのステータス変更を WebSocket ストリームで通知します
• Google Drive 連携 — OAuth で接続し、ファイルの一覧表示、検索、取得、フォルダーの作成を行えます

技術スタック

フロントエンド

カテゴリ	技術
フレームワーク	React 18 + TypeScript
ビルド	Vite 5 + SWC
状態管理	Zustand 5（localStorage に永続化）
データ取得	React Query 5
UI キット	shadcn/ui（Radix ベースのコンポーネント 47 個以上）
スタイリング	カスタム MCP カラートークンとグラデーションを備えた Tailwind CSS 3
フォーム	react-hook-form + Zod バリデーション
ルーティング	react-router-dom 6
チャート	Recharts 2
ノードグラフ	@xyflow/react（React Flow）+ @dagrejs/dagre
認証	@supabase/supabase-js（メールアドレス／パスワード）
ローカル DB	Dexie（IndexedDB ラッパー）— 実行、パイプライン、プロンプト
設定の解析	js-yaml + Zod
エフェクト	canvas-confetti（オンボーディングの演出）
通知	Sonner

バックエンド

カテゴリ	技術
フレームワーク	FastAPI 0.109
言語	Python 3.10+
データベース	MongoDB（Motor 非同期ドライバー）— 使用できない場合はインメモリモックにフォールバック
認証	JWT（python-jose）+ OAuth2（google-auth-oauthlib）
DI	dependency-injector
HTTP クライアント	httpx（非同期、レジストリ検索用）
WebSocket	websockets 12
バリデーション	Pydantic 2 + pydantic-settings
テスト	pytest + pytest-asyncio

アーキテクチャ

バックエンド — ドメイン駆動設計（4 層）

backend/mcp_studio_backend/src/mcp_studio/
├── api/              # Controllers, routes, Pydantic schemas
│   ├── controllers/  # auth, server, tool, execution, discovery
│   ├── routes/       # auth, server, tool, execution, discovery
│   └── schemas/      # auth, server, tool, execution, discovery
├── application/      # Services, DTOs (orchestration)
│   └── services/     # auth, server, tool, execution, discovery
├── domain/           # Models, repository interfaces, domain services
├── infrastructure/   # MongoDB repos, Google Drive client, registry clients, EventBus
├── config/           # Settings (pydantic-settings, loads .env)
├── container.py      # Dependency injection wiring
└── main.py           # FastAPI app entry point

フロントエンド — Feature-Sliced アーキテクチャ

frontend/ai-server-forge/src/
├── features/
│   ├── auth/           # Login, Signup, AuthGuard, auth store, Supabase hooks
│   ├── servers/        # Dashboard, ServerDetail, ConfigExport/Import, use-servers
│   ├── tools/          # ToolEditor, ParameterEditor, use-tools
│   ├── tools-library/  # ToolsLibrary page (cross-server tool browser)
│   ├── pipeline/       # PipelineList, PipelineEditor, React Flow canvas, engine
│   ├── execution/      # Arena, ExecutionPanel, ExecutionHistory, ExecutionHistoryPage, Metrics
│   ├── resources/      # ResourcesPage, ResourceCard, use-resources
│   ├── prompts/        # PromptsPage, PromptCard, PromptEditor (Dexie/IndexedDB)
│   ├── discovery/      # DiscoveryPage, DiscoveryCard (npm + GitHub search)
│   ├── settings/       # SettingsPage, ThemeToggle, ApiConfig, DataManagement
│   ├── onboarding/     # SplashScreen, TourOverlay (spotlight + confetti)
│   ├── docs/           # DocsPage (static documentation)
│   └── support/        # SupportPage, FAQ, QuickLinks, FeedbackForm
├── components/
│   ├── layout/       # MainLayout, Header, Sidebar
│   └── ui/           # shadcn/ui component library (47+ components)
├── stores/           # Zustand stores (ui)
├── lib/
│   ├── api/          # Typed API client (servers, tools, auth, resources, executions, discovery)
│   └── supabase.ts   # Supabase client initialization
├── hooks/            # Shared hooks (use-mobile, use-toast)
└── types/            # TypeScript types matching backend Pydantic schemas

はじめに

前提条件

• Python 3.10+
• Node.js 16+
• MongoDB（任意 — 利用できない場合はインメモリのモックにフォールバックします）
• UV パッケージマネージャー（推奨）

インストール

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 .
uvicorn mcp_studio.main:app --reload  # runs on :8000

フロントエンド：

cd frontend/ai-server-forge
npm install
npm run dev  # runs on :8080

ブラウザーで http://localhost:8080 を開き、新しいアカウントに登録するか、既存の認証情報でログインしてください。

API エンドポイント

メソッド	パス	用途
POST	/api/auth/register	新規ユーザーを登録
POST	/api/auth/token	ログイン（OAuth2 パスワードフロー）
GET	/api/auth/me	現在のユーザー情報
GET	/api/auth/google/auth	Google OAuth URL
GET	/api/auth/google/callback	Google OAuth コールバック
POST	/api/servers	サーバーを作成
GET	/api/servers	サーバー一覧を取得
GET	/api/servers/{id}	サーバーの詳細を取得
PUT	/api/servers/{id}	サーバーを更新
DELETE	/api/servers/{id}	サーバーを削除
POST	/api/servers/{id}/connect	接続してツールを検出
POST	/api/servers/{id}/disconnect	切断
GET	/api/servers/{id}/tools	サーバーのツール一覧を取得
GET	/api/servers/{id}/resources	サーバーのリソース一覧を取得
GET	/api/tools	すべてのツールを一覧表示（複数サーバー横断）
GET	/api/tools/{id}	ツールの詳細を取得
POST	/api/servers/{id}/tools/{id}/execute	ツールを実行
GET	/api/executions	実行履歴（フィルター可能）
GET	/api/executions/{id}	実行の詳細を取得
DELETE	/api/executions	実行履歴を消去
GET	/api/discovery/search	MCP サーバーを検索（npm/GitHub）
GET	/api/discovery/categories	サーバーカテゴリー一覧を取得
WS	/ws/servers/{id}/tools/{id}/execution	ツール実行ストリーム

ロードマップ

MCPStudio は、Unsloth Studio のパターンに着想を得た、段階的な機能強化計画に沿って進化します。

フェーズ	機能	ステータス
0	基盤 — Zustand ストア、React Query、型付き API クライアント、認証ガード	完了
1	Feature-Sliced アーキテクチャへの再編成	完了
2	UX — サーバー接続ウィザード、ターミナル風の読み込み表示、折りたたみ可能なセクション	完了
3	リアルタイム実行ダッシュボード — Recharts メトリクス、IndexedDB 履歴（Dexie）	完了
4	ビジュアル MCP パイプラインビルダー — React Flow キャンバス、DAG 実行、dagre 自動レイアウト	完了
5	ツール実行アリーナ — JSON 差分による並列比較	完了
6	設定のエクスポート／インポート — Zod 検証付き JSON/YAML、ドラッグ＆ドロップによるインポート	完了
7	Supabase Auth — メールアドレス／パスワードでの登録とログイン、ハードコードされた認証情報を置き換え	完了
8	不足機能の補完 — 設定、ツールライブラリ、リソース、プロンプト、ドキュメント、サポートの各ページ	完了
9	オンボーディングとガイドツアー — スプラッシュ画面、スポットライトツアー、紙吹雪によるお祝い	完了
10	実行履歴 — サーバー側での永続化、ページネーション付きの履歴ページ	完了
11	MCP サーバーの検出 — 検出ページでの npm/GitHub レジストリー検索	完了

詳細な進捗状況は、EXPERIMENT.md をご覧ください。

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

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