Architecture

Architecture Overview link

MCP Explorer follows a clean architecture pattern with a Vue 3 SPA frontend and an ASP.NET Core backend.

flowchart TB
    subgraph BROWSER["🌐 Browser"]
        SPA["⚡ Vue 3 · Vite · PrimeVue 4\nSingle-Page Application"]
    end

    subgraph SINGLE["🐳 Single Container (docker run)"]
        GW["🔀 YARP Gateway :8080\nStatic SPA host + /api/** proxy"]
        API["⚙️ ASP.NET Core API :5000"]
        GW -->|reverse proxy| API
    end

    subgraph DATA["💾 Persistent Data"]
        FILE["/app/data/data.json\nConnections · Models · Workflows\nSettings · Chat History"]
    end

    subgraph MCP["🔌 MCP Servers"]
        S1["Server A (stdio)"]
        S2["Server B (SSE)"]
        S3["Server C (HTTP)"]
    end

    BROWSER -->|HTTP/SSE| GW
    API -->|read/write| FILE
    API -->|MCP protocol| S1
    API -->|MCP protocol| S2
    API -->|MCP protocol| S3

Deployment Modes link

Single Container link

The default deployment — everything in one image.

  docker run -d \
  -p 8090:8080 \
  -v mcp-explorer-data:/app/data \
  ghcr.io/your-username/mcp-explorer-x:latest
  

flowchart LR
    Browser -->|":8090"| Container["Single Container\nYARP + API + SPA"]
    Container -->|"/app/data"| Volume["Named Volume"]
    Container -->|"MCP protocol"| MCP["MCP Servers"]

Docker Compose (Separate Services) link

For teams or when you want independent scaling of frontend and backend.

  docker compose up -d
  

flowchart LR
    Browser -->|":8090"| FE["Frontend Container\nNginx + Vite SPA"]
    FE -->|"/api/**"| BE["Backend Container\nASP.NET Core API :5000"]
    BE -->|"/app/data"| Volume["Named Volume"]
    BE -->|"MCP protocol"| MCP["MCP Servers"]

Data Flow link

sequenceDiagram
    participant U as User
    participant SPA as Vue SPA
    participant API as ASP.NET Core API
    participant MCP as MCP Server
    participant DB as data.json

    U->>SPA: Open app
    SPA->>API: GET /api/connections
    API->>DB: Read connections
    DB-->>API: Connection list
    API-->>SPA: JSON response
    SPA-->>U: Render connections

    U->>SPA: Invoke tool
    SPA->>API: POST /api/tools/invoke
    API->>MCP: Tool call (MCP protocol)
    MCP-->>API: Tool result
    API-->>SPA: SSE stream
    SPA-->>U: Render response

Technology Stack link