AI导哈

MCP客户端调试工具

MCP Studio是一个基于Tauri 2 + Rust + React的MCP客户端调试工具，支持连接和管理MCP服务器、调试MCP工具、监控通信过程等功能，适用于AI应用与数据源的连接调试。

  • by i-rtfsc
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 i-rtfsc/mcp-studio

使用说明

MCP Studio

简体中文 | English

一个基于 Tauri 2 + Rust + React 的 MCP (Model Context Protocol) 客户端调试工具，采用 DDD + CQRS 架构，支持多种传输协议。

什么是 MCP？

MCP (Model Context Protocol) 是一个开放协议，用于连接 AI 应用与数据源。它提供了一个标准化的方式来暴露工具、资源和提示词给 AI 助手使用。

MCP Studio 是什么？

MCP Studio 是一个专业的 MCP 客户端调试工具，帮助开发者：

  • 🔗 连接和管理 MCP 服务器 - 支持 SSE、Streamable HTTP 和 Stdio 传输协议
  • 🛠️ 调试 MCP 工具 - 查看可用工具、输入输出模式，实时调用测试
  • 📊 监控通信过程 - 完整记录请求响应，便于问题排查
  • 💾 历史记录管理 - 保存调用历史，支持重试和分析
  • 🎯 实时状态监控 - 连接状态实时显示，自动重连机制

核心功能

MCP 服务器管理

  • 添加、编辑、删除 MCP 服务器配置
  • 支持 SSE (Server-Sent Events) 传输协议
  • 支持 Streamable HTTP 传输协议
  • 支持 Stdio (标准输入输出) 传输协议
  • 实时连接状态监控和心跳检测
  • 自动断线重连机制

工具调试系统

  • 自动获取服务器提供的工具列表
  • 显示工具的详细输入输出 Schema
  • 动态生成基于 Schema 的参数表单
  • 实时调用工具并查看结果
  • 支持 JSON Schema 验证

通信监控

  • 完整记录所有 MCP 调用历史
  • 显示原始请求和响应数据
  • 记录调用耗时和错误信息
  • 支持数据过滤和搜索

高级特性

  • DDD + CQRS 架构 - 清晰的代码结构，易于维护扩展
  • 多协议支持 - 兼容不同版本的 MCP 协议
  • 实时事件通知 - 连接状态变化即时反馈
  • 数据持久化 - SQLite 本地存储，支持历史查询
  • 跨平台支持 - macOS、Windows、Linux 全平台覆盖

快速开始

环境要求

  • Node.js >= 20
  • Rust >= 1.70
  • 平台依赖：
    • macOS: Xcode Command Line Tools
    • Linux: libwebkit2gtk-4.1-dev, libappindicator3-dev
    • Windows: WebView2 Runtime

安装与运行

# 克隆项目
git clone https://github.com/你的用户名/tauri2-react-template.git
cd tauri2-react-template

# 安装依赖
make install

# 启动开发模式
make dev

# 构建生产版本
make build

项目结构

