src

注：当前项目为 Serverless Devs 应用，由于应用中会存在需要初始化才可运行的变量（例如应用部署地区、函数名等等），所以不推荐直接 Clone 本仓库到本地进行部署或直接复制 s.yaml 使用，强烈推荐通过 s init ${模版名称} 的方法或应用中心进行初始化，详情可参考部署 & 体验 。

start-mcp-quickchart 帮助文档

quickchart-server MCP Server

资源准备

使用该项目，您需要有开通以下服务并拥有对应权限：

服务/业务	权限	相关文档
函数计算	AliyunFCFullAccess	帮助文档 计费文档

部署 & 体验

• 🔥 通过 云原生应用开发平台 CAP ， 该应用。

案例介绍

quickchart-server MCP Server

A Model Context Protocol server for generating charts using QuickChart.io

This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools.

Overview

This server integrates with QuickChart.io's URL-based chart generation service to create chart images using Chart.js configurations. Users can generate various types of charts by providing data and styling parameters, which the server converts into chart URLs or downloadable images.

Features

Tools

• generate_chart - Generate a chart URL using QuickChart.io

  • Supports multiple chart types: bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer
  • Customizable with labels, datasets, colors, and additional options
  • Returns a URL to the generated chart

• download_chart - Download a chart image to a local file

  • Takes chart configuration and output path as parameters
  • Saves the chart image to the specified location

Supported Chart Types

• Bar charts: For comparing values across categories
• Line charts: For showing trends over time
• Pie charts: For displaying proportional data
• Doughnut charts: Similar to pie charts with a hollow center
• Radar charts: For showing multivariate data
• Polar Area charts: For displaying proportional data with fixed-angle segments
• Scatter plots: For showing data point distributions
• Bubble charts: For three-dimensional data visualization
• Radial Gauge: For displaying single values within a range
• Speedometer: For speedometer-style value display

Usage

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"
    }
  }
}

URL Generation

The server converts your configuration into a QuickChart URL:

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

Development

Install dependencies:

npm install

Build the server:

npm run build

Installation

Installing

npm install @gongrzhe/quickchart-mcp-server

Installing via Smithery

To install QuickChart Server for Claude Desktop automatically via Smithery:

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

To use with Claude Desktop, add the server config:

On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json

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

or

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

Documentation References

• QuickChart Documentation
• Chart Types Reference

📜 License

This project is licensed under the MIT License.

使用流程

部署完成拿到 URL 后，准备好支持 SSE 的 MCP Client，通过 SSETransport 进行连接。