mcp-dashboards 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KyuRish
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,211 @@
+# MCP Dashboard
+
+mcp-name: io.github.KyuRish/mcp-dashboard
+
+**Turn your data into interactive dashboards inside any AI client.**
+
+[![npm](https://img.shields.io/npm/v/mcp-dashboard)](https://www.npmjs.com/package/mcp-dashboard)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+The first MCP server that renders live, interactive Chart.js visualizations directly inside Claude Desktop, VS Code, and other MCP Apps-compatible clients. No browser needed - your charts appear right in the conversation.
+
+## Features
+
+- **Pie & Donut Charts** - key-value data with percentages, labels, hover tooltips
+- **Bar Charts** - vertical/horizontal, stacked, multi-series support
+- **Line & Area Charts** - smooth curves, gradient fills, time series
+- **Sortable Data Tables** - click-to-sort columns, numeric alignment, striped rows
+- **Full Dashboards** - KPI cards with trend indicators + multiple charts in a responsive grid
+- **Auto-Detect from JSON** - pass any JSON and get the best visualization automatically
+- **Auto Dark/Light Mode** - adapts to your system theme
+- **Fully Self-Contained** - Chart.js bundled inline, zero external requests
+- **Animated** - staggered card entrances, smooth hover effects, loading states
+
+## Installation
+
+### Claude Desktop
+
+Add to your Claude Desktop config (`claude_desktop_config.json`):
+
+```json
+{
+  "mcpServers": {
+    "dashboard": {
+      "command": "npx",
+      "args": ["-y", "mcp-dashboard", "--stdio"]
+    }
+  }
+}
+```
+
+### Claude Code (VS Code)
+
+```bash
+claude mcp add dashboard -- npx -y mcp-dashboard --stdio
+```
+
+### Remote (Streamable HTTP)
+
+```bash
+npx mcp-dashboard
+# Server starts on http://localhost:3001/mcp
+```
+
+## Tools
+
+### `render_pie_chart`
+
+Render a pie or donut chart from label-value pairs.
+
+```
+"Show me a pie chart of browser market share:
+Chrome 65%, Safari 18%, Firefox 8%, Edge 5%, Other 4%"
+```
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Chart title |
+| data | [{label, value}] | Yes | Array of segments |
+| options.donut | boolean | No | Hollow center (default: false) |
+| options.showLegend | boolean | No | Show legend (default: true) |
+
+### `render_bar_chart`
+
+Render vertical or horizontal bar charts with multi-series support.
+
+```
+"Create a bar chart comparing Q1-Q4 revenue for 2024 vs 2025"
+```
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Chart title |
+| labels | string[] | Yes | Category labels |
+| datasets | [{label, data}] | Yes | Data series |
+| options.horizontal | boolean | No | Horizontal bars (default: false) |
+| options.stacked | boolean | No | Stack datasets (default: false) |
+
+### `render_line_chart`
+
+Render line or area charts with smooth curves and gradient fills.
+
+```
+"Plot my portfolio value over the last 12 months as a line chart"
+```
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Chart title |
+| labels | string[] | Yes | X-axis labels |
+| datasets | [{label, data}] | Yes | Data series |
+| options.fill | boolean | No | Area fill (default: true) |
+| options.smooth | boolean | No | Smooth curves (default: true) |
+| options.showPoints | boolean | No | Show data points (default: false) |
+
+### `render_dashboard`
+
+Render a full dashboard with KPI cards and multiple charts.
+
+```
+"Create a sales dashboard with total revenue, growth rate, and customer count as KPIs,
+plus a line chart of monthly revenue and a pie chart of revenue by region"
+```
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Dashboard title |
+| kpis | [{label, value, change?, prefix?, suffix?}] | No | KPI metric cards |
+| charts | [{type, title?, ...chartConfig}] | Yes | Charts to display |
+
+**KPI fields:**
+- `label` - metric name
+- `value` - the number or text
+- `change` - percentage change (positive = green arrow up, negative = red arrow down)
+- `prefix` - e.g. "$", "Rs."
+- `suffix` - e.g. "%", " users"
+
+### `render_table`
+
+Render a sortable, interactive data table. Click column headers to sort.
+
+```
+"Show me a table of the top 10 countries by GDP"
+```
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Table title |
+| columns | string[] | Yes | Column names in display order |
+| rows | [{key: value}] | Yes | Array of row objects |
+| options.sortable | boolean | No | Enable sorting (default: true) |
+| options.striped | boolean | No | Alternating row colors (default: false) |
+
+### `render_from_json`
+
+Pass any JSON data and get the best visualization automatically.
+
+```
+"Visualize this JSON data: [{"month": "Jan", "sales": 1200}, ...]"
+```
+
+**Auto-detection rules:**
+- `[{name, value}]` (1 string + 1 number key) - Pie chart
+- `[{category, sales, profit}]` (1 string + N number keys) - Grouped bar chart
+- `[{date, price}]` (date-like key + number keys) - Line chart
+- `{key: number}` (flat object with numeric values) - Pie chart
+- `[1, 2, 3]` (array of numbers) - Bar chart
+- Complex objects with 3+ keys - Sortable table
+- Unrecognizable - Raw JSON display
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| title | string | Yes | Chart title |
+| data | any | Yes | Any JSON data |
+| options.preferredType | string | No | Force: "pie", "bar", "line", or "table" |
+
+## Development
+
+```bash
+git clone https://github.com/KyuRish/mcp-dashboard.git
+cd mcp-dashboard
+npm install
+npm run build
+npm run serve
+```
+
+### Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run build` | Build UI + server |
+| `npm run build:ui` | Bundle HTML with Vite |
+| `npm run build:server` | Compile TypeScript server |
+| `npm run serve` | Start HTTP server on port 3001 |
+| `npm start` | Build + serve |
+
+## How It Works
+
+This server uses [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) (SEP-1865) to return interactive HTML that renders inside AI clients as sandboxed iframes.
+
+1. You ask the AI to visualize data
+2. AI calls the appropriate MCP tool with your data
+3. Server generates structured content + links to a bundled HTML resource
+4. Client renders the HTML as an interactive widget inline in the conversation
+5. Chart.js handles rendering, tooltips, hover effects - all inside the iframe
+
+The entire UI (Chart.js + CSS + JS) is bundled into a single self-contained HTML file using Vite + vite-plugin-singlefile. No CDN, no external requests.
+
+## Requirements
+
+- Node.js 18+
+- An MCP Apps-compatible client (Claude Desktop, VS Code, Goose, etc.)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+/**
+ * Entry point for the MCP Dashboard server.
+ * Run with: npx mcp-dashboard
+ * Or: node dist/index.js [--stdio]
+ */
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";AAEA;;;;GAIG"}

package/dist/index.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/**
+ * Entry point for the MCP Dashboard server.
+ * Run with: npx mcp-dashboard
+ * Or: node dist/index.js [--stdio]
+ */
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { createServer } from "./server.js";
+async function startStreamableHTTPServer(factory) {
+    const port = parseInt(process.env.PORT ?? "3001", 10);
+    const express = await import("express");
+    const cors = await import("cors");
+    const app = express.default();
+    app.use(cors.default());
+    app.use(express.default.json());
+    app.all("/mcp", async (req, res) => {
+        const server = factory();
+        const transport = new StreamableHTTPServerTransport({
+            sessionIdGenerator: undefined,
+        });
+        res.on("close", () => {
+            transport.close().catch(() => { });
+            server.close().catch(() => { });
+        });
+        try {
+            await server.connect(transport);
+            await transport.handleRequest(req, res, req.body);
+        }
+        catch (error) {
+            console.error("MCP error:", error);
+            if (!res.headersSent) {
+                res.status(500).json({
+                    jsonrpc: "2.0",
+                    error: { code: -32603, message: "Internal server error" },
+                    id: null,
+                });
+            }
+        }
+    });
+    const httpServer = app.listen(port, () => {
+        console.log(`MCP Dashboard server listening on http://localhost:${port}/mcp`);
+    });
+    const shutdown = () => {
+        console.log("\nShutting down...");
+        httpServer.close(() => process.exit(0));
+    };
+    process.on("SIGINT", shutdown);
+    process.on("SIGTERM", shutdown);
+}
+async function startStdioServer(factory) {
+    await factory().connect(new StdioServerTransport());
+}
+async function main() {
+    if (process.argv.includes("--stdio")) {
+        await startStdioServer(createServer);
+    }
+    else {
+        await startStreamableHTTPServer(createServer);
+    }
+}
+main().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";AAEA;;;;GAIG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,6BAA6B,EAAE,MAAM,oDAAoD,CAAC;AAGnG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,UAAU,yBAAyB,CACtC,OAAwB;IAExB,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,IAAI,MAAM,EAAE,EAAE,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC;IACxC,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC;IAElC,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAC9B,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IACxB,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC;IAEhC,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,GAAY,EAAE,GAAa,EAAE,EAAE;QACpD,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC;QACzB,MAAM,SAAS,GAAG,IAAI,6BAA6B,CAAC;YAClD,kBAAkB,EAAE,SAAS;SAC9B,CAAC,CAAC;QAEH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;YACnB,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;YAClC,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC;YACH,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAChC,MAAM,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACpD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;gBACrB,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBACnB,OAAO,EAAE,KAAK;oBACd,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,uBAAuB,EAAE;oBACzD,EAAE,EAAE,IAAI;iBACT,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE;QACvC,OAAO,CAAC,GAAG,CAAC,sDAAsD,IAAI,MAAM,CAAC,CAAC;IAChF,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAClC,CAAC;AAED,KAAK,UAAU,gBAAgB,CAAC,OAAwB;IACtD,MAAM,OAAO,EAAE,CAAC,OAAO,CAAC,IAAI,oBAAoB,EAAE,CAAC,CAAC;AACtD,CAAC;AAED,KAAK,UAAU,IAAI;IACjB,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QACrC,MAAM,gBAAgB,CAAC,YAAY,CAAC,CAAC;IACvC,CAAC;SAAM,CAAC;QACN,MAAM,yBAAyB,CAAC,YAAY,CAAC,CAAC;IAChD,CAAC;AACH,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;IACjB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}