MCP Server Chart

Instructions

Implementation Reference

• src/utils/callTool.ts:43-110 (handler)

  The generic handler for all chart generation tools, including 'generate_area_chart'. It maps the tool name to the chart type ('area'), validates the input against the specific schema, generates the chart URL via generateChartUrl, and returns the result in MCP format.
  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/charts/area.ts:24-58 (schema)

  Zod schema defining the input parameters for the 'generate_area_chart' tool, including data, stack, style, theme, dimensions, and titles.
  const schema = { data: z .array(data) .describe( "Data for area chart, it should be an array of objects, each object contains a `time` field and a `value` field, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }], when stacking is needed for area, the data should contain a `group` field, such as, [{ time: '2015', value: 23, group: 'A' }, { time: '2015', value: 32, group: 'B' }].", ) .nonempty({ message: "Area chart data cannot be empty." }), stack: z .boolean() .optional() .default(false) .describe( "Whether stacking is enabled. When enabled, area charts require a 'group' field in the data.", ), style: z .object({ backgroundColor: BackgroundColorSchema, palette: PaletteSchema, texture: TextureSchema, lineWidth: z .number() .optional() .describe("Line width for the lines of chart, such as 4."), }) .optional() .describe( "Style configuration for the chart with a JSON object, optional.", ), theme: ThemeSchema, width: WidthSchema, height: HeightSchema, title: TitleSchema, axisXTitle: AxisXTitleSchema, axisYTitle: AxisYTitleSchema, };
• src/server.ts:64-77 (registration)

  Registers the tool handlers on the MCP server. Dynamically lists all enabled chart tools (including 'generate_area_chart') in ListTools response via getEnabledTools().map((chart) => chart.tool), and sets a generic CallTool handler that dispatches to callTool based on name.
  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:9-35 (helper)

  Mapping from tool names like 'generate_area_chart' to internal chart types like 'area', used in the handler to dispatch correctly.
  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 actual chart URL by posting the chart type ('area') and options to the visualization server.
  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; }