MCPStudio: The Postman for Model Context Protocol

by lonexreb

2 stars

139 downloads

Not rated

GitHub

Other

About

MCPStudio is a web platform for creating, testing, managing, and discovering Model Context Protocol (MCP) servers. Like Postman for APIs, it provides a visual interface that abstracts away protocol complexity, allowing users to connect to MCP servers, discover tools, execute…

Details

Author: lonexreb
GitHub stars: 2
Downloads: 139
Categories: Other

- Server creation, configuration, and connection with status tracking
- Auto-discovery and execution of MCP tools via dynamic forms
- Visual pipeline builder with drag-and-drop DAG canvas
- Tool Execution Arena for side-by-side comparison with JSON diff
- MCP server discovery from npm and GitHub registries
- Supabase authentication with email/password and OAuth2 for Google Drive

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name MCPStudio: The Postman for Model Context Protocol

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

From the repository

Clone the repository, then install and run the backend (Python 3.10+ with UV) and frontend (Node.js 16+ with npm). Open http://localhost:8080, sign up or log in, and start managing MCP servers. The guided onboarding tour helps you get started.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "mcpstudio: the postman for model context protocol": {
            "MCPstudio": {
                "command": "python",
                "args": [
                    "-m",
                    "venv",
                    "venv",
                    "&&",
                    "source",
                    "venv/bin/activate",
                    "#",
                    "Windows:",
                    "venvScriptsactivate"
                ]
            }
        }
    }
}

McpServers

{
    "MCPstudio": {
        "command": "python",
        "args": [
            "-m",
            "venv",
            "venv",
            "&&",
            "source",
            "venv/bin/activate",
            "#",
            "Windows:",
            "venvScriptsactivate"
        ]
    }
}

MCPStudio: The Postman for Model Context Protocol

MCPStudio is a web platform for creating, testing, managing, and discovering Model Context Protocol (MCP) servers. Like Postman for APIs, MCPStudio provides a visual interface that abstracts away protocol complexity — letting you connect to MCP servers, discover tools, execute them with parameters, and inspect results, all from the browser.

Strategic direction: Web app (now) → CLI tool → SDK/library → Desktop app

Features

- Server Management — Create, configure, connect to, and monitor MCP servers with status tracking (connected / disconnected / error)
- Tool Discovery & Execution — Auto-discover tools exposed by MCP servers, fill parameters via dynamic forms, and view formatted responses
- Tools Library — Browse all tools across connected servers with search and server filtering
- Execution Dashboard — Real-time metrics with Recharts (timing, tool distribution, success/error rates) and persistent history via IndexedDB
- Execution History — Server-side persistent execution log with expandable rows, pagination, and clear
- Visual Pipeline Builder — Drag-and-drop React Flow canvas to chain MCP tools into DAG pipelines with auto-layout and frontend execution engine
- Tool Execution Arena — Side-by-side resizable panels for comparing tool executions with JSON diff and timing comparison
- MCP Server Discovery — Search npm and GitHub registries for MCP-compatible servers with source filtering and install commands
- Resources Browser — Discover and browse data sources exposed by connected MCP servers
- Prompt Templates — Create, edit, tag, and manage reusable prompt patterns with {{variable}} placeholders (stored in IndexedDB)
- Config Export/Import — Export server configs as JSON or YAML (credentials redacted); import via file upload, drag & drop, or paste
- Authentication — Supabase auth (email/password signup & login) with JWT tokens; OAuth2 flow support for service integrations (Google Drive)
- Guided Onboarding — First-run splash screen with interactive spotlight tour and confetti celebration
- Settings — Theme toggle (dark/light), API base URL configuration, profile, data management
- Documentation & Support — Built-in docs, FAQ, quick links, and feedback form
- Real-time Updates — WebSocket streams for tool execution and server status changes
- Google Drive Integration — Connect via OAuth, list/search/retrieve files, create folders

Tech Stack

Frontend

| Category | Technology |
|----------|-----------|
| Framework | React 18 + TypeScript |
| Build | Vite 5 + SWC |
| State | Zustand 5 (persisted to localStorage) |
| Data Fetching | React Query 5 |
| UI Kit | shadcn/ui (47+ Radix-based components) |
| Styling | Tailwind CSS 3 with custom MCP color tokens + gradients |
| Forms | react-hook-form + Zod validation |
| Routing | react-router-dom 6 |
| Charts | Recharts 2 |
| Node Graph | @xyflow/react (React Flow) + @dagrejs/dagre |
| Auth | @supabase/supabase-js (email/password) |
| Local DB | Dexie (IndexedDB wrapper) — executions, pipelines, prompts |
| Config Parsing | js-yaml + Zod |
| Effects | canvas-confetti (onboarding celebration) |
| Notifications | Sonner |

