@slickfast/mcp

SlickFast — charts & dashboards for AI agents

_{↑ Engine output — one JSON spec, one image. Get this exact board on your own GitHub README with the dashboard template (teal-hero layout).}

SlickFast is a pure rendering primitive: JSON spec → SVG → PNG in milliseconds. No browser, no Puppeteer, no heavy dependencies. Deterministic by design — same spec, same image, every time.

Most chart-to-image tools secretly spin up a full headless browser — hundreds of MB, slow cold starts, flaky screenshots. SlickFast renders pure in-memory: no Chromium, no GPU, no DOM, no randomness, no drift. That one decision is why it's fast enough for agents, cheap enough to cache by spec-hash, and reproducible enough to test against.

47 chart and information-design types (bar, line, pie, KPI, cards, funnel, gauge, heatmap, calendar, gantt, waterfall…), plus entire multi-chart dashboards tiled into one image in a single call. It runs as an MCP tool, so an agent hands it a spec and gets back a finished PNG (or SVG) — 100% local, nothing leaves your machine.

⚡ This image is LIVE — SlickFast rendering its own real project stats right now, updated automatically by a cron. The same one-URL trick works in your README:

render_chart({ type: "bar", data: { labels: ["Q1","Q2","Q3"], series: [{ values: [12,19,8] }] } })
  → a retina PNG, rendered on your machine

See it

One tool call, JSON in, image out — and the token math that makes it agent-native:

A seller ops board — funnel, bullet graph, goal ring, gauge, calendar heatmap, leaderboard — one render (demo data):

And the board that explains the whole engine — it times its own render into its title:

More at slickfast.com/#gallery — every image there is engine output.

Why agents (and the people paying for their tokens) pick SlickFast

• Tokens are the real cost — a spec is nearly free. An agent hand-writing SVG or matplotlib code burns hundreds to thousands of output tokens, then often retries when it doesn't render. A SlickFast spec is a few dozen tokens, and {type, data} alone is a finished, well-designed chart. A whole dashboard is one tool call, not ten renders and layout math.
• Changes are one-field edits. Swap bar → line, change a palette, resize for a slide: edit one key, re-render. The agent never rewrites code or reasons about a diff — which is what makes iteration with a human ("make it dark, bigger title") actually cheap.
• No headless browser. Most chart-to-image pipelines secretly spawn Puppeteer or Playwright — hundreds of MB, slow cold starts, flaky output. SlickFast renders pure in-memory, milliseconds per chart.
• Native SVG, vector-first. Output is a few KB of crisp-at-any-scale SVG (or retina PNG on demand) — small enough to cache, embed, or ship anywhere.
• Deterministic — same spec, same chart, every time. No randomness, no timestamps, no browser drift. Cacheable, testable, reproducible; zero flaky pixel diffs. Almost no charting tool can promise this — and it's exactly what a tool-calling agent needs.
• Never throws garbage at the model. Empty data, a bad tile, a filtered-to-nothing series → a clean, graceful frame, not a crash or a stack trace. A real mistake (unknown palette, bad enum) → a loud error listing the valid options, so the agent self-corrects in one step.
• 100% local & private. Rendered and rasterized on your machine. Nothing is sent anywhere.

Tools

• render_chart(spec) → the chart as a PNG image (default) or SVG (format: "svg"). For a dashboard, pass type: "dashboard" with tiles: [{ chart, span }] — each tile is a full spec of any other type, composited into one image in a single render.
• describe_type(type) → the exact data shape, a minimal working spec, and per-type gotchas. Call it first when you're unsure how to structure a type.
• gallery() → a curated demo gallery of example charts and dashboards — each as a rendered image plus its spec. Just ask "show me a demo" or "what can you make?". gallery({board:"comparison"}) tiles a whole family into one image; board:"all" shows every type across 6 boards.
• list_palettes() → every valid palette name, grouped into flat palettes and nested themes, with their colors. Ask "what palettes are available?".
• share_chart(spec, name?) → turn a chart into a public, embeddable URL — for a README, email, Slack, or a live auto-updating chart (push new data, every embed updates). Ask to "share this chart" or "make this a live chart." Talks to the hosted API (free key at slickfast.com); rendering itself stays 100% local. The returned URL contains no key — safe to paste anywhere.
• read_chart(url) → the spec twin of any SlickFast chart URL — the exact JSON spec and data the image was rendered from. Paste a SlickFast link and ask about it: charts here are data, not just pixels.
• push_to_trmnl(spec, webhook_url) → render at e-ink size and push the PNG to a TRMNL display via its Webhook Image plugin. Supports TRMNL OG and TRMNL X dimensions.
• describe_pagespec() → the full SlickFast Pages contract: one JSON pagespec → a whole designed web page (hero + prose + charts + stat tiles). Section types, themes, the markdown subset, and how to make pages clickable (dashboard tiles that drill into detail pages).
• render_page(pagespec) → the page as complete, self-contained HTML — rendered locally, nothing leaves your machine. Pass outputPath to save an .html file you can open.
• publish_page(pagespec) → put the page on a public URL via the hosted API. Free keys publish 7-day watermarked pages; paid keys publish permanent ones; DELETE /pages/{slug} with the same key revokes. Every page URL + .json returns its pagespec twin with its fingerprint.
• report_issue(summary, spec?) → "report this bug." Formats a bug report and returns a prefilled GitHub-issue link and email link you click to send — SlickFast sends nothing itself.

