quickchart-mcp-server

Instructions

Implementation Reference

• src/tools/apexcharts.ts:193-294 (handler)

  Main handler function that validates inputs, builds ApexCharts configuration, fetches PNG image from QuickChart API, generates base64 image and URL, handles both 'get_url' and 'save_file' actions.
  export async function handleApexChartsTool(args: any): Promise<any> { const config = args.config as any; const action = args.action as string; validateConfig(config); validateAction(action); validateOutputPath(args.outputPath, action); validateDimensions(args.width, args.height); validateApexChartsVersion(args.apexChartsVersion); const postConfig = buildApexChartsConfig(config, { width: args.width as number, height: args.height as number, apexChartsVersion: args.apexChartsVersion as string, }); const chartUrl = buildApexChartsUrl(config); const result: any = { content: [ { type: "text", text: "Below is the chart URL:", }, { type: "text", text: chartUrl, }, ], metadata: { chartType: config?.chart?.type || "unknown", generatedAt: new Date().toISOString(), chartUrl: chartUrl, }, }; try { const pngData = await fetchApexChartsContent(postConfig, "png"); const pngBase64 = Buffer.from(pngData).toString("base64"); result.content.push( { type: "text", text: "Below is the PNG image:", }, { type: "image", data: pngBase64, mimeType: "image/png", } ); result.metadata.pngBase64 = pngBase64; } catch (error) { result.content.unshift({ type: "text", text: "⚠️ Failed to fetch chart image", }); result.content.push({ type: "text", text: `Error: ${error instanceof Error ? error.message : String(error)}`, }); result.metadata.error = error instanceof Error ? error.message : String(error); } if (action === "get_url") { return result; } const format = "png"; const outputPath = getDownloadPath( args.outputPath as string | undefined, format ); try { const dir = path.dirname(outputPath); if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }); } const data = await fetchApexChartsContent(postConfig, format); fs.writeFileSync(outputPath, data); result.metadata.savedPath = outputPath; result.content.push({ type: "text", text: "Below is the saved file path:", }); result.content.push({ type: "text", text: outputPath, }); return result; } catch (error) { throw new McpError( ErrorCode.InternalError, `Failed to save chart: ${ error instanceof Error ? error.message : String(error) }` ); } }
• src/tools/apexcharts.ts:11-47 (schema)

  Tool definition including name, description, and input schema defining parameters: action (get_url/save_file), config (ApexCharts JSON), optional outputPath, width, height, apexChartsVersion.
  export const CREATE_CHART_USING_APEXCHARTS_TOOL: Tool = { name: "create-chart-using-apexcharts", description: "Create charts using Apex Charts - get chart image URL or save chart image to file", inputSchema: { type: "object", properties: { action: { type: "string", enum: ["get_url", "save_file"], description: "Whether to get chart URL or save as file", }, outputPath: { type: "string", description: "Path where to save the file (only used with action=save_file)", }, config: { type: "object", description: "Apex Charts JSON configuration", }, width: { type: "integer", description: "Image width in pixels", }, height: { type: "integer", description: "Image height in pixels", }, apexChartsVersion: { type: "string", description: "Apex Charts version to use", }, }, required: ["action", "config"], }, };
• src/tools/index.ts:64-67 (registration)

  Registration of the tool's handler in the ALL_TOOL_HANDLERS object, mapping the tool name to its handler function handleApexChartsTool.
  "create-chart-using-apexcharts": { handler: handleApexChartsTool, toolName: ToolNames.APEXCHARTS, },
• src/tools/index.ts:34-53 (registration)

  Registration of all tools including CREATE_CHART_USING_APEXCHARTS_TOOL in ALL_TOOLS array, filtered by enabled status to export TOOLS array used for MCP tool registration.
  // All available tools const ALL_TOOLS: Array<{ tool: Tool; name: string }> = [ { tool: CREATE_CHART_USING_CHARTJS_TOOL, name: ToolNames.CHART }, { tool: CREATE_CHART_USING_APEXCHARTS_TOOL, name: ToolNames.APEXCHARTS }, { tool: CREATE_CHART_USING_GOOGLECHARTS_TOOL, name: ToolNames.GOOGLECHARTS }, { tool: CREATE_CHART_USING_NATURAL_LANGUAGE_TOOL, name: ToolNames.TEXTCHART }, { tool: CREATE_SPARKLINE_USING_CHARTJS_TOOL, name: ToolNames.SPARKLINE }, { tool: CREATE_DIAGRAM_USING_GRAPHVIZ_TOOL, name: ToolNames.GRAPHVIZ }, { tool: CREATE_WORDCLOUD_TOOL, name: ToolNames.WORDCLOUD }, { tool: CREATE_BARCODE_TOOL, name: ToolNames.BARCODE }, { tool: CREATE_QR_CODE_TOOL, name: ToolNames.QRCODE }, { tool: CREATE_TABLE_TOOL, name: ToolNames.TABLE }, { tool: CREATE_WATERMARK_TOOL, name: ToolNames.WATERMARK }, { tool: GET_VISUALIZATION_TOOL_HELP_TOOL, name: ToolNames.HELP }, ]; // Export only enabled tools export const TOOLS: Tool[] = ALL_TOOLS.filter(({ name }) => isToolEnabled(name) ).map(({ tool }) => tool);
