Mc Pstudio

MCPStudio Banner MCPStudio Banner

MCPStudio：模型上下文协议的邮递员

MCPStudio是一个用于创建、测试、管理和发现的web平台 模型上下文协议（MCP） 服务器。与Postman for API一样，MCPStudio提供了一个可视化界面，抽象了协议的复杂性，让您可以从浏览器连接到MCP服务器、发现工具、使用参数执行它们并检查结果。

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

特性

• 服务器管理 --通过状态跟踪（连接/断开/错误）创建、配置、连接和监控MCP服务器
• 工具发现和执行 --自动发现MCP服务器公开的工具，通过动态表单填写参数，并查看格式化的响应
• 工具库 --通过搜索和服务器筛选在连接的服务器上浏览所有工具
• 执行仪表板 --通过IndexedDB使用Recharts实时指标（计时、工具分布、成功/错误率）和持久历史记录
• 执行历史 --服务器端持久执行日志，具有可扩展行、分页和清除功能
• 可视化管道生成器 --拖放React Flow画布，将MCP工具链接到具有自动布局和前端执行引擎的DAG管道中
• 工具执行竞技场 --可并排调整大小的面板，用于比较工具执行与JSON差异和时间比较
• MCP服务器发现 --使用源代码过滤和安装命令在npm和GitHub注册表中搜索MCP兼容服务器
• 资源浏览器 --发现和浏览连接的MCP服务器暴露的数据源
• 提示模板 --使用创建、编辑、标记和管理可重用的提示模式 {{variable}} 占位符（存储在IndexedDB中）
• 配置导出/导入 --将服务器配置导出为JSON或YAML（凭据已编辑）；通过文件上传、拖放或粘贴导入
• 认证 --使用JWT令牌进行Supabase身份验证（电子邮件/密码注册和登录）；OAuth2流支持服务集成（Google Drive）
• 引导登机 --首轮启动画面，互动聚光灯之旅和五彩纸屑庆祝活动
• 设置 -主题切换（暗/亮），API基础URL配置，配置文件，数据管理
• 文档与支持 --内置文档、常见问题解答、快速链接和反馈表
• 实时更新 --用于工具执行和服务器状态更改的WebSocket流
• Google Drive集成 --通过OAuth连接，列出/搜索/检索文件，创建文件夹

技术栈

前端

后端

建筑

后端——领域驱动设计（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

前端——特征切片架构

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终点

路线图

MCPStudio遵循了一个分阶段的增强计划，其灵感来自 Uncloth工作室:

看 实验.md 用于详细跟踪。

贡献

欢迎投稿！请随时提交拉取请求。

许可证

该项目根据MIT许可证获得许可——请参阅 许可证 文件以获取详细信息。