Happy slice of mcp pizzaMCP.pizza

semiotic

MCP.Pizza Chef: nteract

This library equips AI coding assistants — including Claude Desktop, Cursor, Cline, and Windsurf — with everything needed to build data charts and graphs the right way the first time, from line charts and network diagrams to live-updating dashboards and maps. Instead of guessing at settings, your assistant checks its own work against built-in rules for accuracy, readability, and accessibility before handing you the result. It runs inside your existing coding project, and setup is a short copy-and-paste step.

Coding
Data
Images/Design

Use This MCP server To

Ask my AI assistant to build a chart from my data Create a network diagram showing how things connect Build a live dashboard that updates as new numbers arrive Plot my data on a map by location Catch mistakes in my chart before I publish it Make my charts usable for people with disabilities Compare two charts side by side with linked highlighting

README

MCP Toplist

Semiotic

CI npm version TypeScript MseeP.ai Security Assessment Badge

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.

Semiotic release dashboard showing chart count, bundle sizes, capability coverage, chart families, and documentation growth

What's New in 3.8.9

3.8.9 sharpens Stream Frame reliability and the chart chrome shared by browser and server rendering:

  • Zoom- and display-aware canvas resolution keeps Stream Frames crisp when browser zoom, display scale, or monitor changes alter devicePixelRatio, without rebuilding retained scene geometry.
  • XY axes now support per-axis "nice" / "exact" extent modes consistently across domain padding, ticks, grids, client SVG, and static SSR — including top- and right-only axis configs.
  • Adaptive time ticks accept IANA time zones, and multi-series tooltips have a first-class configuration object with optional custom content.
import { LineChart } from "semiotic/xy"

<LineChart
  data={salesData}
  xAccessor="month"
  yAccessor="revenue"
  axisExtent="exact"
  frameProps={{
    axes: [{ orient: "left", extent: "nice" }]
  }}
/>

Simple charts stay five lines:

import { LineChart } from "semiotic/xy"

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

semiotic FAQ

Can I use this to build a chart without knowing how to code?
Yes — once it's added to your AI assistant, you describe the chart you want in plain language, and the assistant writes the working code for you.
Can I use this to plot my data on a map by location?
Yes — it includes ready-made map styles, including region-shaded maps, dot maps, and animated flow maps between locations.
Which AI assistants and coding tools does this work with?
It's built to work with Claude Desktop, Cursor, Cline, and Windsurf as coding tools, and with chat assistants like ChatGPT or Gemini when connected as a tool.
Do I need an account or an API key to use it?
No account is required to run it locally on your own computer with a single command. If you connect through a hosted link instead, you may need a small connection key from that host.
How hard is it to set up?
It's a short copy-and-paste step — you add a small entry to your coding assistant's settings, and it takes over from there.
Will the charts work for people who use screen readers or keyboards only?
Yes — every chart includes accessible descriptions, keyboard-friendly controls, and readable color choices by default.
Does it only make simple charts like bars and lines?
No — it also covers network diagrams, live-updating dashboards, statistical charts, and maps, well beyond the basics.
What happens if my AI assistant works from messy or incomplete data?
The tool checks the numbers before drawing anything and flags problems like missing values or mismatched totals, so you get a clear warning instead of a broken chart.