LDS MCP App

Ce qu'il fait

LDS MCP App rend les composants Lens Design System (LDS) directement dans l'interface de chat de Claude via les MCP Apps. Il fournit deux outils interactifs : un Aperçu de la santé du cluster avec un DataTable triable, des graphiques Sparkline en ligne et des StatusIndicators pour la santé des nœuds ; et des Métriques de ressources de namespace avec des graphiques TimeSeries à aires empilées montrant l'utilisation du CPU et de la mémoire à travers les namespaces Kubernetes. Une implémentation de référence pour construire des MCP Apps avec le Lens Design System.

Caractéristiques clés

• Aperçu de la santé du cluster — DataTable triable avec graphiques Sparkline en ligne et StatusIndicators codés par couleur pour chaque nœud
• Métriques de ressources de namespace — graphiques TimeSeries à aires empilées pour l'utilisation du CPU et de la mémoire à travers les namespaces Kubernetes
• Lens Design System — utilise les composants React @lensapp/lds (DataTable, Sparkline, StatusIndicator, TimeSeries, StateContainer)
• Bundles HTML monofichier — Vite + vite-plugin-singlefile regroupent React + LDS + CSS en un seul fichier HTML par outil (~750 Ko)
• Double transport — supporte les modes stdio et HTTP pour Claude Desktop ou Claude.ai

Installation

Claude Desktop (stdio)

{
  "mcpServers": {
    "lds-mcp-app": {
      "command": "node",
      "args": [
        "/path/to/lds-mcp-app/node_modules/tsx/dist/cli.mjs",
        "/path/to/lds-mcp-app/server-stdio.ts"
      ]
    }
  }
}

Claude Desktop (HTTP)

npm run serve

{
  "mcpServers": {
    "lds-mcp-app": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

Claude.ai avec tunnel

npm run serve
npx cloudflared tunnel --url http://localhost:3001

Ajoutez l'URL du tunnel + /mcp comme connecteur personnalisé dans Paramètres Claude → Connecteurs.

Hôtes supportés

• Claude Desktop — support complet des MCP Apps via stdio ou HTTP
• Claude.ai — via connecteur personnalisé avec tunnel