Semiotic

Official

Verified React chart generation for AI-assisted development.

How to install ↓ Compare GitHub source repository ↗

Category: Dev Tools #50 of 438
Stars: ★ 2.7k Very popular
Transport: stdio (local process) · Streamable HTTP
Runtime: Node.js
Credentials: No credential needed
License: Apache-2.0
Last commit: 8 days ago
Tools: 13

65FMRS · C

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.

Strongest · Documentation 16/20 Weakest · Reliability 10/20

Reliability

10/20

Security and permissions

12/20

Maintenance

13/20

Documentation

16/20

Setup experience

14/20

Why each score

Reliability 10/20: Static evidence shows both an npm stdio package and a Streamable HTTP endpoint, with extensive declared tool, resource, and diagnostic documentation, making the happy path plausible. Points are deducted because no server source, committed tests, or CI evidence covering MCP initialization, tool-list handshake, and key paths was supplied, and consistency between the remote endpoint and local package cannot be verified; therefore the score stays within the static-review cap of 12.
Security and permissions 12/20: The documentation states that local stdio mode needs no credentials, HTTP mode binds to 127.0.0.1 by default, and host allowlisting is available. The listed tools appear limited to rendering, diagnosis, recommendation, and issue-URL generation, with no evident delete, payment, deployment, or remote-command operation. Points are deducted because implementation evidence is absent for data flows, network access, remote-endpoint authentication, tenant isolation, and side-effect controls; the hosted HTTP service's permission boundary is also insufficiently clear. No evidence establishes a red-line violation.
Maintenance 13/20: The materials identify version 3.8.6, an Apache-2.0 license, GitHub ownership, a CI badge, and upgrade documentation, indicating a versioned maintenance path; the repository is reported as not archived. Points are deducted because no verifiable commit history, release cadence, dependency-update record, vulnerability-response process, or maintainer-response evidence was supplied, so a high score is not justified.
Documentation 16/20: The README covers installation, client configuration, tool parameters, examples, resources, prompts, rendering, SSR, HTTP deployment, limitations, diagnostics, and alternatives. Its layered coverage and examples support a strong documentation score. Points are deducted because the README and manifest are unverified claims, with no executable test evidence, explicit service cost or quota information, complete troubleshooting workflow, compatibility matrix, or clear remote-service data-handling disclosure.
Setup experience 14/20: A short npx-based stdio configuration is provided, along with HTTP mode details, default binding, health endpoints, host allowlisting, and tunnel-based access guidance; the basic mainstream-client path is clear. Points are deducted because no successful connection evidence is supplied, while hosted deployment and ChatGPT access require additional tunnel, HTTPS, and configuration work; Node-version requirements, platform compatibility, and troubleshooting guidance are incomplete.

Test out of dateListed 2026-07-29

Read the FMRS scoring method →

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.

Setup

Before you start

Runtime：Node.js

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"]}}}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json

{
  "servers": {
    "semiotic": {
      "command": "npx",
      "args": [
        "semiotic-mcp"
      ]
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal

claude mcp add semiotic -- npx semiotic-mcp

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

Add {"mcpServers":{"semiotic":{"command":"npx","args":["semiotic-mcp"]}}} to your MCP client config and restart; renderChart, getSchema, and diagnoseConfig should appear in the client's tool list. Calling getSchema with {"component":"LineChart"} and getting back the component's props schema confirms the connection works.

Troubleshooting

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

Things to try

Once connected, you can ask your AI assistant things like:

Use getSchema to show me the props for the LineChart component
Here is my sales data [{month:"Jan",revenue:120},{month:"Feb",revenue:180}] — use suggestChart to recommend a chart
Render a BarChart to SVG with renderChart for data Q1:120, Q2:180, Q3:150
Run diagnoseConfig on {component:"LineChart", props:{data:[]}} and tell me what's wrong

Tools 13

renderChart read-only

Renders a renderable Semiotic chart to static SVG and returns render evidence or validation errors with fix suggestions.

renderInteractiveChart read-only

Renders a static-data chart as a ChatGPT Apps widget with fit, zoom, data, hover, and render-evidence controls.

getSchema read-only

Returns the prop schema for a component or lists the complete schema-backed catalog.

suggestChart read-only

Recommends a chart from 1–5 sample objects.

suggestCharts read-only

Returns ranked chart suggestions, reasons, caveats, import paths, and props from bounded row data and intent.

suggestStreamCharts read-only

Recommends realtime charts from a stream schema, throughput, and retention hints.

suggestDashboard read-only

Builds a multi-panel dashboard suggestion covering distinct analytical intents.

suggestStretchCharts read-only

Recommends audience-literacy stretch charts from an audience profile.

Show 5 more tools

repairChartConfig read-only

Checks whether a requested chart fits a dataset and returns ranked alternatives when it does not.

interrogateChart read-only

Returns statistical summaries and chart-aware context for natural-language questions, with optional annotations.

diagnoseConfig read-only

Checks common configuration problems such as empty data, bad dimensions, missing accessors, and wrong data shape, with actionable fixes.

reportIssue read-only

Generates a pre-filled GitHub issue URL.

applyTheme read-only

Lists named theme presets or returns ThemeProvider, CSS, and token usage for a preset.

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 Desktop

Listed from the project's documentation, not tested by this site.

Overview

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.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 63.3k · Tools 2 Compare with this →

NPM Sentinel MCP Server 79 · B

AI-powered NPM package analysis MCP server

★ 18 · Tools 19 Compare with this →

MartinLoop MCP Server 79 · B

An independent control layer that gives AI coding agents budgets, brakes, and receipts

★ 413 Compare with this →

GitHub MCP Server 76 · B

GitHub's official MCP server for managing repos, issues, PRs, and workflows via natural language

★ 33.7k · Tools 15 Compare with this →

Compare with other MCP servers

Source revision 46d681cb3a32 Data synced 2026-10-19 Read the FMRS scoring method