QuickChart MCP server

This MCP server integrates with QuickChart.io to generate chart images using Chart.js configurations. It provides tools for creating various chart types through the Model Context Protocol, allowing you to easily generate and download charts directly from compatible applications.

Installation

Using npm

Install the package using npm:

npm install @gongrzhe/quickchart-mcp-server

Via Smithery

For Claude Desktop users, you can install automatically using Smithery:

npx -y @smithery/cli install @gongrzhe/quickchart-mcp-server --client claude

Configuration

To use with Claude Desktop, you need to add the server configuration to the Claude config file:

On MacOS: Edit ~/Library/Application Support/Claude/claude_desktop_config.json

On Windows: Edit %APPDATA%/Claude/claude_desktop_config.json

Add the following to your configuration file:

{
  "mcpServers": {
    "quickchart-server": {
      "command": "node",
      "args": ["/path/to/quickchart-server/build/index.js"]
    }
  }
}

Alternatively, you can use npx to run the server directly:

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

Available Tools

generate_chart

This tool generates a URL for a chart using QuickChart.io.

Parameters:

• Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer)
• Labels and datasets
• Custom colors and styling options

Returns a URL to the generated chart image.

download_chart

This tool downloads a chart image to a local file.

Parameters:

• Chart configuration
• Output file path

Saves the chart as an image file at the specified location.

Chart Types

The server supports multiple chart types:

• Bar charts: Compare values across categories
• Line charts: Show trends over time
• Pie charts: Display proportional data
• Doughnut charts: Similar to pie charts with a hollow center
• Radar charts: Show multivariate data
• Polar Area charts: Display proportional data with fixed-angle segments
• Scatter plots: Show data point distributions
• Bubble charts: Visualize three-dimensional data
• Radial Gauge: Display single values within a range
• Speedometer: Show values in a speedometer style

Usage Examples

Basic Chart Configuration

The server uses Chart.js configuration format. Here's a basic example:

{
  "type": "bar",
  "data": {
    "labels": ["January", "February", "March"],
    "datasets": [{
      "label": "Sales",
      "data": [65, 59, 80],
      "backgroundColor": "rgb(75, 192, 192)"
    }]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Monthly Sales"
    }
  }
}

Chart URL Generation

The server converts your configuration into a QuickChart URL:

https://quickchart.io/chart?c={...encoded configuration...}

Additional Resources

For more detailed information about chart configurations and options:

• QuickChart Documentation
• Chart Types Reference

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.