Live Dashboard Builder MCP Server

Customizable dashboard with chart widgets (line, bar, pie, metric), data fetching via tool calls, and responsive grid layout.

Features

• Multiple Chart Types - Line charts for trends, bar charts for comparisons, pie charts for composition, and metric cards for KPIs
• Dynamic Data Generation - Fetch mock data for widgets with deterministic but varied output based on data source names
• Responsive Grid Layout - Drag-and-drop dashboard layout with persistent position updates
• Real-time Updates - Refresh widget data on demand with tool calls
• TypeScript Support - Fully typed MCP server implementation
• Express Integration - Embedded HTTP server for UI asset serving

Installation

npm install @gongrzhe/server-live-dashboard-builder

Usage

As a CLI

npx @gongrzhe/server-live-dashboard-builder

Claude Desktop Configuration

{
  "mcpServers": {
    "live-dashboard-builder": {
      "command": "npx",
      "args": ["-y", "@gongrzhe/server-live-dashboard-builder"]
    }
  }
}

Claude Code Configuration

claude mcp add live-dashboard-builder -- npx -y @gongrzhe/server-live-dashboard-builder

Tools

get-dashboard-data

Fetches mock data for the specified dashboard widgets. Each widget receives data appropriate to its chart type.

Input:

• widgets (array) - List of widgets to fetch data for
  • id (string) - Unique widget identifier
  • type (enum) - Chart type: line, bar, pie, or metric
  • title (string) - Widget display title
  • dataSource (string) - Data source identifier (used as seed for deterministic generation)

Output:

• widgets (array) - Generated data for each widget
  • Line/Bar/Pie: Chart.js dataset format with labels and data
  • Metric: Value, percentage change, and unit ($ for revenue, % for rates)

update-layout

Validates and returns an updated layout configuration for the dashboard widgets.

Input:

• layout (array) - Updated layout positions for widgets
  • id (string) - Widget identifier
  • x, y (number) - Grid position
  • w, h (number) - Grid dimensions

Output:

• Validation confirmation and layout structure

Example Prompt

Create a dashboard with a line chart for revenue, a bar chart for sales, and a metric card for active users. Position the revenue chart at top-left, sales chart at top-right, and users metric at the bottom.

License

MIT