renderChart
Generate static SVG charts from data using Semiotic visualization components like LineChart, BarChart, and Heatmap for data analysis and presentation.
Instructions
Render a Semiotic chart to static SVG. Returns SVG string or validation errors. Available components: AreaChart, BarChart, BoxPlot, BubbleChart, ChordDiagram, ChoroplethMap, CirclePack, ConnectedScatterplot, DistanceCartogram, DonutChart, DotPlot, FlowMap, ForceDirectedGraph, GroupedBarChart, Heatmap, LineChart, OrbitDiagram, PieChart, ProportionalSymbolMap, SankeyDiagram, Scatterplot, StackedAreaChart, StackedBarChart, SwarmPlot, TreeDiagram, Treemap.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Chart component name, e.g. 'LineChart', 'BarChart' | |
| props | No | Chart props object, e.g. { data: [...], xAccessor: 'x' }. |
Implementation Reference
- ai/mcp-server.ts:305-333 (handler)The handler function 'renderChartHandler' which processes the 'renderChart' MCP tool call. It validates the requested component, checks the component registry, and calls 'renderHOCToSVG' to produce the final SVG output.
async function renderChartHandler(args: { component?: string; props?: Record<string, any> }): Promise<ToolResult> { const component = args.component const props: Record<string, any> = args.props ?? {} if (!component) { return { content: [{ type: "text" as const, text: `Missing 'component' field. Provide { component: '<name>', props: { ... } }. Available: ${componentNames.join(", ")}` }], isError: true, } } if (!COMPONENT_REGISTRY[component]) { return { content: [{ type: "text" as const, text: `Unknown component "${component}". Available: ${componentNames.join(", ")}` }], isError: true, } } const result = renderHOCToSVG(component, props) if (result.error) { return { content: [{ type: "text" as const, text: result.error }], isError: true, } } return { content: [{ type: "text" as const, text: result.svg! }], } } - ai/mcp-server.ts:420-428 (registration)Registration of the 'renderChart' MCP tool using the server instance, defining its schema (component name and props) and mapping it to 'renderChartHandler'.
srv.tool( "renderChart", `Render a Semiotic chart to static SVG. Returns SVG string or validation errors. Available components: ${componentNames.join(", ")}.`, { component: z.string().describe("Chart component name, e.g. 'LineChart', 'BarChart'"), props: z.record(z.string(), z.unknown()).optional().describe("Chart props object, e.g. { data: [...], xAccessor: 'x' }."), }, renderChartHandler )