
Grafana MCP App
Interface UIpar nickytonline
Intégrez les données de surveillance Grafana dans vos chats IA avec des widgets React interactifs — réimplémente tous les outils de grafana/mcp-grafana avec une couche d'interface riche.
Ce qu'il fait
Grafana MCP App connecte les assistants IA à votre instance Grafana et rend les données de surveillance sous forme de widgets React interactifs directement dans l'interface de chat. Basée sur le protocole MCP Apps, elle réimplémente l'ensemble des outils de grafana/mcp-grafana et associe chaque résultat d'outil à un composant UI en direct — ainsi, les tableaux de bord, les panels et les états d'alerte sont affichés visuellement, et non plus seulement sous forme de JSON brut.
L'application s'adresse aux équipes qui souhaitent interroger les métriques Grafana, inspecter des tableaux de bord et trier des alertes via un chat IA sans avoir à changer de contexte vers un navigateur.
Fonctionnalités clés
- Parité complète avec grafana/mcp-grafana — réimplémente tous les outils Grafana en amont
- Couche de widgets React — chaque résultat d'outil s'affiche dans un composant UI interactif dans le chat
- Bascule du mode d'affichage — les widgets supportent les modes inline, image-dans-image et plein écran
- Mode asset inline — HTML autonome pour les hôtes qui isolent les iframes (ex: Claude.ai)
- Négociation des capacités UI — retour progressif vers le texte brut pour les clients MCP sans interface graphique
- Prêt pour Docker — Dockerfile multi-étapes avec vérifications de santé pour les déploiements de production
Installation
Ceci est un serveur MCP App auto-hébergé. Clonez et buildz localement :
git clone https://github.com/nickytonline/grafana-mcp
cd grafana-mcp
npm install
npm run build
NODE_ENV=production npm start
Le point de terminaison MCP sera disponible à l'adresse http://localhost:8080/mcp. Configurez votre connexion Grafana via les variables d'environnement dans .env.
Ajoutez à Claude Desktop (claude_desktop_config.json) une fois déployé :
{
"mcpServers": {
"grafana": {
"type": "http",
"url": "https://votre-hote-deploye.example.com/mcp"
}
}
}
Pour VS Code Copilot (settings.json) :
{
"github.copilot.chat.mcp.servers": {
"grafana": {
"type": "http",
"url": "https://votre-hote-deploye.example.com/mcp"
}
}
}
Pour ChatGPT : allez dans Paramètres → Connecteurs → Ajouter un Connecteur et saisissez https://votre-hote-deploye.example.com/mcp.
Hôtes supportés
Confirmés : ChatGPT, Claude Desktop, VS Code Copilot, Goose.







