Skip to main content

Frontend Architecture

The MCP Gatekeeper frontend is a React + TypeScript application with Material-UI components.

Technology Stack​

  • React 19 with TypeScript
  • Vite - Build tool and dev server
  • Material-UI (MUI) v6 - Component library
  • React Router v7 - Client-side routing
  • Axios - HTTP client
  • Recharts - Data visualization

Application Structure​

src/
├── components/       # Reusable components
│   ├── Layout.tsx
│   ├── ErrorBoundary.tsx
│   ├── FilterBar.tsx
│   ├── TerminalViewer.tsx
│   └── ...
├── pages/           # Page components
│   ├── Dashboard.tsx
│   ├── Servers.tsx
│   ├── Packages.tsx
│   ├── HttpServers.tsx
│   ├── Agents.tsx
│   ├── Metrics.tsx
│   ├── Logs.tsx
│   ├── ServerDetail.tsx
│   └── ServerActivity.tsx
├── services/        # API client
│   └── api.ts
├── theme/           # MUI theme
│   └── theme.ts
├── App.tsx          # Root component
└── main.tsx         # Entry point

Key Features​

Routing​

React Router with these routes:

  • / - Dashboard
  • /servers - MCP servers list
  • /stdio-servers - STDIO package management
  • /http-servers - HTTP server management
  • /agents - Agent configuration
  • /metrics - Analytics dashboard
  • /logs - Log viewer
  • /servers/:id - Server details
  • /servers/:id/activity - Server activity

Theme System​

  • Light Theme: Clean, modern interface
  • Dark Theme: Neon green cyberpunk aesthetic
  • Preference saved in localStorage
  • Toggle via sidebar icon

WebSocket Client​

Connects to /api/ws/metrics for:

  • Real-time metric updates
  • Live server status
  • Event notifications

API Service​

Centralized API client in services/api.ts:

  • Axios instance with base URL
  • Authentication header injection
  • Error handling
  • Type-safe request/response

For detailed API information, see API Reference.