LDS MCP App

What it does

LDS MCP App renders Lens Design System (LDS) components directly inside Claude's chat interface via MCP Apps. It provides two interactive tools: a Cluster Health Overview with sortable DataTable, inline Sparkline charts, and StatusIndicators for node health; and Namespace Resource Metrics with stacked area TimeSeries charts showing CPU and memory usage across Kubernetes namespaces. A reference implementation for building MCP Apps with the Lens Design System.

Key features

• Cluster Health Overview — sortable DataTable with inline Sparkline charts and color-coded StatusIndicators for each node
• Namespace Resource Metrics — stacked area TimeSeries charts for CPU and memory usage across Kubernetes namespaces
• Lens Design System — uses @lensapp/lds React components (DataTable, Sparkline, StatusIndicator, TimeSeries, StateContainer)
• Single-file HTML bundles — Vite + vite-plugin-singlefile bundles React + LDS + CSS into one HTML file per tool (~750KB)
• Dual transport — supports both stdio and HTTP modes for Claude Desktop or 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 with tunnel

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

Add the tunnel URL + /mcp as a custom connector in Claude Settings → Connectors.

Supported hosts

• Claude Desktop — full MCP Apps support via stdio or HTTP
• Claude.ai — via custom connector with tunnel