MCP Server Chart

Instructions

Implementation Reference

• src/charts/column.ts:23-73 (schema)

  Defines the Zod input schema and tool descriptor (name, description, inputSchema) for the 'generate_column_chart' tool.
  const schema = { data: z .array(data) .describe( "Data for column chart, such as, [{ category: 'Category A', value: 10 }, { category: 'Category B', value: 20 }], when grouping or stacking is needed for column, the data should contain a 'group' field, such as, [{ category: 'Beijing', value: 825, group: 'Gas Car' }, { category: 'Beijing', value: 1000, group: 'Electric Car' }].", ) .nonempty({ message: "Column chart data cannot be empty." }), group: z .boolean() .optional() .default(true) .describe( "Whether grouping is enabled. When enabled, column charts require a 'group' field in the data. When `group` is true, `stack` should be false.", ), stack: z .boolean() .optional() .default(false) .describe( "Whether stacking is enabled. When enabled, column charts require a 'group' field in the data. When `stack` is true, `group` should be false.", ), style: z .object({ backgroundColor: BackgroundColorSchema, palette: PaletteSchema, texture: TextureSchema, }) .optional() .describe( "Style configuration for the chart with a JSON object, optional.", ), theme: ThemeSchema, width: WidthSchema, height: HeightSchema, title: TitleSchema, axisXTitle: AxisXTitleSchema, axisYTitle: AxisYTitleSchema, }; // Column chart tool descriptor const tool = { name: "generate_column_chart", description: "Generate a column chart, which are best for comparing categorical data, such as, when values are close, column charts are preferable because our eyes are better at judging height than other visual elements like area or angles.", inputSchema: zodToJsonSchema(schema), }; export const column = { schema, tool, };
• src/server.ts:64-77 (registration)

  MCP server tool registration: setRequestHandler for ListToolsRequestSchema (returns tool descriptors including 'generate_column_chart') and CallToolRequestSchema (invokes callTool handler).
  function setupToolHandlers(server: Server): void { logger.info("setting up tool handlers..."); server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: getEnabledTools().map((chart) => chart.tool), })); // biome-ignore lint/suspicious/noExplicitAny: <explanation> server.setRequestHandler(CallToolRequestSchema, async (request: any) => { logger.info("calling tool", request.params.name, request.params.arguments); return await callTool(request.params.name, request.params.arguments); }); logger.info("tool handlers set up"); }
• src/utils/callTool.ts:43-110 (handler)

  Handler function invoked for all chart tools, including 'generate_column_chart': maps tool name to 'column', validates with Charts.column.schema, generates chart URL via generateChartUrl, and returns MCP content.
  export async function callTool(tool: string, args: object = {}) { logger.info(`Calling tool: ${tool}`); const chartType = CHART_TYPE_MAP[tool as keyof typeof CHART_TYPE_MAP]; if (!chartType) { logger.error(`Unknown tool: ${tool}`); throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${tool}.`); } try { // Validate input using Zod before sending to API. // Select the appropriate schema based on the chart type. const schema = Charts[chartType].schema; if (schema) { // Use safeParse instead of parse and try-catch. const result = z.object(schema).safeParse(args); if (!result.success) { logger.error(`Invalid parameters: ${result.error.message}`); throw new McpError( ErrorCode.InvalidParams, `Invalid parameters: ${result.error.message}`, ); } } const isMapChartTool = [ "generate_district_map", "generate_path_map", "generate_pin_map", ].includes(tool); if (isMapChartTool) { // For map charts, we use the generateMap function, and return the mcp result. const { metadata, ...result } = await generateMap(tool, args); return result; } const url = await generateChartUrl(chartType, args); logger.info(`Generated chart URL: ${url}`); return { content: [ { type: "text", text: url, }, ], _meta: { description: "This is the chart's spec and configuration, which can be renderred to corresponding chart by AntV GPT-Vis chart components.", spec: { type: chartType, ...args }, }, }; // biome-ignore lint/suspicious/noExplicitAny: <explanation> } catch (error: any) { logger.error( `Failed to generate chart: ${error.message || "Unknown error"}.`, ); if (error instanceof McpError) throw error; if (error instanceof ValidateError) throw new McpError(ErrorCode.InvalidParams, error.message); throw new McpError( ErrorCode.InternalError, `Failed to generate chart: ${error?.message || "Unknown error."}`, ); } }
• src/utils/callTool.ts:9-35 (helper)

  Mapping object that associates 'generate_column_chart' to internal chart type 'column' used by the handler.
  const CHART_TYPE_MAP = { generate_area_chart: "area", generate_bar_chart: "bar", generate_boxplot_chart: "boxplot", generate_column_chart: "column", generate_district_map: "district-map", generate_dual_axes_chart: "dual-axes", generate_fishbone_diagram: "fishbone-diagram", generate_flow_diagram: "flow-diagram", generate_funnel_chart: "funnel", generate_histogram_chart: "histogram", generate_line_chart: "line", generate_liquid_chart: "liquid", generate_mind_map: "mind-map", generate_network_graph: "network-graph", generate_organization_chart: "organization-chart", generate_path_map: "path-map", generate_pie_chart: "pie", generate_pin_map: "pin-map", generate_radar_chart: "radar", generate_sankey_chart: "sankey", generate_scatter_chart: "scatter", generate_treemap_chart: "treemap", generate_venn_chart: "venn", generate_violin_chart: "violin", generate_word_cloud_chart: "word-cloud", } as const;
• src/utils/generate.ts:12-39 (helper)

  Helper function that generates the chart by posting the type ('column') and options to the visualization server API, returning the chart URL.
  export async function generateChartUrl( type: string, // biome-ignore lint/suspicious/noExplicitAny: <explanation> options: Record<string, any>, ): Promise<string> { const url = getVisRequestServer(); const response = await axios.post( url, { type, ...options, source: "mcp-server-chart", }, { headers: { "Content-Type": "application/json", }, }, ); const { success, errorMessage, resultObj } = response.data; if (!success) { throw new Error(errorMessage); } return resultObj; }