MCP Gui

MCP图形客户端

基于web的图形客户端 MCP（模型上下文协议） 服务器。管理连接、浏览工具，并使用JSON模式驱动的表单调用它们。

建筑

• 后端：Python 3.11+/FastAPI/uv
• 前端：视图3/TypeScript/Vite/Pinia

先决条件

• Python 3.11+
• Node.js 20+
• 紫外线 （Python包管理器）

快速开始

选项1：使用启动脚本（推荐）

窗户：

scripts\start.bat

macOS/Linux：

chmod +x scripts/start.sh
./scripts/start.sh

要停止所有服务器，请执行以下操作：

• 窗户： scripts\stop.bat
• macOS/Linux： ./scripts/stop.sh

选项2：手动启动

后端：

cd backend
uv sync
uv run uvicorn app.main:app --reload --port 8000

前端：

cd frontend
npm install
npm run dev

打开http://localhost:5173在您的浏览器中。

特性

• 服务器管理：添加、编辑、删除MCP服务器配置（stdio和HTTP传输）
• 连接管理：连接/断开MCP服务器的实时状态
• 工具浏览：列出连接服务器中的所有可用工具
• 工具调用：使用从JSON模式或原始JSON输入生成的动态表单调用工具
• 双向通信：工具调用和通知的实时通信
• 结果显示：支持文本、图像和资源内容类型

支持的交通工具

API

REST API可在 /api/v1 Swagger文档位于 /docs 当后端正在运行时。

项目结构

backend/          # Python FastAPI backend
  app/
    api/          # REST and WebSocket routes
    mcp/          # MCP transport and session management
    services/     # Business logic
    models/       # Pydantic schemas
    db/           # SQLite database layer
frontend/         # Vue 3 TypeScript frontend
  src/
    api/          # HTTP and WebSocket clients
    components/   # Vue components
    composables/  # Reusable composition functions
    stores/       # Pinia state management
    types/        # TypeScript type definitions
    views/        # Page components