Quickchart-MCP-Server

Instructions

Implementation Reference

• src/index.ts:251-272 (handler)

  Main execution handler for the 'generate_chart' tool. Processes arguments, generates chart configuration, creates QuickChart URL, and returns it as text content.

  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:187-226 (schema)

  Input schema defining the parameters for the 'generate_chart' tool, including type, labels, datasets, title, and options.

    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:183-227 (registration)

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

  {
    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:80-173 (helper)

  Helper method that validates and normalizes input arguments into a ChartConfig object, including chart type validation and special handling for certain types.

  private generateChartConfig(args: any): ChartConfig {
    // Add defensive checks to handle possibly malformed input
    if (!args) {
      throw new McpError(
        ErrorCode.InvalidParams,
        'No arguments provided to generateChartConfig'
      );
    }
    
    if (!args.type) {
      throw new McpError(
        ErrorCode.InvalidParams,
        'Chart type is required'
      );
    }
    
    if (!args.datasets || !Array.isArray(args.datasets)) {
      throw new McpError(
        ErrorCode.InvalidParams,
        'Datasets must be a non-empty array'
      );
    }
    
    const { type, labels, datasets, title, options = {} } = args;
    
    this.validateChartType(type);
  
    const config: ChartConfig = {
      type,
      data: {
        labels: labels || [],
        datasets: datasets.map((dataset: any) => {
          if (!dataset || !dataset.data) {
            throw new McpError(
              ErrorCode.InvalidParams,
              'Each dataset must have a data property'
            );
          }
          return {
            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:175-178 (helper)

  Helper method that encodes the ChartConfig as JSON and constructs the QuickChart URL.

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