Semiotic

What nteract/semiotic does

nteract/semiotic brings Semiotic’s React data-visualization components into MCP workflows. It gives coding assistants structured access to chart schemas, recommendation logic, validation, rendering, and repair operations instead of requiring them to guess component names and prop shapes. The underlying catalog spans common chart families as well as network, geographic, statistical, value, and realtime visualizations.

The server is useful across the chart lifecycle. An agent can start with a few sample rows, identify suitable chart forms, generate props, check whether the proposed encoding fits the data, render a static result, and inspect evidence from the render. It can also help assemble dashboards, choose themes, explain policy refusals, and evaluate or repair explicit visualization artifacts.

How it works

Chart generation is schema-driven. getSchema returns the prop definition for one component or the complete catalog, while recommendation tools use sample rows, capabilities, stream schemas, analytical intent, or audience profiles to produce ranked options. repairChartConfig checks fit and proposes alternatives when a requested chart does not match its data.

renderChart accepts a component name and props, such as a line chart with data and x/y accessors, then returns static SVG together with render evidence. That evidence includes mark counts by scene type and helps an agent inspect what was actually produced. renderInteractiveChart follows the same rendering path and places the result in a ChatGPT Apps widget with fit, zoom, data, hover, and evidence controls.

Validation tools identify empty data, incompatible dimensions, missing accessors, incorrect data shapes, and other configuration problems. The artifact tools work from explicit contracts and named policies: they can audit, recommend representations, propose repairs, or explain which obligations block publication or action.

Setup and configuration

Run the MCP entry point with:

npx -y -p semiotic semiotic-mcp

Register that command in an MCP-compatible client using the client’s standard process-based server configuration. The server accepts structured JSON tool inputs; for example, pass { "component": "LineChart" } to inspect a component schema or provide a component and props object to renderChart. No environment variables are required by the documented launch command.

Tools and capabilities

• Recommend charts from sample rows, capabilities, stream schemas, analytical intents, or audience profiles.
• Compose multi-panel dashboards for bounded data or streaming inputs.
• Return schemas, import paths, reasons, caveats, and ready-to-use props for suggestions.
• Render supported components to SVG and return render evidence.
• Render static-data charts as interactive ChatGPT Apps widgets.
• Diagnose configuration anti-patterns and propose compatible alternatives.
• Summarize data in chart-aware form for natural-language questions, with optional annotations.
• Apply named theme presets and return related theme usage information.
• Audit, repair, and review explicit artifact contracts under policy rules.
• Generate a prefilled GitHub issue URL with a title, body, and labels.

Limitations and notes

Only schema components marked [renderable] are available through renderChart. Realtime charts depend on a browser or live environment rather than the static rendering path. Recommendation inputs also differ by tool: sample-row recommenders accept only a small set of representative objects, while streaming recommendations require a stream schema with details such as shape, key, and throughput.

The server supports chart implementation and review, but application owners remain responsible for surrounding accessibility work and user testing. Artifact review evaluates the explicit contract supplied to it; policy outcomes depend on those declared requirements and facts.