# nteract/semiotic [Health: Active]

**Category:** 📊 Data Visualization  
**Repository:** https://github.com/nteract/semiotic  
**GitHub Stars:** 2716  
**npm Downloads (last month):** 43630  
**Views:** 6  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/nteract-semiotic

## Description
React data visualization MCP server with 30+ chart types. 5 tools: suggest charts for a dataset, render validated React configs to SVG, diagnose configuration anti-patterns, get component schemas, and report issues.

## Tools
Capabilities this server exposes over MCP:

- **renderChart** — Render a Semiotic chart to static SVG. Supports the components returned by `getSchema` that are marked `[renderable]`. Pass `{ component: "LineChart", props: { data: [...], xAccessor: "x", yAccessor: "y" } }`. Returns SVG string plus a "Render evidence" JSON block (mark counts by scene type, resolv…
- **renderInteractiveChart** — Render a static-data chart as a ChatGPT Apps widget. Uses the same Semiotic server render path as `renderChart`, then hydrates an iframe UI with fit, zoom, data, hover, and render-evidence controls.
- **getSchema** — Return the prop schema for a specific component. Pass `{ component: "LineChart" }` to get its props, or omit `component` to list the complete schema-backed catalog. Components marked `[renderable]` are available through `renderChart`; realtime charts require a browser/live environment.
- **suggestChart** — Sample-row recommender. Pass `{ data: [{...}, ...] }` with 1–5 sample objects plus optional broad intent/capability filters.
- **suggestCharts** — Capability-based recommender for bounded row data. Returns ranked chart suggestions with scores, reasons, caveats, import paths, and ready-to-use props.
- **suggestStreamCharts** — Recommend streaming charts from a schema (shape, key, throughput). Returns `{ suggestions, excluded, stretchSuggestions }`.
- **suggestStreamDashboard** — Compose a multi-panel dashboard from stream schemas and an audience layout policy.
- **suggestDashboard** — Build a multi-panel dashboard suggestion that covers distinct analytical intents.
- **suggestStretchCharts** — Recommend audience-literacy stretch picks from an `AudienceProfile`.
- **repairChartConfig** — Check whether a requested chart fits a dataset and return ranked alternatives when it does not.
- **interrogateChart** — Return a statistical summary and chart-aware context for answering natural-language questions with optional annotations.
- **diagnoseConfig** — Check a chart configuration for common problems — empty data, bad dimensions, missing accessors, wrong data shape, and more. Returns a human-readable diagnostic report with actionable fixes.
- **reportIssue** — Generate a pre-filled GitHub issue URL for bug reports or feature requests. Pass `{ title: "...", body: "...", labels: ["bug"] }`. Returns a URL the user can open to submit.
- **applyTheme** — List named theme presets or return ThemeProvider/CSS/token usage for a preset such as `{ name: "tufte" }`.
- **auditArtifact** — Evaluate an explicit artifact contract under a named policy without inferring missing source, review, or timing facts.
- **recommendRepresentation** — Compare chart and non-chart outcomes against supplied data, claims, evidence, time state, and policy requirements.
- **repairArtifact** — Propose contract repairs and optionally fill missing identity fields; existing mismatches require a revision and claim reassessment.
- **explainRefusal** — Explain which explicit policy obligations prevent publication or action and identify safe follow-up work.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "semiotic": {
    "command": "npx",
    "args": ["-y","-p","semiotic","semiotic-mcp"]
  }
}
```

## Documentation

## 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:

```bash
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.

_Full upstream README: https://allmcps.com/mcp/nteract-semiotic/readme_