Grafana MCP App

What it does

Grafana MCP App connects AI assistants to your Grafana instance and renders monitoring data as interactive React widgets directly inside the chat interface. Built on top of the MCP Apps protocol, it reimplements the full grafana/mcp-grafana tool set and pairs each tool result with a live UI component — so dashboards, panels, and alert states are displayed visually, not just as raw JSON.

The app targets teams that want to query Grafana metrics, inspect dashboards, and triage alerts through an AI chat without switching context to a browser.

Key features

• Full grafana/mcp-grafana parity — reimplements all upstream Grafana tools
• React widget layer — every tool result renders in an interactive UI component inside the chat
• Display mode toggling — widgets support inline, picture-in-picture, and fullscreen modes
• Inline asset mode — self-contained HTML for hosts that sandbox iframes (e.g. Claude.ai)
• UI capability negotiation — falls back gracefully to plain text for non-UI MCP clients
• Docker-ready — multi-stage Dockerfile with health checks for production deployments

Installation

This is a self-hosted MCP App server. Clone and build locally:

git clone https://github.com/nickytonline/grafana-mcp
cd grafana-mcp
npm install
npm run build
NODE_ENV=production npm start

The MCP endpoint will be available at http://localhost:8080/mcp. Configure your Grafana connection via environment variables in .env.

Add to Claude Desktop (claude_desktop_config.json) once deployed:

{
  "mcpServers": {
    "grafana": {
      "type": "http",
      "url": "https://your-deployed-host.example.com/mcp"
    }
  }
}

For VS Code Copilot (settings.json):

{
  "github.copilot.chat.mcp.servers": {
    "grafana": {
      "type": "http",
      "url": "https://your-deployed-host.example.com/mcp"
    }
  }
}

For ChatGPT: go to Settings → Connectors → Add Connector and enter https://your-deployed-host.example.com/mcp.

Supported hosts

Confirmed: ChatGPT, Claude Desktop, VS Code Copilot, Goose.