semiotic

What it does

Semiotic is a React data visualization library with a built-in MCP server that exposes its charting capabilities to Claude and other AI coding assistants. The server provides machine-readable schemas for 47 chart types—spanning XY charts, network graphs, streaming data, geographic visualizations, and statistical summaries—so AI assistants can generate correct Semiotic component code on the first try. The library includes error boundaries, validation warnings, and accessibility features to ensure AI-generated visualizations fail gracefully with actionable diagnostics.

Who it's for

React engineers building interactive dashboards or data-driven interfaces who want Claude to help generate chart code. Data engineers creating visual reports or monitoring systems. Anyone using Claude Code to prototype visualizations without wrestling with prop APIs or chart-type selection.

Common use cases

• Generate a line chart, bar chart, or network graph from a CSV or JSON dataset using natural-language prompts in Claude Code.
• Create real-time streaming visualizations (decay-encoded, pulse-animated canvas charts) for monitoring dashboards with AI guidance on canvas performance.
• Build coordinated multi-chart dashboards where Claude adds cross-filtering and cross-highlighting across heterogeneous chart types.
• Translate Vega-Lite specifications to Semiotic components via Claude, then export as React JSX.
• Validate chart configurations against Semiotic's schema and get AI-driven suggestions for accessibility or encoding anti-patterns.

Setup pitfalls

• The MCP server is invoked as npx semiotic-mcp and must be started separately from your application. Ensure it stays running in a terminal or process manager while Claude connects.
• The library reads and writes files to disk (high risk class)—sandbox it appropriately if using in untrusted contexts, as imports and config serialization touch the filesystem.
• The semiotic/ai entry point bundles most of the library even when importing a single chart family. Use family-specific subpaths like semiotic/xy in production to reduce bundle size; reserve semiotic/ai for codegen/AI tooling contexts.
• If using the Vega-Lite translation feature, ensure your Vega-Lite specs are structurally valid before passing them to Claude—conversion errors are not always immediately obvious.