AI导哈

模型上下文协议管理平台

MCPStudio是一个用于创建、测试、管理和发现模型上下文协议（MCP）服务器的Web平台，提供可视化界面以简化协议复杂性。

  • by lonexreb
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 lonexreb/MCPstudio

使用说明

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连接，列出/搜索/检索文件，创建文件夹

技术栈

前端

类别 技术
框架 React 18+TypeScript
建造 Vite 5+SWC
状态 Zustand 5（持久化到本地存储）
数据获取 React查询5
UI工具包 shadcn/UI（47+根基成分）
造型 带有自定义MCP颜色标记+渐变的顺风CSS 3
表单 反应钩子表单+Zod验证
路由 反应路由器dom 6
图表 第二部分
节点图 @xyflow/react（反应流）+@dagrejs/dagre
auth @supabase/supabase-js（电子邮件/密码）
本地DB Dexie（IndexedDB包装器）——执行、管道、提示
配置解析 js-yaml+Zod
效果 画布五彩纸屑（入职庆典）
通知 Sonner

后端

类别 技术
框架 FastAPI 0.109
语言 Python 3.10+
数据库 MongoDB（电机异步驱动程序）——回退到内存模拟
身份验证 JWT（python jose）+OAuth2（谷歌身份验证oauthlib）
DI 依赖注入器
HTTP客户端 httpx（异步，用于注册表搜索）
WebSockets WebSockets 12
验证 Pydantic 2+Pydantic设置
测试 pytest+pytest异步

建筑

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

方法 路径 目的
POST /api/auth/register 注册新用户
POST /api/auth/token 登录（OAuth2密码流）
GET /api/auth/me 当前用户信息
GET /api/auth/google/auth 谷歌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遵循了一个分阶段的增强计划，其灵感来自 Uncloth工作室:

阶段 功能 状态
0 基础-Zustand存储，React查询，键入API客户端，auth-guard 完成
1 功能切片架构重组 完成
2 UX——服务器连接向导，终端式加载，可折叠部分 完成
3 实时执行仪表板——重新调用指标、IndexedDB历史记录（Dexie） 完成
4 可视化MCP管道生成器——React Flow画布、DAG执行、dagre自动布局 完成
5 工具执行竞技场——与JSON diff并排比较 完成
6 配置导出/导入——带Zod验证的JSON/YAML，拖放导入 完成
7 Supabase Auth——电子邮件/密码注册和登录，替换硬编码凭据 完成
8 填补空白--设置、工具库、资源、提示、文档、支持页面 完成
9 登船和导游——启动画面、聚光灯之旅、五彩纸屑庆典 完成
10 执行历史记录——服务器端持久化，带分页的历史页面 完成
11 MCP服务器发现——使用发现页面搜索npm/GitHub注册表 完成

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

贡献

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

许可证

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

相关 MCP