Backend

| Category | Technology |
|----------|-----------|
| Framework | FastAPI 0.109 |
| Language | Python 3.10+ |
| Database | MongoDB (Motor async driver) — falls back to in-memory mock |
| Auth | JWT (python-jose) + OAuth2 (google-auth-oauthlib) |
| DI | dependency-injector |
| HTTP Client | httpx (async, for registry search) |
| WebSockets | websockets 12 |
| Validation | Pydantic 2 + pydantic-settings |
| Testing | pytest + pytest-asyncio |

Architecture

Backend — Domain-Driven Design (4 layers)

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

Frontend — Feature-Sliced Architecture

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

Getting Started

Prerequisites

- Python 3.10+
- Node.js 16+
- MongoDB (optional — falls back to in-memory mock when unavailable)
- UV package manager (recommended)

Installation

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

Backend:

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

Frontend:

cd frontend/ai-server-forge

npm install

npm run dev  # runs on :8080

Open your browser at http://localhost:8080 and sign up for a new account, or log in with existing credentials.

API Endpoints

| Method | Path | Purpose |
|--------|------|---------|
| POST | /api/auth/register | Register new user |
| POST | /api/auth/token | Login (OAuth2 password flow) |
| GET | /api/auth/me | Current user info |
| GET | /api/auth/google/auth | Google OAuth URL |
| GET | /api/auth/google/callback | Google OAuth callback |
| POST | /api/servers | Create server |
| GET | /api/servers | List servers |
| GET | /api/servers/{id} | Get server details |
| PUT | /api/servers/{id} | Update server |
| DELETE | /api/servers/{id} | Delete server |
| POST | /api/servers/{id}/connect | Connect & discover tools |
| POST | /api/servers/{id}/disconnect | Disconnect |
| GET | /api/servers/{id}/tools | List server tools |
| GET | /api/servers/{id}/resources | List server resources |
| GET | /api/tools | List all tools (cross-server) |
| GET | /api/tools/{id} | Get tool details |
| POST | /api/servers/{id}/tools/{id}/execute | Execute tool |
| GET | /api/executions | Execution history (filterable) |
| GET | /api/executions/{id} | Get execution details |
| DELETE | /api/executions | Clear execution history |
| GET | /api/discovery/search | Search MCP servers (npm/GitHub) |
| GET | /api/discovery/categories | List server categories |
| WS | /ws/servers/{id}/tools/{id}/execution | Tool execution stream |

Roadmap

MCPStudio follows a phased enhancement plan inspired by patterns from Unsloth Studio:

| Phase | Feature | Status |
|-------|---------|--------|
| 0 | Foundation — Zustand stores, React Query, typed API client, auth guard | Done |
| 1 | Feature-sliced architecture reorganization | Done |
| 2 | UX — Server Connection Wizard, terminal-style loading, collapsible sections | Done |
| 3 | Real-time Execution Dashboard — Recharts metrics, IndexedDB history (Dexie) | Done |
| 4 | Visual MCP Pipeline Builder — React Flow canvas, DAG execution, dagre auto-layout | Done |
| 5 | Tool Execution Arena — side-by-side comparison with JSON diff | Done |
| 6 | Config Export/Import — JSON/YAML with Zod validation, drag & drop import | Done |
| 7 | Supabase Auth — email/password signup & login, replacing hardcoded credentials | Done |
| 8 | Fill the Gaps — Settings, Tools Library, Resources, Prompts, Docs, Support pages | Done |
| 9 | Onboarding & Guided Tour — splash screen, spotlight tour, confetti celebration | Done |
| 10 | Execution History — server-side persistence, history page with pagination | Done |
| 11 | MCP Server Discovery — npm/GitHub registry search with discovery page | Done |

See EXPERIMENT.md for detailed tracking.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License — see the LICENSE file for details.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

MCPStudio: The Postman for Model Context Protocol

Features

Tech Stack

Frontend

Backend

Architecture

Backend — Domain-Driven Design (4 layers)

Frontend — Feature-Sliced Architecture

Getting Started

Prerequisites

Installation

API Endpoints

Roadmap

Contributing

License

Install

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

Reactive Resume

FastMCP v2 🚀