QuickChart MCP Server

Instructions

Implementation Reference

• src/index.ts:220-241 (handler)

  The handler function for the 'generate_chart' tool. It processes the input arguments, generates the chart configuration, creates a QuickChart URL, and returns the URL as text content. Includes error handling.

  case 'generate_chart': {
    try {
      const config = this.generateChartConfig(request.params.arguments);
      const url = await this.generateChartUrl(config);
      return {
        content: [
          {
            type: 'text',
            text: url
          }
        ]
      };
    } catch (error: any) {
      if (error instanceof McpError) {
        throw error;
      }
      throw new McpError(
        ErrorCode.InternalError,
        `Failed to generate chart: ${error?.message || 'Unknown error'}`
      );
    }
  }

• src/index.ts:152-196 (registration)

  Tool registration in the ListTools response, including name, description, and detailed input schema for validation.

  {
    name: 'generate_chart',
    description: 'Generate a chart using QuickChart',
    inputSchema: {
      type: 'object',
      properties: {
        type: {
          type: 'string',
          description: 'Chart type (bar, line, pie, doughnut, radar, polarArea, scatter, bubble, radialGauge, speedometer)'
        },
        labels: {
          type: 'array',
          items: { type: 'string' },
          description: 'Labels for data points'
        },
        datasets: {
          type: 'array',
          items: {
            type: 'object',
            properties: {
              label: { type: 'string' },
              data: { type: 'array' },
              backgroundColor: { 
                oneOf: [
                  { type: 'string' },
                  { type: 'array', items: { type: 'string' } }
                ]
              },
              borderColor: {
                oneOf: [
                  { type: 'string' },
                  { type: 'array', items: { type: 'string' } }
                ]
              },
              additionalConfig: { type: 'object' }
            },
            required: ['data']
          }
        },
        title: { type: 'string' },
        options: { type: 'object' }
      },
      required: ['type', 'datasets']
    }
  },

• src/index.ts:14-39 (schema)

  TypeScript interface defining the structure of the ChartConfig used throughout the chart generation.

  interface ChartConfig {
    type: string;
    data: {
      labels?: string[];
      datasets: Array<{
        label?: string;
        data: number[];
        backgroundColor?: string | string[];
        borderColor?: string | string[];
        [key: string]: any;
      }>;
      [key: string]: any;
    };
    options?: {
      title?: {
        display: boolean;
        text: string;
      };
      scales?: {
        y?: {
          beginAtZero?: boolean;
        };
      };
      [key: string]: any;
    };
  }

• src/index.ts:79-142 (helper)

  Helper function that transforms input arguments into a validated ChartConfig object, with special handling for certain chart types.

  private generateChartConfig(args: any): ChartConfig {
    const { type, labels, datasets, title, options = {} } = args;
    
    this.validateChartType(type);
  
    const config: ChartConfig = {
      type,
      data: {
        labels: labels || [],
        datasets: datasets.map((dataset: any) => ({
          label: dataset.label || '',
          data: dataset.data,
          backgroundColor: dataset.backgroundColor,
          borderColor: dataset.borderColor,
          ...dataset.additionalConfig
        }))
      },
      options: {
        ...options,
        ...(title && {
          title: {
            display: true,
            text: title
          }
        })
      }
    };
  
    // Special handling for specific chart types
    switch (type) {
      case 'radialGauge':
      case 'speedometer':
        if (!datasets?.[0]?.data?.[0]) {
          throw new McpError(
            ErrorCode.InvalidParams,
            `${type} requires a single numeric value`
          );
        }
        config.options = {
          ...config.options,
          plugins: {
            datalabels: {
              display: true,
              formatter: (value: number) => value
            }
          }
        };
        break;
  
      case 'scatter':
      case 'bubble':
        datasets.forEach((dataset: any) => {
          if (!Array.isArray(dataset.data[0])) {
            throw new McpError(
              ErrorCode.InvalidParams,
              `${type} requires data points in [x, y${type === 'bubble' ? ', r' : ''}] format`
            );
          }
        });
        break;
    }
  
    return config;
  }

• src/index.ts:144-147 (helper)

  Helper function that generates the QuickChart URL from the ChartConfig by encoding it as a query parameter.

  private async generateChartUrl(config: ChartConfig): Promise<string> {
    const encodedConfig = encodeURIComponent(JSON.stringify(config));
    return `${QUICKCHART_BASE_URL}?c=${encodedConfig}`;
  }