QuickChart MCP Server for Dynamic Chart Generation

Overview

The QuickChart MCP Server is a small web service that exposes QuickChart.io chart rendering through the Model Context Protocol (MCP). It lets language models or other agents request on-demand chart images by sending structured chart configurations (Chart.js options) rather than handcrafting URLs or embedding plotting libraries. The server translates MCP tool calls into QuickChart API requests, returning image URLs or base64-encoded PNGs suitable for embedding in chat responses, notebooks, or dashboards.

This approach is useful when you want programmatic, real-time chart generation as part of an LLM-driven workflow: let the model decide chart types and configuration, then render high-quality charts without shipping a full charting stack to the runtime environment. The server is lightweight, configurable, and intended to be used as an MCP-compatible tool endpoint for model integrations.

Features

• Exposes QuickChart.io rendering as an MCP tool for model-driven workflows
• Accepts Chart.js configuration objects and renders PNG/SVG/other formats
• Returns shareable image URLs or base64 image data
• Configurable image size, background, and format parameters
• Optional caching, size limits, and simple access control via environment variables
• Small Node.js/Express implementation that is easy to deploy and extend

Installation / Configuration

Prerequisites:

• Node.js 16+ and npm
• Optional: QuickChart account or proxy URL (QuickChart.io supports public access, but you can self-host or use a private proxy)

Quick start (typical Node.js example):

# Clone the repository
git clone https://github.com/GongRzhe/Quickchart-MCP-Server.git
cd Quickchart-MCP-Server

# Install dependencies
npm install

# Create .env (see table below for variables)
cp .env.example .env
# edit .env as needed

# Start the server
npm run start
# or for development
npm run dev

Environment variables (example .env):

PORT=8080
QUICKCHART_BASE_URL=https://quickchart.io/chart
CACHE_TTL_SECONDS=60
MAX_CHART_PIXELS=2000000
ALLOW_BASE64=false
API_KEY=             # optional if you use a private QuickChart instance

Common package.json scripts:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}

Environment variables reference:

Available Tools / Resources

The server exposes a Tool Manifest (MCP-compatible) and an invocation endpoint. Example endpoints:

• GET /mcp/tool-manifest — returns the MCP tool manifest describing input schema and usage
• POST /mcp/invoke — accepts a JSON payload describing the requested chart and returns a rendering result

Example tool manifest (simplified):

{
  "name": "quickchart",
  "description": "Render charts from Chart.js config using QuickChart.io",
  "inputs": {
    "type": "object",
    "properties": {
      "chartConfig": { "type": "object", "description": "Chart.js configuration" },
      "width": { "type": "integer", "default": 800 },
      "height": { "type": "integer", "default": 400 },
      "format": { "type": "string", "enum": ["png","svg","pdf"], "default": "png" },
      "backgroundColor": { "type": "string" }
    },
    "required": ["chartConfig"]
  }
}

Invocation response example:

{
  "status": "success",
  "url": "https://quickchart.io/chart/render/some-hash.png",
  "width": 800,
  "height": 400,
  "b64": null
}

If ALLOW_BASE64 is enabled, the server can optionally return a base64-encoded PNG in the “b64” field for direct embedding.

Use Cases

• Embedding charts in LLM-generated reports: A model can generate Chart.js configuration as part of its reasoning, call the MCP tool to render the chart, and insert a chart image into its reply.

  • Example: Generate a bar chart comparing quarterly revenue and return a URL to embed in a Markdown report.

• Dynamic dashboards for conversational agents: Agents can render updated visualizations on user requests (e.g., “Show the last 7 days of active users”) by producing the Chart.js config and calling the tool to get a fresh image.

• Automated emails or reports: Scheduled jobs produce the required chart config and call the MCP server to create images for PDF or HTML reports.

• Prototyping and rapid visualization in notebooks: Use the server to quickly render sample charts without installing Chart.js locally. Return base64 images for inline display.

Concrete example: POST payload to /mcp/invoke:

{
  "chartConfig": {
    "type": "bar",
    "data": {
      "labels": ["Jan", "Feb", "Mar"],
      "datasets": [
        { "label": "Sales", "data": [120, 150, 170], "backgroundColor": "rgba(54,162,235,0.6)" }
      ]
    }
  },
  "width": 600,
  "height": 300,
  "format": "png"
}

Expected minimal response:

{
  "status": "success",
  "url": "https://quickchart.io/chart/render/abc123.png",
  "width": 600,
  "height": 300
}

Notes and Best Practices

• Validate Chart.js config on the client or server side to avoid malformed requests. The server enforces pixel limits and other safety checks to prevent abuse.
• Use caching for repeated identical charts to reduce rendering costs and latency.
• If you require stronger access control, put the MCP server behind an authenticated gateway or add token checks in the server code.
• Keep QuickChart usage within its terms of service. If you need high throughput or private rendering, consider hosting a QuickChart instance or proxy.

Links and Resources

• QuickChart: https://quickchart.io
• Model Context Protocol (MCP): follow your platform’s MCP spec for tool manifests and invocation formats
• Source code: https://github.com/GongRzhe/Quickchart-MCP-Server

This server is intended as a simple, extensible bridge between model-driven workflows and programmatic chart rendering. It provides a practical pattern for producing figures from model outputs with minimal client-side complexity.