AI导哈

MCP图形客户端

一个基于Web的图形客户端，用于管理和调用MCP服务器上的工具。

  • by ping520dev
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 ping520dev/mcp-gui

使用说明

MCP图形客户端

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

建筑

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

先决条件

  • Python 3.11+/Node.js 20+/ 紫外线
  • Docker&Docker编写 （用于集装箱化部署）

快速开始

选项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在您的浏览器中。

选项3:Docker部署（推荐用于生产环境）

# 构建并启动所有服务
docker compose up -d

# 查看服务状态
docker-compose ps

# 查看日志
docker compose logs -f

# 停止服务
docker compose down

部署后访问 http://localhost 即可使用。

说明：

  • frontend 服务使用 nginx 提供静态文件，并代理 API 请求到后端
  • backend 服务运行在 8000 端口，SQLite 数据存储在 backend/data/ 目录
  • 所有服务配置了自动重启

特性

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

支持的交通工具

运输 说明
stdio 将MCP服务器作为子进程启动（本地）
流式HTTP 通过HTTP/SSE连接到远程MCP服务器

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

相关 MCP