chartsbyscott

An MCP server that lets Claude Code render charts in your browser in real-time.

Claude calls tools like create_chart, update_chart, delete_chart — charts appear instantly in a local dashboard and update live via WebSocket without reloading the page.

How it works

• Runs entirely locally — no external server, no accounts, no API keys
• Starts an MCP server (stdio) + a local HTTP server (port 3100) + a WebSocket server (port 3101)
• Dashboard is served at http://localhost:3100 and opens automatically on first chart
• The page holds a live WebSocket connection — when Claude pushes new data, charts update instantly
• Uses Chart.js for rendering, with a dark theme and responsive grid layout

Install

Recommended: install from npm

claude mcp add --scope user --transport stdio charts -- npx -y chartsbyscott

That's it. npx fetches the package, caches it, and runs it whenever Claude Code starts. No clone, no install step.

Alternative: run from GitHub

claude mcp add --scope user --transport stdio charts -- npx -y github:sevgibson/chartsbyscott

Alternative: clone locally

git clone https://github.com/sevgibson/chartsbyscott.git
cd chartsbyscott
npm install
claude mcp add --scope user --transport stdio charts -- node /absolute/path/to/chartsbyscott/index.js

Viewing charts

Open http://localhost:3100 in any browser — the dashboard auto-opens the first time Claude creates a chart. Keep the tab open; every subsequent create_chart / update_chart / delete_chart from Claude updates the dashboard in real-time via WebSocket. No refresh needed.

Tools exposed to Claude

| Tool | Purpose | |------|---------| | create_chart | Create or replace a chart | | update_chart | Update data on an existing chart without recreating it | | delete_chart | Remove a chart | | clear_all | Remove all charts | | list_charts | List current chart IDs, types, and titles |

Chart types

line, bar, pie, scatter, area, doughnut, radar, polarArea

Data format

{
  "labels": ["7:30", "7:40", "7:50"],
  "datasets": [
    { "label": "app-1", "data": [0.378, 0.372, 0.373] },
    { "label": "app-2", "data": [0.394, 0.393, 0.389] }
  ]
}

Example usage in Claude Code

Once installed, just ask Claude to chart things:

"Pull the last hour of response times from New Relic and chart it"

"Compare the memory usage across my three servers as a bar chart"

"Benchmark these two queries 10 times each and show me the results over time"

Claude will call create_chart (and update_chart as data streams in) — the dashboard updates live.

Ports

Defaults: HTTP on 3100, WebSocket on 3101. Override with env vars:

CHARTS_HTTP_PORT=4000 CHARTS_WS_PORT=4001 npx chartsbyscott

License

MIT