4.4 KiB
4.4 KiB
MCP Gateway Dashboard Setup
Overview
The dashboard provides real-time monitoring of all MCP services with:
- Service Health Status (healthy/warning/unhealthy)
- Tool Counts per service
- Response Times for each backend
- Live Updates every 30 seconds
- Summary Statistics (total services, total tools, healthy count)
Files Created
dashboard/dashboard.html- Standalone React dashboardgateway-proxy/dashboard_routes.py- FastAPI routes for status endpointsDashboard.jsx- React component (for reference/development)
Integration Steps
1. Add Dashboard Routes to Gateway Proxy
Edit gateway-proxy/gateway_proxy.py and add these imports:
from dashboard_routes import setup_dashboard_routes
import asyncio
In the app initialization section (after creating the FastAPI app), add:
# Setup dashboard routes
dashboard_router = await setup_dashboard_routes(app)
app.include_router(dashboard_router)
2. Ensure Static Files Are Served
The gateway must serve static files. Add to your FastAPI app setup:
from fastapi.staticfiles import StaticFiles
# Mount dashboard static files
app.mount("/dashboard", StaticFiles(directory="dashboard"), name="dashboard")
3. Verify Dockerfile
Make sure the Dockerfile copies the dashboard folder:
COPY dashboard/ /app/dashboard/
Usage
Once running, access the dashboard at:
http://localhost:4444/dashboard
Or if running on a remote server:
https://mcp.wilddragon.net/dashboard
API Endpoints
Get All Services Status
curl http://localhost:4444/mcp/status
Response:
{
"timestamp": "2026-03-31T12:34:56.789Z",
"services": [
{
"name": "ERPNext",
"key": "erpnext",
"url": "http://mcp-erpnext:32802/mcp",
"status": "healthy",
"toolCount": 42,
"responseTime": 125.5,
"lastCheck": "2026-03-31T12:34:56.789Z"
},
...
],
"summary": {
"total": 5,
"healthy": 5,
"warning": 0,
"unhealthy": 0,
"totalTools": 150
}
}
Get Specific Service Status
curl http://localhost:4444/mcp/status/erpnext
Dashboard Features
Summary Statistics
- Total Services - Number of MCP backends configured
- Total Tools - Aggregate count of all available tools
- Healthy Services - Count of services with "healthy" status
Service Cards
Each service displays:
- Service Name with status badge (green/yellow/red)
- Tools Available - Count of callable tools
- Response Time - Latency to service in milliseconds
- Service URL - Full HTTP endpoint
- Last Check - Timestamp of last health check
Status Indicators
Healthy (Green)
- Service is running and responding
- Tools are accessible
- Response time under normal range
Warning (Yellow)
- Service is responding but with issues
- May be slow or returning partial data
- Investigate configuration or load
Unhealthy (Red)
- Service is not responding
- Cannot retrieve tools
- Check service logs and Docker status
Troubleshooting
Dashboard Not Loading
- Check gateway is running:
docker ps | grep mcp-gateway - Verify dashboard files exist:
ls gateway-proxy/dashboard/ - Check gateway logs:
docker logs mcp-gateway - Ensure Flask/FastAPI is serving static files correctly
Services Showing "Unhealthy"
- Check service container is running:
docker ps - View service logs:
docker logs mcp-<service> - Test service directly:
curl http://localhost:<port>/mcp/tools - Check network connectivity in Docker:
docker network ls
No Tools Appearing
- Verify MCP service has loaded its tools
- Check service logs for initialization errors
- Restart the service:
docker compose restart mcp-<service> - Rebuild if configuration changed:
docker compose up --build
Auto-Refresh
The dashboard automatically refreshes every 30 seconds. You can also manually refresh by clicking the "Refresh" button.
The refresh interval can be adjusted in dashboard/dashboard.html (search for setInterval(fetchServiceStatus, 30000)).
Performance Notes
- Dashboard makes requests to
/mcp/statusendpoint - Each status check queries all services (health check + tool count)
- Response time is typically 1-5 seconds depending on service count and network
- Results are displayed with individual service response times
- No heavy processing — all work done by individual MCP services