← Back to directory
S

Semiotic

Official
Verified React chart generation for AI-assisted development.
GitHub source repository ↗
★ 2.7k Stars Category · Dev Tools Very popular
65FMRS · C
Reliability
10/20
Security and permissions
12/20
Maintenance
13/20
Documentation
16/20
Setup experience
14/20

The supplied materials identify this as the nteract/semiotic MCP server, version 3.8.6, supporting stdio and streamable HTTP. Its primary value is schema-aware, AI-assisted React chart development through recommendation, diagnosis, repair, and rendering tools. The materials provide no independent security-audit conclusion or broader client-compatibility evidence.

Read the FMRS scoring method →

Semiotic is nteract’s React data visualization library and MCP server for chart recommendations, schema discovery, configuration diagnosis, repair, and static or interactive rendering. It covers XY, categorical, network, geographic, realtime charts, and coordinated views with machine-readable schemas.

Tools

renderChart
Renders a renderable Semiotic chart to static SVG and returns render evidence or validation errors with fix suggestions.
renderInteractiveChart
Renders a static-data chart as a ChatGPT Apps widget with fit, zoom, data, hover, and render-evidence controls.
getSchema
Returns the prop schema for a component or lists the complete schema-backed catalog.
suggestChart
Recommends a chart from 1–5 sample objects.
suggestCharts
Returns ranked chart suggestions, reasons, caveats, import paths, and props from bounded row data and intent.
suggestStreamCharts
Recommends realtime charts from a stream schema, throughput, and retention hints.
suggestDashboard
Builds a multi-panel dashboard suggestion covering distinct analytical intents.
suggestStretchCharts
Recommends audience-literacy stretch charts from an audience profile.
repairChartConfig
Checks whether a requested chart fits a dataset and returns ranked alternatives when it does not.
interrogateChart
Returns statistical summaries and chart-aware context for natural-language questions, with optional annotations.
diagnoseConfig
Checks common configuration problems such as empty data, bad dimensions, missing accessors, and wrong data shape, with actionable fixes.
reportIssue
Generates a pre-filled GitHub issue URL.
applyTheme
Lists named theme presets or returns ThemeProvider, CSS, and token usage for a preset.

Setup

Add the supplied stdio configuration to an MCP-capable client. HTTP mode can also connect to a deployed /mcp endpoint.

claude_desktop_config.json
{"mcpServers":{"semiotic":{"command":"npx","args":["semiotic-mcp"]}}}

Fit and risk

Best for

  • Developers building React data visualizations
  • Projects requiring network graphs, streaming data, or coordinated views
  • Teams wanting schema validation and render evidence for AI-generated charts

Not for

  • Projects needing only simple, minimally customized bar or line charts
  • Workloads requiring GPU acceleration for millions of data points
  • Use cases expecting the server to assume full application accessibility compliance responsibility

Required permissions

  • The README states that local stdio mode requires no API keys or authentication.
  • The client must be able to run npx semiotic-mcp.
  • HTTP or hosted deployments require access to the relevant MCP endpoint; the README also describes host allowlisting configuration.

Risks and side effects

  • HTTP mode binds to 127.0.0.1 by default; changing the host binding can broaden accessibility.
  • The README describes ChatGPT Apps support as experimental.
  • Semiotic provides accessibility infrastructure, but application owners remain responsible for application-level compliance, testing, and user testing.

Troubleshooting

  1. Verify that the client configuration uses npx with the semiotic-mcp argument.
  2. renderChart supports components marked renderable by getSchema; realtime charts require a browser or live environment.
  3. Check component names, data shape, accessors, and empty-data conditions, using diagnoseConfig for fix suggestions.
  4. For HTTP failures, check the /mcp endpoint path, HTTPS tunnel, and MCP_ALLOWED_HOSTS configuration.

Use cases

Recommend charts from data structure
Validate and repair AI-generated Semiotic configurations
Render static SVG or interactive ChatGPT Apps charts
Inspect component schemas, themes, and renderability

Supported clients

Claude DesktopFull support