• src/tools/apexcharts.ts:52-294 (helper)

  Supporting helper functions including input validation (validateConfig, validateAction, etc.), config building (buildApexChartsConfig), URL construction (buildApexChartsUrl), and API fetching (fetchApexChartsContent).
  function validateConfig(config: any): void { if (!config || typeof config !== "object") { throw new McpError( ErrorCode.InvalidParams, "Config is required and must be an object" ); } } function validateAction(action: string): void { if (!action || typeof action !== "string" || action.trim().length === 0) { throw new McpError( ErrorCode.InvalidParams, "Action must be a non-empty string" ); } const validActions = ["get_url", "save_file"]; if (!validActions.includes(action)) { throw new McpError( ErrorCode.InvalidParams, `Invalid action: ${action}. Valid actions are: ${validActions.join(", ")}` ); } } function validateOutputPath( outputPath: string | undefined, action: string ): void { if ( action === "save_file" && (!outputPath || typeof outputPath !== "string" || outputPath.trim().length === 0) ) { throw new McpError( ErrorCode.InvalidParams, "Output path is required for save_file action" ); } } function validateDimensions(width?: number, height?: number): void { if (width !== undefined) { if (!Number.isInteger(width) || width <= 0 || width > 10000) { throw new McpError( ErrorCode.InvalidParams, "Width must be a positive integer between 1 and 10000" ); } } if (height !== undefined) { if (!Number.isInteger(height) || height <= 0 || height > 10000) { throw new McpError( ErrorCode.InvalidParams, "Height must be a positive integer between 1 and 10000" ); } } } function validateApexChartsVersion(version?: string): void { if (version !== undefined) { if (typeof version !== "string" || version.trim().length === 0) { throw new McpError( ErrorCode.InvalidParams, "ApexCharts version must be a non-empty string" ); } } } /** * Fetches */ function buildApexChartsConfig( config: any, options: { width?: number; height?: number; apexChartsVersion?: string; } = {} ): any { const payload: any = { config, }; if (options.width !== undefined) payload.width = options.width; if (options.height !== undefined) payload.height = options.height; if (options.apexChartsVersion) payload.apexChartsVersion = options.apexChartsVersion; return payload; } function buildApexChartsUrl(config: any): string { const configOnlyJson = JSON.stringify(config); const encodedConfig = encodeURIComponent(configOnlyJson); return `${QuickChartUrls.apexCharts()}?config=${encodedConfig}`; } async function fetchApexChartsContent( postConfig: any, format: string = "png" ): Promise<any> { const axiosConfig = { responseType: "arraybuffer" as any, timeout: 30000, headers: { "Content-Type": "application/json", "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36", Accept: "image/*,*/*", "Accept-Language": "en-US,en;q=0.9", "Accept-Encoding": "gzip, deflate, br", Connection: "keep-alive", }, validateStatus: (status: number) => status >= 200 && status < 300, }; try { const response = await axios.post( QuickChartUrls.apexCharts(), postConfig, axiosConfig ); return response.data; } catch (error) { const axiosError = error as any; const message = axiosError.response ? `Failed to fetch ApexCharts content from QuickChart - Status: ${axiosError.response.status}` : `Failed to fetch ApexCharts content from QuickChart - ${axiosError.message}`; throw new McpError(ErrorCode.InternalError, message); } } /** * Tool handler */ export async function handleApexChartsTool(args: any): Promise<any> { const config = args.config as any; const action = args.action as string; validateConfig(config); validateAction(action); validateOutputPath(args.outputPath, action); validateDimensions(args.width, args.height); validateApexChartsVersion(args.apexChartsVersion); const postConfig = buildApexChartsConfig(config, { width: args.width as number, height: args.height as number, apexChartsVersion: args.apexChartsVersion as string, }); const chartUrl = buildApexChartsUrl(config); const result: any = { content: [ { type: "text", text: "Below is the chart URL:", }, { type: "text", text: chartUrl, }, ], metadata: { chartType: config?.chart?.type || "unknown", generatedAt: new Date().toISOString(), chartUrl: chartUrl, }, }; try { const pngData = await fetchApexChartsContent(postConfig, "png"); const pngBase64 = Buffer.from(pngData).toString("base64"); result.content.push( { type: "text", text: "Below is the PNG image:", }, { type: "image", data: pngBase64, mimeType: "image/png", } ); result.metadata.pngBase64 = pngBase64; } catch (error) { result.content.unshift({ type: "text", text: "⚠️ Failed to fetch chart image", }); result.content.push({ type: "text", text: `Error: ${error instanceof Error ? error.message : String(error)}`, }); result.metadata.error = error instanceof Error ? error.message : String(error); } if (action === "get_url") { return result; } const format = "png"; const outputPath = getDownloadPath( args.outputPath as string | undefined, format ); try { const dir = path.dirname(outputPath); if (!fs.existsSync(dir)) { fs.mkdirSync(dir, { recursive: true }); } const data = await fetchApexChartsContent(postConfig, format); fs.writeFileSync(outputPath, data); result.metadata.savedPath = outputPath; result.content.push({ type: "text", text: "Below is the saved file path:", }); result.content.push({ type: "text", text: outputPath, }); return result; } catch (error) { throw new McpError( ErrorCode.InternalError, `Failed to save chart: ${ error instanceof Error ? error.message : String(error) }` ); } }