drio
Open app

quickchart-server MCP Server

Source

A Model Context Protocol server for generating charts using QuickChart.io . It allows you to create various types of charts through MCP tools.

Catalog onlyCatalog onlySTDIO

Overview

Quickchart-MCP-Server is a Model Context Protocol server designed for generating charts using QuickChart.io. It allows users to create various types of charts through MCP tools, integrating with QuickChart.io's URL-based chart generation service.

To use the server, configure your chart using Chart.js format and send a request to generate a chart URL or download the chart image. You can install it via Smithery or run it locally after building the server.

  • Generate chart URLs for multiple types of charts: bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer. - Download chart images to local files. - Customizable chart configurations with labels, datasets, and colors.
  1. Creating visual representations of data for reports.
  2. Generating dynamic charts for web applications.
  3. Visualizing statistical data for presentations.

Add to your AI client

Use these steps to connect quickchart-server MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

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

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

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

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

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

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "quickchart-mcp-server-gongrzhe": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-quickchart-mcp-server-gongrzhe"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

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

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

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

FAQ

What types of charts can I generate?

You can generate bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, and speedometer charts.

Is there a limit to the data I can use?

The limit depends on the chart type and the complexity of the data; however, QuickChart.io can handle a wide range of data sizes.

How do I install the server?

You can install it via Smithery or by cloning the repository and running the build commands.

Developer tools