Skip to content

ping520dev/mcp-gui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MCP Graphical Client

A web-based graphical client for MCP (Model Context Protocol) servers. Manage connections, browse tools, and invoke them with JSON Schema-driven forms.

Architecture

  • Backend: Python 3.11+ / FastAPI / uv
  • Frontend: Vue 3 / TypeScript / Vite / Pinia

Prerequisites

  • Python 3.11+
  • Node.js 20+
  • uv (Python package manager)

Quick Start

Option 1: Use Startup Scripts (Recommended)

Windows:

scripts\start.bat

macOS/Linux:

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

To stop all servers:

  • Windows: scripts\stop.bat
  • macOS/Linux: ./scripts/stop.sh

Option 2: Manual Start

Backend:

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

Frontend:

cd frontend
npm install
npm run dev

Open http://localhost:5173 in your browser.

Features

  • Server Management: Add, edit, delete MCP server configurations (stdio and HTTP transports)
  • Connection Management: Connect/disconnect from MCP servers with real-time status
  • Tool Browsing: List all available tools from connected servers
  • Tool Invocation: Invoke tools with dynamic forms generated from JSON Schema, or raw JSON input
  • WebSocket: Real-time communication for tool invocation and notifications
  • Result Display: Support for text, image, and resource content types

Supported Transports

Transport Description
stdio Launch MCP server as a subprocess (local)
Streamable HTTP Connect to remote MCP server via HTTP/SSE

API

REST API is available at /api/v1 with Swagger docs at /docs when the backend is running.

Project Structure

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

About

MCP GUI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors