MCP Server Chart

Instructions

Implementation Reference

• src/utils/callTool.ts:44-111 (handler)

  The core handler function that executes the logic for generate_radar_chart and all other chart tools. For this tool, it maps to chartType 'radar', validates the arguments using Charts.radar.schema, generates the chart URL using generateChartUrl('radar', args), 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/radar.ts:20-63 (schema)

  Defines the Zod input schema and tool descriptor (name, description, inputSchema) for the generate_radar_chart tool, exported as radar.tool and radar.schema.

  // Radar chart input schema
  const schema = {
    data: z
      .array(data)
      .describe(
        "Data for radar chart, it should be an array of objects, each object contains a `name` field and a `value` field, such as, [{ name: 'Design', value: 70 }], when the data is grouped by `group`, the `group` field is required, such as, [{ name: 'Design', value: 70, group: 'Huawei' }].",
      )
      .nonempty({ message: "Radar chart data cannot be empty." }),
    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,
  };
  
  // Radar chart tool descriptor
  const tool = {
    name: "generate_radar_chart",
    description:
      "Generate a radar chart to display multidimensional data (four dimensions or more), such as, evaluate Huawei and Apple phones in terms of five dimensions: ease of use, functionality, camera, benchmark scores, and battery life.",
    inputSchema: zodToJsonSchema(schema),
    annotations: {
      title: "Generate Radar Chart",
      readOnlyHint: true,
    },
  };
  
  export const radar = {
    schema,
    tool,
  };

• src/server.ts:64-77 (registration)

  Registers the MCP tool handlers. ListTools returns descriptors from all enabled charts including generate_radar_chart.tool. CallTool forwards requests for generate_radar_chart to the callTool utility function.

  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-36 (helper)

  Mapping object that associates the tool name 'generate_radar_chart' with the internal chart type 'radar' used for generation and schema lookup.

  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_waterfall_chart: "waterfall",
    generate_word_cloud_chart: "word-cloud",
  } as const;