semiotic

[](https://semiotic.nteract.io)

[](https://github.com/nteract/semiotic/actions/workflows/node.js.yml) [](https://www.npmjs.com/package/semiotic) [](https://www.typescriptlang.org/) [](https://glama.ai/mcp/servers/nteract/semiotic)

A React data visualization library designed for AI-assisted development.

Simple charts in 5 lines. Network graphs, streaming data, and coordinated dashboards when you need them. Structured schemas and an MCP server so AI coding assistants generate correct chart code on the first try.

import { LineChart } from "semiotic"

<LineChart
  data={salesData}
  xAccessor="month"
  yAccessor="revenue"
/>

Semiotic is a data visualization library for React that combines broad chart coverage with first-class AI tooling. It handles the chart types that most libraries skip — network graphs, streaming data, statistical distributions, coordinated views — and ships with machine-readable schemas so LLMs can generate correct code without examples.

Semiotic ships with everything an AI coding assistant needs to generate correct visualizations without trial and error:

• `semiotic/ai` — a single import with all 37 chart components, optimized for LLM code generation
• `ai/schema.json` — machine-readable prop schemas for every component
• `npx semiotic-mcp` — an MCP server for tool-based chart rendering in any MCP client
• `npx semiotic-ai --doctor` — validate component + props JSON from the command line with typo suggestions and anti-pattern detection
• `diagnoseConfig(component, props)` — programmatic anti-pattern de