{
"markdown": "# MCP Dashboards\n\n\n\n### Your AI can talk about data. Now it can show it.\n\n[](https://www.npmjs.com/package/mcp-dashboards)\n[](https://glama.ai/mcp/servers/@KyuRish/mcp-dashboards)\n[](https://glama.ai/mcp/servers/@KyuRish/mcp-dashboards)\n[](LICENSE)\n[](https://buymeacoffee.com/kyuish)\n[](https://github.com/sponsors/KyuRish)\n[](https://www.linkedin.com/in/rishabh-dogra-cloud)\n\n
\n \n \n \n \n \n Click any thumbnail to see full size\n
\n\n## The problem\n\nWe use AI for everything - analysis, reports, strategy. But when it comes to actually *seeing* the story in your data, you're stuck copying numbers into a spreadsheet and building charts yourself. The conversation has the insight. The visualization is somewhere else.\n\n## The solution\n\nMCP Dashboards renders interactive charts, dashboards, and KPI widgets directly inside your AI conversation. 32 chart tools covering 45+ chart subtypes (bar has stacked/drilldown, hero has 11 variants, flowchart has 6 node kinds + 5 edge styles, etc.), 21 themes, 4 visual discovery catalogs, live polling, PNG/PPT/A4 export - all from a single MCP server. No browser tabs, no copy-paste, no context switching.\n\n> [!IMPORTANT]\n> The only official npm package is [`mcp-dashboards`](https://www.npmjs.com/package/mcp-dashboards), published from this repository. Similarly named packages are not ours: `mcp-dashboards-shared` was malware (see [OSSF advisory MAL-2026-4296](https://github.com/ossf/malicious-packages), removed by npm security in May 2026). Install only `mcp-dashboards`.\n\n## Quick Start\n\n### Claude Desktop\n\nAdd to your `claude_desktop_config.json`:\n\n- **Windows:** `%APPDATA%\\Claude\\claude_desktop_config.json`\n- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`\n\n```json\n{\n \"mcpServers\": {\n \"dashboard\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"mcp-dashboards\", \"--stdio\"]\n }\n }\n}\n```\n\n### Claude Code / VS Code\n\n```bash\nclaude mcp add dashboard -- npx -y mcp-dashboards --stdio\n```\n\n### Remote (Streamable HTTP)\n\n```bash\nnpx mcp-dashboards\n# Server starts on http://127.0.0.1:3001/mcp\n```\n\nBound to localhost by default. See [Configuration](#configuration) if you need to expose it on your network or allow browser access from a non-localhost origin.\n\n### Supported clients\n\nWorks in any MCP Apps-compatible client: **Claude Desktop**, **Claude Web**, **VS Code** (GitHub Copilot), **Goose**, **Postman**, **MCPJam**. ChatGPT support is rolling out.\n\n## Just ask\n\nNo API to learn. Describe what you want in plain English:\n\n- *\"Compare Q1 vs Q2 revenue by region as a bar chart\"*\n- *\"Show my portfolio allocation as a donut chart with the boardroom theme\"*\n- *\"Build a dashboard with monthly sales KPIs and a trend line\"*\n- *\"Visualize website traffic by country on a world map\"*\n- *\"Track Bitcoin price live, updating every 30 seconds\"*\n- *\"Show the conversion funnel from signup to purchase\"*\n- *\"Rank the team by performance using a radar chart\"*\n- *\"Diagram my multi-agent pipeline as a flowchart and let me step through it\"*\n\nThe AI picks the right tool, formats your data, and renders the chart inline. Click any data point to ask follow-up questions.\n\n**Don't know where to start?** Ask *\"show me the catalog\"* - opens a master dashboard with one live visual tile per customization dimension (a real bar chart for charts, a pie for themes, a progress ring for hero variants, a neon-glowing card for effects). Click any tile, hit Ask, and you'll drill into that sub-catalog.\n\n## Interactive charts, not images\n\nEvery chart is **interactive HTML** rendered directly in your conversation:\n\n- **Explore in-chat** - hover tooltips, click-to-select (feeds back to the AI), drill-down with breadcrumbs, scroll-zoom up to 12x on maps and heatmaps\n- **Editable flowcharts** - drag nodes, multi-select, rename via right-click, minimap + node list to navigate, step-through playback of the flow, then sync your layout back to the AI to save it\n- **Live polling** - real-time charts that auto-update from any API on a timer\n- **Export anywhere** - PPT (16:9 slides), A4 (paginated with smart page breaks), PNG, CSV\n\n\nAll Tools\n\n| Tool | Type | Best For |\n|------|------|----------|\n| `render_pie_chart` | Pie/Donut | Composition - \"what makes up the whole?\" |\n| `render_bar_chart` | Bar | Comparison - vertical, horizontal, stacked, drill-down |\n| `render_line_chart` | Line/Area | Trends - smooth curves, gradient fills, time series |\n| `render_scatter_chart` | Scatter | Relationships - per-point labels, annotations, quadrants |\n| `render_candlestick_chart` | Candlestick | Finance - OHLC data with volume bars |\n| `render_radar_chart` | Radar | Multi-axis comparison - skills, scores, product attributes |\n| `render_treemap_chart` | Treemap | Hierarchy - nested rectangles sized by value |\n| `render_sankey_chart` | Sankey | Flow - money, users, or resources between stages |\n| `render_wordcloud_chart` | Word Cloud | Frequency - sized words from text analysis |\n| `render_boxplot_chart` | Boxplot/Violin | Distribution - quartiles, outliers, density shapes |\n| `render_live_chart` | Live | Real-time - auto-polls any MCP tool on a timer |\n| `poll_http` | Data proxy | Fetch JSON from any HTTP endpoint - secure presets or public URLs |\n| `render_bullet_chart` | Bullet | KPI vs target - 2-8 zone bands with labels |\n| `render_lollipop_chart` | Lollipop | Ranking - clean dots with optional target markers |\n| `render_dumbbell_chart` | Dumbbell | Gaps - before/after with scale labels and zone bands |\n| `render_variance_chart` | Variance | Budget - actual vs budget, color-coded over/under |\n| `render_funnel_chart` | Funnel | Conversion - staged drop-off with percentages |\n| `render_slope_chart` | Slope | Change - ranking shifts between two periods |\n| `render_waffle_chart` | Waffle | Proportion - 10x10 grid showing composition |\n| `render_sparkline_chart` | Sparkline | Compact trends - mini cards with change indicators |\n| `render_radial_cluster` | Radial | Health check - multi-metric ring gauges with status |\n| `render_waterfall_chart` | Waterfall | Cumulative - cascading bars showing impact |\n| `render_heatmap_chart` | Heatmap | Intensity - 2D grid with color mapping |\n| `render_geo_chart` | Geo/Map | Geography - color-coded countries by value (choropleth) |\n| `render_bubble_map` | Bubble Map | Pin map - sized circles at lat/lng coordinates |\n| `render_timeline_chart` | Timeline | Progress - milestone tracker with status indicators |\n| `render_flowchart` | Flowchart | Workflows, pipelines, architectures, agent flows - rich card-based DAG with status states, drag, zoom, live polling |\n| `render_hero_metric` | Hero | KPI widgets - 11 variants (progress ring, gem, orb, NPS, etc.) |\n| `render_dashboard` | Dashboard | Everything - KPI cards + multiple charts in responsive grid |\n| `render_table` | Table | Data - sortable columns, striped rows, CSV export |\n| `render_from_json` | Auto-detect | Any JSON data - picks the best chart automatically |\n| `render_from_url` | URL fetch | Fetches JSON from a URL and auto-visualizes |\n\n**Discovery / Catalogs** - visual entry points for browsing what's available:\n\n| Tool | Shows | When to use |\n|------|-------|-------------|\n| `render_catalog` | Master catalog with 4 live preview tiles | Don't know where to start. Click any tile, hit Ask, drill in. |\n| `render_chart_catalog` | All 32 chart types with mini previews | Looking for the right chart for your data |\n| `render_theme_catalog` | All 21 themes with color/typography/effects | Picking a theme |\n| `render_hero_catalog` | All 11 hero metric variants | Picking a KPI widget style |\n| `render_effects_catalog` | All 5 effect presets, each applied to a real card | Picking an animation/glow style |\n\nTypography is still configurable on every chart via `typography=` (8 options listed under [Themes](#themes)) - it just doesn't have its own catalog because all 8 options were visually identical without per-card font loading, which wasn't worth the build for one preview tool.\n\n\n\n\nWhich chart should I use?\n\n| Question | Best Chart | Also Works |\n|----------|-----------|------------|\n| \"What makes up the whole?\" | Pie/Waffle | Treemap, Stacked bar |\n| \"How do values compare?\" | Bar | Lollipop, Bullet, Radar |\n| \"What's the trend over time?\" | Line | Sparkline, Slope |\n| \"Are we hitting targets?\" | Bullet | Variance, Radial |\n| \"Where's the gap?\" | Dumbbell | Variance |\n| \"How does X relate to Y?\" | Scatter | Heatmap |\n| \"What's the conversion rate?\" | Funnel | Waterfall, Sankey |\n| \"What changed between periods?\" | Slope | Dumbbell |\n| \"What's the financial picture?\" | Candlestick | Line |\n| \"Show me the KPI\" | Hero metric | Dashboard |\n| \"What's the distribution?\" | Boxplot | Violin (same tool) |\n| \"Where does money/traffic flow?\" | Sankey | Treemap |\n| \"How do options score across axes?\" | Radar | Heatmap |\n| \"What are the top keywords?\" | Word Cloud | Bar, Treemap |\n| \"Where are users/sales/revenue?\" | Geo map | Bubble map, Heatmap |\n| \"Monitor this in real-time\" | Live chart | - |\n\n\n\n## Themes\n\n21 built-in themes. Pass `theme` to any tool.\n\n| Family | Themes |\n|--------|--------|\n| **Classic** | `boardroom`, `corporate`, `sales-floor`, `golden-treasury`, `clinical`, `startup`, `ops-control`, `tokyo-midnight`, `zen-garden`, `consultant` |\n| **Black/AI** | `black-tron` (cyan neon), `black-elegance` (warm gold), `black-matrix` (green hacker) |\n| **Forest** | `forest-amber` (autumn), `forest-earth` (terracotta) |\n| **Sky** | `sky-light` (airy blue), `sky-ocean` (deep navy), `sky-twilight` (sunset) |\n| **Office** | `office-red` (corporate red, white bg - report-ready) |\n| **Gray/ML** | `gray-hf` (warm yellow accent), `gray-copilot` (teal on dark) |\n\nMix-and-match with `palette`, `typography` (8 options: system, mono, professional, editorial, bold, techno, cyberpunk, luxury), and `effects` (5 presets: none, subtle, shimmer, neon, energetic).\n\n## Live Polling\n\nReal-time charts that auto-update from any API. The live chart polls data via `poll_http`, which supports two modes:\n\n### Secure presets (authenticated APIs)\n\nConfigure presets via env vars. Credentials stay server-side and never appear in the conversation.\n\n```json\n{\n \"mcpServers\": {\n \"dashboard\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"mcp-dashboards\", \"--stdio\"],\n \"env\": {\n \"POLL_PRESET_T212_CASH_URL\": \"https://live.trading212.com/api/v0/equity/account/cash\",\n \"POLL_PRESET_T212_CASH_HEADERS\": \"{\\\"Authorization\\\": \\\"Bearer YOUR_API_KEY\\\"}\"\n }\n }\n }\n}\n```\n\nThen ask: *\"Monitor my portfolio total and P/L live\"* - the AI uses `render_live_chart` with `pollArgs: { preset: \"t212_cash\" }`.\n\n**Naming:** `POLL_PRESET__URL` and `POLL_PRESET__HEADERS` (JSON object).\n\n### Public URLs (no auth needed)\n\nFor public APIs, use the URL directly:\n\n*\"Show me Bitcoin price updating every 30 seconds\"* - uses `pollArgs: { url: \"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd\" }`.\n\n## How It Works\n\nBuilt on [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps). You ask the AI to visualize data, it calls the right tool, and the chart renders inline in your conversation. Self-contained - zero CDN, zero external requests.\n\n**MCP Apps supported** (inline rendering): Claude Desktop, VS Code Insiders + MCP Apps extension, Goose, Postman.\n\n**No MCP Apps support?** No problem. Every chart response also includes a clickable link to the same interactive chart in your browser:\n- `http://localhost:PORT/chart/{id}` - the clickable link in chat. Backed by a tiny same-machine HTTP server bound to 127.0.0.1, lazy-started on the first preview request.\n- `file:///.../chart-{id}.html` - the persistent shareable artifact. Same HTML bytes, written to disk so you can email, archive, or open it after the server has shut down.\n\nWhy both: Claude Code (VS Code) strips `file://`, `vscode://`, and `command://` URL schemes from chat markdown, so only `http://` produces a working clickable link. The file:// path is provided for sharing and offline viewing. Tool annotations (`readOnlyHint`, `idempotentHint`, `openWorldHint`) help clients reason about tool behavior.\n\n## Configuration\n\nAll optional. Defaults are safe - set these only if you need to override.\n\n| Env var | Default | What it does |\n|---------|---------|--------------|\n| `MCP_DASHBOARDS_RETAIN_DAYS` | `7` | How long to keep chart preview HTML files on disk. `0` disables auto-cleanup. |\n| `MCP_DASHBOARDS_DISABLE_PREVIEW` | unset | Kill switch - no HTML files written, no preview server started, no preview links. Inline rendering still works in MCP Apps clients. |\n| `MCP_HTTP_BIND_HOST` | `127.0.0.1` | HTTP-transport bind host. Stays on localhost by default. Set to `0.0.0.0` only if you trust your network. |\n| `MCP_CORS_ALLOWED_ORIGINS` | localhost only | Comma-separated origins allowed to call the HTTP endpoint from a browser. Set this to add a non-localhost origin (e.g. `https://your-app.com`). |\n| `MCP_URL_ALLOWLIST` | empty | Comma-separated hostnames that bypass the SSRF guard for `render_from_url` / `poll_http`. Use only for internal endpoints you fully trust. |\n| `MCP_OUTBOUND_RATE_PER_SEC` | `10` | Per-host throttle for outbound HTTP calls. |\n| `MCP_OUTBOUND_BURST` | `20` | How many initial requests can fire immediately before the rate kicks in. |\n| `POLL_PRESET__URL` | - | Server-side preset URL for live polling. See [Live Polling](#live-polling). |\n| `POLL_PRESET__HEADERS` | - | Auth headers (JSON object) for the matching preset URL. |\n\n### What's on disk\n\nChart HTML files are written to `/mcp-dashboards/` and auto-deleted after 7 days. The chart's built-in download button (PNG / PPT / A4) is the recommended way to save anything permanently.\n\nAsk your AI to *\"list chart files\"* or *\"delete chart files older than 1 day\"* anytime - invokes `list_chart_files` / `delete_chart_files`.\n\n**Requirements:** Node.js 18+.\n\n\nContributing\n\n```bash\ngit clone https://github.com/KyuRish/mcp-dashboards.git\ncd mcp-dashboards\nnpm install\nnpm run build\nnpm run serve # http://localhost:3001\nnpm run dev # watch mode\n```\n\n\n\n## Support\n\nIf MCP Dashboards is useful to you:\n\n[](https://buymeacoffee.com/kyuish)\n[](https://github.com/sponsors/KyuRish)\n\nBuilt by [Rishabh Dogra](https://www.linkedin.com/in/rishabh-dogra-cloud) - connect on LinkedIn.\n\n## Privacy\n\nAll processing happens locally. No data is collected, transmitted, or stored externally.\n\nExternal calls only happen when *you* explicitly ask - `render_from_url` and `poll_http` need a URL or preset you provide. Both refuse to fetch private, loopback, or link-local addresses (your `192.168.*` network, AWS metadata at `169.254.169.254`, etc.) so a prompt-injected AI can't quietly reach internal services. They also throttle per hostname so a runaway loop won't get your IP banned from a real API.\n\nCredentials in env var presets never leave your machine. The browser preview server and the optional HTTP transport both bind to `127.0.0.1` by default and are not reachable from other devices. Chart HTML files live in your system temp folder and auto-delete after 7 days. See [Configuration](#configuration) to change any of this.\n\n## License\n\n[FSL-1.1-MIT](LICENSE) - Free to use for any purpose except building a competing commercial product. Each version converts to MIT two years after release. For commercial licensing, contact [contact@kyuish.com](mailto:contact@kyuish.com).\n\n### Third-party software\n\nThe bundled UI artifact (`dist/mcp-app.html`) embeds open-source libraries from the Chart.js, html2canvas-pro, Luxon, TopoJSON, and Dagre projects, distributed under MIT or ISC licenses. Full attribution and license texts are reproduced in [THIRD_PARTY_LICENSES.md](THIRD_PARTY_LICENSES.md).\n",
"bytes": 17301,
"sha": "81bfabba0a0c1da67a375d5e4f63fd416b0aecebda484c7c5c536f32b3ae8267",
"repo_slug": "kyurish/mcp-dashboards",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/mcp_io_github_kyurish_mcp_dashboards_c38cb172/readme"
}
![\"MCP](\"assets/demo.gif\")
\n ![\"Infrastructure](\"assets/dashboard-example.png\")
\n ![\"Chart](\"assets/chart-catalog.png\")
\n ![\"Theme](\"assets/theme-catalog.png\")
\n