Quickchart-MCP-Server 开源项目最佳实践教程

1. 项目介绍

Quickchart-MCP-Server 是一个基于 TypeScript 的 Model Context Protocol（MCP）服务器，它集成了 QuickChart.io 的 URL-based 图表生成服务。通过这个服务器，用户能够利用 MCP 工具生成多种类型的图表，包括柱状图、折线图、饼图、雷达图等。该项目允许用户通过提供数据和样式参数，将这些参数转换成图表的 URL 或者下载为图像文件。

2. 项目快速启动

环境准备

在开始之前，请确保您的系统中已经安装了 Node.js。

安装依赖

npm install

构建服务器

npm run build

运行服务器

构建完成后，您可以通过以下命令启动服务器：

node build/index.js

或者如果您希望通过 npx 运行：

npx -y @gongrzhe/quickchart-mcp-server

Smithery 自动安装

如果您希望使用 Smithery 自动安装 QuickChart Server，可以运行以下命令：

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

并根据操作系统配置 Claude Desktop 的服务器配置。

对于 MacOS 用户，编辑以下文件：

~/Library/Application Support/Claude/claude_desktop_config.json

对于 Windows 用户，编辑以下文件：

%APPDATA%/Claude/claude_desktop_config.json

配置内容如下：

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

或者：

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

3. 应用案例和最佳实践

生成图表 URL

以下是一个基本的图表配置示例：

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

服务器会将上述配置转换为 QuickChart URL：

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

下载图表

您也可以将图表配置和输出路径作为参数，以保存图表图片到本地文件。

download_chart(chart_configuration, output_path)

4. 典型生态项目

Quickchart-MCP-Server 可以作为一个独立的服务器运行，也可以集成到更大的应用生态中。以下是一些可能与之配合使用的典型生态项目：

• 数据可视化平台：集成 Quickchart-MCP-Server 以提供丰富的图表生成功能。
• 分析工具：使用 Quickchart-MCP-Server 生成分析报告中的图表。
• 教育应用：为教学目的提供实时图表生成能力。

通过遵循上述最佳实践，您可以有效地利用 Quickchart-MCP-Server 为您的项目添加强大的图表生成能力。