Install

Everything renders locally and privately for free. When you want a public URL for a README, email, or Slack — or a live auto-updating chart — there's a hosted API with a generous free tier (no card required).

One-click:

Or add to your MCP config and restart — it runs locally via npx, no clone or build needed:

{ "mcpServers": { "slickfast": { "command": "npx", "args": ["-y", "@slickfast/mcp"] } } }

• Claude Desktop — claude_desktop_config.json (Settings → Developer → Edit Config; macOS: ~/Library/Application Support/Claude/)
• Claude Code — one command: claude mcp add slickfast -- npx -y @slickfast/mcp
• Cursor — Settings → MCP → Add new server, or the same JSON in ~/.cursor/mcp.json
• claude.ai (no install at all) — Settings → Connectors → Add custom connector → paste https://mcp.slickfast.com — sign in with a free key, or take the demo for a spin first

Try this first (after restarting):

"Show me what SlickFast can do" — renders the gallery, live in your chat.

Then: "build a dashboard with an MRR tile, a signups funnel, and a usage heatmap."

Two ready-made starter prompts (Try SlickFast and Build a dashboard) also appear in clients that surface MCP prompts — one click, no typing.

Not seeing it? Restart the app after editing the config (MCP servers load at startup) · needs Node 18+ (node -v) · first npx run downloads once, then it's instant · one stray comma breaks the JSON. Still stuck → open an issue.

Seeing your charts (the reliable way to display them)

Rendering is always local — nothing leaves your machine. This section is purely about which surface displays the result. render_chart returns two ways, and they differ a lot:

• format:"svg" → the reliable inline path. Returns SVG text. In a chat surface that supports artifacts (claude.ai, Claude Desktop), the agent creates an artifact containing that SVG and presents it — that's the display step; the SVG string in the tool result is not user-visible on its own. Ask for a chart and Claude does this — no config, no gymnastics.
• format:"png" (default) → a base64 image block. It only paints where the client renders MCP image blocks, which is inconsistent across surfaces — many chat UIs, and every coding/terminal view, don't. Don't depend on it for inline display.

Other ways to get the picture:

• Share/embed anywhere (Slack, email, a webpage) → the hosted API returns a public …/chart.png?spec=… URL that renders everywhere, independent of any MCP client.
• Local stdio install (the MCP shares your disk) → pass outputPath to write the PNG/SVG to disk and open the file. In a hosted/sandboxed MCP the process is filesystem-isolated (a saved file is invisible to you) — use the SVG-artifact path instead.

If you asked for a chart and see nothing: it rendered (the agent can read you the values) — it's a display-surface gap, not a bug. Have the agent re-render with format:"svg" into an artifact, or view it in a claude.ai / Claude Desktop chat. If the tool is missing or erroring entirely, that's a connection problem — restart so the MCP server reconnects.

Sharing a chart as a URL (hosted API)

Rendering is fully local and needs no network. When you want a chart other people can see — embedded in a README, an email, Slack — ask to "share this chart": the share_chart tool publishes it to the hosted API and returns a permanent public URL (no key inside, safe to paste anywhere). It's a live chart: push new data to the same name and every embed updates by itself — that's what powers the live dashboard at the top of this page. The agent offers this only when you ask to share or publish — rendering stays local and private otherwise. Needs a free API key (250 renders/mo, no card) at slickfast.com, set as SLICKFAST_API_KEY in the MCP config.

License

AGPL-3.0-only. Free to use, self-host, and embed under the AGPL's terms (your friends running it locally are completely unaffected). Building it into a closed-source product or a hosted service? That needs the AGPL'd source opened — or a commercial license from us instead: simple per-app licenses from $99/year, no license keys — slickfast.com/license.html or [e-mail].

Feedback, bugs & feature requests

• GitHub: SlickFast/slickfast — bug reports and feature requests via the issue templates.
• Email: [e-mail]
• Or ask your agent to "report this as a SlickFast issue" — the report_issue tool drafts the report (with the repro spec) for you. Nothing is ever sent automatically.

Developing locally

Clone the repo, then from the package directory:

cd apps/mcp
npm install
node test-client.mjs   # spawns the server, calls render_chart, checks the output

To point an MCP client at a local checkout instead of the published package, use "command": "node", "args": ["<path-to-clone>/apps/mcp/server.mjs"].