Skip to main content

Quick Start

Get up and running with MCP Gatekeeper in just a few minutes!

Starting the Application​

After installation, start both backend and frontend:

npm run dev

This starts:

  • Backend API at http://127.0.0.1:8000
  • Frontend UI at http://localhost:5173

First Steps​

1. Open the Web UI​

Navigate to http://localhost:5173 in your browser.

2. Explore the Dashboard​

The Dashboard page shows:

  • Real-time Metrics: Tool call counts, errors, and latency
  • Recent Events: Latest tool calls and activities
  • Server Status: Currently running MCP servers

3. Install Your First MCP Server Package​

  1. Navigate to the Stdio Servers page
  2. Click "Install from npm"
  3. Enter a package name (e.g., @modelcontextprotocol/server-filesystem)
  4. Click Install

The package will be downloaded and installed automatically.

4. Configure an Agent​

  1. Go to the Agents page
  2. Select an agent (Claude Desktop, Windsurf, etc.)
  3. Click "Add Server" to configure an MCP server
  4. Fill in the server details:
    • Name: A descriptive name
    • Command: The command to run the server
    • Arguments: Command-line arguments (optional)
    • Environment Variables: Any required env vars (optional)
  5. Click Save

The agent configuration file will be updated automatically.

5. View Server Activity​

  1. Navigate to the Servers page
  2. Click on a server to view its details
  3. Click "View Activity" to see:
    • Real-time logs
    • Tool call metrics
    • Performance statistics

Common Tasks​

Installing a Package​

# From the Web UI: Stdio Servers → Install from npm
# Package name examples:
- @modelcontextprotocol/server-filesystem
- @modelcontextprotocol/server-github
- @modelcontextprotocol/server-puppeteer

Viewing Logs​

Navigate to Logs page to:

  • View all server logs in terminal-style interface
  • Filter by log level (DEBUG, INFO, WARNING, ERROR)
  • Search logs using regex patterns
  • Copy logs to clipboard
  • Download logs as JSON

Checking Metrics​

Go to Metrics page for:

  • Tool call distribution charts
  • Latency histograms
  • Error rate tracking
  • Time series data

Managing Servers​

From the Servers page:

  • Start/Stop servers
  • View Details and tools available
  • Monitor Activity in real-time
  • Delete servers you no longer need

Understanding the Interface​

The sidebar provides access to:

  • Dashboard: Overview and real-time updates
  • Agents: Configure AI agent integrations
  • Stdio Servers: Install and manage STDIO packages
  • HTTP Servers: Configure remote HTTP MCP servers
  • Servers: Monitor MCP server activity
  • Metrics: View analytics and statistics
  • Logs: Browse and search logs

Theme Toggle​

Click the sun/moon icon in the sidebar header to switch between:

  • Light Theme: Clean, modern interface
  • Dark Theme: Neon green cyberpunk aesthetic

Your preference is saved automatically.

Next Steps​

Need Help?​