garrardkitchen/mcp-explorer-x-frontend repository overview

⁠MCP Explorer

A modern MCP (Model Context Protocol) and HTTP API explorer — browse tools, prompts, resources, invoke HTTP APIs, and chat with LLMs over live MCP connections. Built with a Vue 3 / Vite / PrimeVue frontend and an ASP.NET Core 10 backend, with a companion .NET CLI for scripted HTTP API and YAML runbook workflows.

📚 Full Documentation⁠ — user guide, feature reference, and configuration

⁠Images

⁠Quick Start — Single Container

dataRoot="$HOME/.config/McpExplorerX-docker"
docker run -d \
  -p 8091:8080 \
  -v "${dataRoot}:/root/.local/share/McpExplorer" \
  -e PREFERENCES__StoragePath=/data/settings.json \
  -e ASPNETCORE_ENVIRONMENT=Production \
  garrardkitchen/mcp-explorer-x:latest

Open http://localhost:8091⁠ in your browser.

⁠Mount your Azure credentials (optional — for Key Vault and Entra features)

dataRoot="$HOME/.config/McpExplorerX-docker"
docker run -d \
  -p 8091:8080 \
  -v "${dataRoot}:/root/.local/share/McpExplorer" \
  -v ~/.azure:/root/.azure \
  -e AZURE_CONFIG_DIR=/root/.azure \
  -e HOST_AZURE_CONFIG_DIR=${HOME}/.azure \
  -e PREFERENCES__StoragePath=/data/settings.json \
  -e ASPNETCORE_ENVIRONMENT=Production \
  garrardkitchen/mcp-explorer-x:latest

⁠Quick Start — Separate Services (docker-compose)

1. Copy the example env file and fill in your values:

curl -O https://raw.githubusercontent.com/garrardkitchen/mcp-explorer-x/main/.env.example
cp .env.example .env

1. Create a docker-compose.yml:

name: mcp-explorer

services:
  api:
    image: garrardkitchen/mcp-explorer-x-api:latest
    restart: unless-stopped
    env_file: .env
    environment:
      - ASPNETCORE_URLS=http://+:5000
      - ASPNETCORE_ENVIRONMENT=${ASPNETCORE_ENVIRONMENT:-Production}
      - PREFERENCES__StoragePath=${PREFERENCES__StoragePath:-/data/settings.json}
      - AZURE_CONFIG_DIR=/root/.azure
    volumes:
      - ${MCP_DATA_PATH:-mcp-data}:/data
      - ${HOST_AZURE_CONFIG_DIR:-azure-config-empty}:/root/.azure
    healthcheck:
      test: ["CMD", "curl", "-sf", "http://localhost:5000/healthz"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 30s
    networks:
      - internal

  frontend:
    image: garrardkitchen/mcp-explorer-x-frontend:latest
    restart: unless-stopped
    ports:
      - "${GATEWAY_PORT:-8090}:8080"
    depends_on:
      api:
        condition: service_healthy
    networks:
      - internal

volumes:
  mcp-data:
  azure-config-empty:

networks:
  internal:
    driver: bridge

1. Start:

docker compose up -d

Open http://localhost:8090⁠ in your browser.

⁠One-time Dev Tunnels sign-in (optional)

If you plan to use the Dev Tunnels feature to expose webhook callbacks publicly, sign the API container into Microsoft Dev Tunnels once. The credential persists in the devtunnels-cli Docker volume, so every future tunnel you create from the UI will start with zero friction — no device-code dialog.

./scripts/devtunnel-login.sh

The script runs devtunnel user login --use-device-code-auth inside the api container: open the URL it prints, enter the code, and you're done. Skipping this step is fine — the app will fall back to showing an in-app login dialog the first time you click Start on a tunnel.

⁠Features

• 🔌 MCP Connections — Streamable HTTP connections with custom headers, OAuth, and Azure Client Credentials authentication
• 🌐 HTTP API Explorer — Define/invoke/compare HTTP APIs with runtime templated inputs, tabbed history, and collection runs
• ⌨️ CLI (mcp-http) — Script HTTP API invoke/compare/history, YAML runbook validate/execute (MCP + HTTP), and definition import/export from terminal automation
• 🛠️ Tools — Browse and invoke tools with dynamic parameter forms; inspect JSON responses inline
• 💬 Prompts — List, execute, and pipe results directly to an LLM
• 📄 Resources & Templates — Browse MCP resources and expand templates with runtime parameters
• 🤖 Chat — SSE-streamed AI chat with automatic MCP tool calling; shows token usage and active tool badges
• ⚡ Workflows — Multi-step tool chain builder with execution history and built-in load testing
• 🛡️ Sensitive Data Protection — Regex + heuristic secret detection; AES-256 encryption at rest
• 🔐 Azure Integration — Browse Key Vaults for secrets, pick Entra app registrations, auto-populate tenant/scope from az login
• 🎨 10 Themes — Command Dark/Light, Nord, Dracula, Catppuccin Mocha, Solarized Light, GitHub Dark/Light, Material Dark/Light — persisted per user
• ⌨️ Command Palette — Ctrl+K / ⌘+K for keyboard-first navigation

⁠Environment Variables

⁠API / Runtime

⁠Preferences / Storage

⁠Azure (optional — enables Key Vault & App Registration features)

⁠LLM Service

⁠Tool Invocation

⁠Elicitation

⁠Gateway / docker-compose only

⁠Frontend (Vue / Vite) — build-time only

⁠Source & Licence

• Source: github.com/garrardkitchen/mcp-explorer-x⁠
• Docs: mcp-explorer-x-docs.garrardkitchen.com⁠