What it does
Semiotic is a React data visualization library designed for AI-assisted chart generation. It ships with machine-readable schemas (available in semiotic/ai) so LLMs can generate correct component code on the first try, without trial-and-error iterations. The library includes an MCP server (npx semiotic-mcp) that integrates with Claude and other AI clients to render charts in context. Beyond standard xy and ordinal charts, Semiotic covers network graphs (force-directed, Sankey, chord, treemaps), streaming data on canvas at 60fps, coordinated multi-chart dashboards, geographic visualization (choropleth, proportional symbol maps), and statistical summaries (box plots, violin plots, LOESS smoothing).
Who it's for
React developers and data engineers building dashboards where AI assists in chart generation—especially when you need network graphs, real-time streaming data, or coordinated cross-linked views. Teams using Claude Code or other MCP clients to auto-generate visualization code from natural language descriptions.
Common use cases
- Prompt Claude to generate a real-time monitoring dashboard with streaming data charts
- Build coordinated views with cross-highlighting via
LinkedChartswithout manual wiring - Render network graphs (Sankey, force-directed) with AI-generated layouts from tabular data
- Generate geographic visualizations (choropleth maps, flow maps) with natural-language specifications
- Serialize chart configs to JSON and convert from Vega-Lite specs for interop
Setup pitfalls
- Requires React 18.1+ or 19; older projects will need a React upgrade
- The library has high filesystem and network access—ensure
npx semiotic-mcpruns in a sandbox or trusted environment if automating chart generation in production - Default geo charts are in
semiotic/geoto avoid bundling d3-geo unnecessarily; imports from the wrong path will silently fail to render - Component prop schemas are JSON-serialized; if you modify component APIs locally, regenerate
schema.jsonor the LLM will generate invalid code