MCPStudio: The Postman for Model Context Protocol

MCPStudio：Model Context Protocol 的 Postman

MCPStudio 是一个用于创建、测试、管理和发现 Model Context Protocol (MCP) 服务的 Web 平台。就像面向 API 的 Postman 一样，MCPStudio 提供了一个可视化界面，屏蔽了协议的复杂性，让你可以直接在浏览器中连接 MCP 服务、发现工具、填写参数并执行工具，以及查看结果。

战略方向： Web 应用（现在）→ CLI 工具 → SDK/库 → 桌面应用

功能

• 服务管理 — 创建、配置、连接和监控 MCP 服务，并跟踪其状态（已连接 / 已断开 / 出错）
• 工具发现与执行 — 自动发现 MCP 服务公开的工具，通过动态表单填写参数，并查看格式化响应
• 工具库 — 浏览所有已连接服务中的工具，并可搜索和筛选服务
• 执行仪表板 — 使用 Recharts 提供实时指标（耗时、工具分布、成功率 / 错误率），并通过 IndexedDB 保存历史记录
• 执行历史 — 服务端持久化执行日志，支持展开行、分页和清除
• 可视化流水线构建器 — 使用 React Flow 拖放画布，将 MCP 工具串联成 DAG 流水线，并支持自动布局和前端执行引擎
• 工具执行竞技场 — 使用并排且可调整大小的面板比较工具执行结果，并提供 JSON 差异和耗时比较
• MCP 服务发现 — 搜索 npm 和 GitHub 注册表中的 MCP 兼容服务，并可按来源筛选及查看安装命令
• 资源浏览器 — 发现并浏览已连接 MCP 服务公开的数据源
• 提示词模板 — 创建、编辑、标记和管理可复用的提示词模式，支持 {{variable}} 占位符（存储在 IndexedDB 中）
• 配置导出 / 导入 — 将服务配置导出为 JSON 或 YAML（凭据会被遮盖）；通过文件上传、拖放或粘贴导入
• 身份验证 — Supabase 身份验证（电子邮件 / 密码注册和登录），使用 JWT 令牌；支持用于服务集成（Google Drive）的 OAuth2 流程
• 引导式入门 — 首次运行时显示启动画面，并提供交互式聚焦导览和五彩纸屑庆祝效果
• 设置 — 主题切换（深色 / 浅色）、API 基础 URL 配置、个人资料、数据管理
• 文档与支持 — 内置文档、常见问题、快捷链接和反馈表单
• 实时更新 — 通过 WebSocket 流传输工具执行情况和服务状态变化
• Google Drive 集成 — 通过 OAuth 连接，列出、搜索和检索文件，以及创建文件夹

技术栈

前端

类别	技术
框架	React 18 + TypeScript
构建	Vite 5 + SWC
状态	Zustand 5（持久化到 localStorage）
数据获取	React Query 5
UI 套件	shadcn/ui（47+ 个基于 Radix 的组件）
样式	Tailwind CSS 3，包含自定义 MCP 颜色令牌和渐变
表单	react-hook-form + Zod 验证
路由	react-router-dom 6
图表	Recharts 2
节点图	@xyflow/react（React Flow）+ @dagrejs/dagre
身份验证	@supabase/supabase-js（电子邮件 / 密码）
本地数据库	Dexie（IndexedDB 封装）— 执行记录、流水线、提示词
配置解析	js-yaml + Zod
特效	canvas-confetti（入门引导庆祝效果）
通知	Sonner

后端

类别	技术
框架	FastAPI 0.109
语言	Python 3.10+
数据库	MongoDB（Motor 异步驱动）— 不可用时回退到内存模拟
身份验证	JWT（python-jose）+ OAuth2（google-auth-oauthlib）
依赖注入	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。

贡献

欢迎贡献！欢迎提交 Pull Request。

许可证

本项目采用 MIT 许可证 — 详情请参阅 LICENSE 文件。