mcp-studio/
├── apps/desktop/
│   ├── src/                          # React 前端
│   │   ├── components/
│   │   │   ├── ui/                   # shadcn/ui 基础组件库 (40+)
│   │   │   ├── studio/               # MCP Studio 核心组件
│   │   │   │   ├── StudioLayout.tsx  # 主界面布局
│   │   │   │   ├── ServerDock.tsx    # 服务器管理面板
│   │   │   │   ├── ToolList.tsx      # 工具列表
│   │   │   │   ├── ToolDetail.tsx    # 工具详情
│   │   │   │   ├── Workspace.tsx     # 工作区
│   │   │   │   └── Inspector.tsx     # 检查器
│   │   │   └── LanguageSwitcher.tsx  # 语言切换
│   │   ├── hooks/                    # 自定义 Hooks
│   │   │   ├── useMcpServers.ts      # MCP 服务器管理
│   │   │   └── useMcpTools.ts        # MCP 工具管理
│   │   ├── lib/                      # 工具函数
│   │   │   ├── query-client.ts       # TanStack Query 配置
│   │   │   ├── logger.ts             # 日志工具
│   │   │   └── events.ts             # 事件类型定义
│   │   └── main.tsx                  # 应用入口
│   │
│   └── src-tauri/                    # Rust 后端 (DDD + CQRS)
│       ├── src/
│       │   ├── domain/               # 领域层
│       │   │   ├── cqrs.rs           # CQRS 核心 traits
│       │   │   ├── mcp.rs            # MCP 核心领域模型
│       │   │   ├── config.rs         # 配置管理
│       │   │   └── events.rs         # 领域事件
│       │   ├── application/          # 应用层 (Handlers)
│       │   │   ├── mcp_commands.rs   # MCP 命令处理器
│       │   │   ├── mcp_queries.rs    # MCP 查询处理器
│       │   │   └── config_commands.rs
│       │   ├── infra/                # 基础设施层
│       │   │   ├── mcp_client.rs     # MCP 客户端管理器
│       │   │   ├── sse_transport.rs  # SSE 传输实现
│       │   │   ├── repo_mcp.rs       # MCP 仓储实现
│       │   │   ├── http.rs           # HTTP 客户端
│       │   │   └── db.rs             # 数据库初始化
│       │   ├── interface/            # 接口层
│       │   │   ├── commands.rs       # Tauri 命令
│       │   │   └── tray.rs           # 系统托盘
│       │   └── main.rs               # 应用入口
│       └── migrations/               # 数据库迁移
│           └── 20250101000000_init.sql
│
├── docs/                             # 项目文档
└── Makefile                          # 常用命令

架构设计

DDD 四层架构

┌─────────────────────────────────────────────────────────────┐
│                    Interface Layer                          │
│              (Tauri Commands, System Tray)                  │
├─────────────────────────────────────────────────────────────┤
│                   Application Layer                         │
│           (CommandHandlers, QueryHandlers)                  │
├─────────────────────────────────────────────────────────────┤
│                     Domain Layer                            │
│    (Entities, Commands, Queries, Repository Traits)         │
├─────────────────────────────────────────────────────────────┤
│                  Infrastructure Layer                       │
│      (SQLite Repositories, HTTP Client, Logging)            │
└─────────────────────────────────────────────────────────────┘

CQRS 模式

本模板实现了完整的 CQRS 模式：

// 命令 (写操作)
pub struct CreateUserCmd { ... }
impl Command for CreateUserCmd {}

// 查询 (读操作)
pub struct ListUsersQuery;
impl Query for ListUsersQuery {}

// 命令处理器
impl CommandHandler<CreateUserCmd, User> for UserCommandHandler { ... }

// 查询处理器
impl QueryHandler<ListUsersQuery, Vec<User>> for UserQueryHandler { ... }

数据流

┌──────────┐    invoke()    ┌───────────┐    handle()    ┌─────────────┐
│  React   │ ─────────────> │  Tauri    │ ─────────────> │  Command/   │
│  Frontend│                │  Command  │                │  Query      │
└──────────┘                └───────────┘                │  Handler    │
     ^                                                   └──────┬──────┘
     │                                                          │
     │                                                          v
     │         Event                                    ┌───────────────┐
     └──────────────────────────────────────────────────│  Repository   │
                                                        │  (SQLite)     │
                                                        └───────────────┘

前端技术栈

技术 用途
React 18 UI 框架
TypeScript 类型安全
Vite 构建工具
TanStack Query 服务端状态管理
Zustand 客户端状态管理
React Router 路由
shadcn/ui UI 组件库
Tailwind CSS 样式
i18next 国际化
React Hook Form + Zod 表单验证

后端技术栈

技术 用途
Rust 系统编程语言
Tauri 2 桌面应用框架
SQLx 异步数据库操作
SQLite 本地数据库
Tokio 异步运行时
Serde 序列化
Tracing 日志系统

常用命令

make install    # 安装依赖
make dev        # 启动开发模式
make build      # 构建生产版本
make clean      # 清理构建产物
make status     # 检查环境状态

文档

许可证

MIT License

相关 MCP