Claude MarketplacesSubmit
nteract avatar

Semiotic

nteract/semiotic

Brings React data visualization directly into Claude with 43 chart types spanning standard plots, network graphs, streaming data, and geographic maps. The MCP server exposes validation, diagnostic, and suggestion tools backed by machine-readable schemas, so you can ask Claude to generate visualizations and catch prop errors before rendering. Includes `diagnoseConfig` for anti-pattern detection and typo suggestions across the entire Semiotic API. Particularly useful when you need coordinated dashboards or realtime charts alongside static plots, since it handles force-directed graphs, Sankey diagrams, and streaming canvas rendering that most libraries skip. The `semiotic/ai` import provides HOC charts optimized for LLM code generation with built-in error boundaries.

GitHub stars
2.7K
tools
5
transport
STDIO, HTTP
last updated
Oct 30, 2026
View on GitHub

Install

From registry metadata
$ npx add-mcp https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp --name semiotic

Run in your terminal. add-mcp asks which agents to add it to (Claude Code, Codex, Cursor and more). Add -g to install it for every project.

Review the command, arguments and environment values before installing. MCP servers run with your local permissions.

Other ways

Claude Code

$ claude mcp add --transport http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp

Run in your terminal. Add --scope user to make it available in every project.

Tools

Verified live · 5 tools

Verified live against the running server on Nov 13, 2026.

createChartSelect, validate, diagnose, render, and prove a static-data Semiotic chart. This is the default public workflow.8 params

Select, validate, diagnose, render, and prove a static-data Semiotic chart. This is the default public workflow.

Parameters* required
audienceobject
componentstring
Optional chart preference; the fit-ranked result remains authoritative.
data*array
fieldRolesobject
Per-field semantic or exact encoding-role hints used before chart ranking.
identifiersarray
Fields that identify records and must not be used as visual encodings or measures.
intentvalue
propsobject
Optional props to merge over the selected chart recipe.
themeobject
improveChartDiagnose a chart configuration, assess data fit, and propose repairs or variants.6 params

Diagnose a chart configuration, assess data fit, and propose repairs or variants.

Parameters* required
component*string
dataarray
fieldRolesobject
Per-field semantic or exact encoding-role hints used before chart ranking.
identifiersarray
Fields that identify records and must not be used as visual encodings or measures.
intentvalue
props*object
explainChartReturn reader grounding: chart description, communicative intent, and navigable data structure.2 params

Return reader grounding: chart description, communicative intent, and navigable data structure.

Parameters* required
component*string
props*object
auditChartRun design diagnostics plus accessibility and mobile audits, returning prioritized structured findings.3 params

Run design diagnostics plus accessibility and mobile audits, returning prioritized structured findings.

Parameters* required
component*string
props*object
viewportWidthinteger
getChartSchemaReturn canonical Semiotic prop-schema guidance for code editing and advanced configuration.1 params

Return canonical Semiotic prop-schema guidance for code editing and advanced configuration.

Parameters* required
componentstring

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Readme

MCP Toplist

Semiotic

CI npm version TypeScript MseeP.ai Security Assessment Badge

MCP Queen operational grade

A React data visualization library designed for AI-assisted development and streaming data.

Install

npm install semiotic

Requires React 18.1+ or React 19.

First Chart

import { LineChart } from "semiotic/xy"

View the full README on GitHub

Details

Repository
github.com/nteract/semiotic
Website
semiotic.nteract.io
Category
Design & Creative
Package
semiotic
Transport
STDIO, HTTP
Registry
MCP registry, active
Resources
11
Prompts
2
Tools verified
Nov 13, 2026

Related Design & Creative MCP servers

View all
1sceneview avatarSceneviewsceneview/sceneview3D & AR SDK for Android, iOS, Web — API docs, samples, validation, and code generation.1.2Kstars
2jingcheng-chen avatarRhinoMCPjingcheng-chen/rhinomcpProvides a two-way MCP bridge between Rhino and AI agents to create, inspect, and script 3D models.401stars
3dakkshin avatar🎬 After Effectsdakkshin/after-effects-mcpMCP Server for Adobe After Effects. Enables remote control (compositions, text, shapes, solids, properties) via the Model Context Protocol using ExtendScript.358stars
4nirholas avatarthree.ws Avatars & Agentsnirholas/three.ws3D avatars, embeds, glTF tools, agent memory, and on-chain agent identity from three.ws.269stars
5mastergo-design avatarMasterGo Magicmastergo-design/mastergo-magic-mcpMasterGo Magic MCP is a standalone MCP (Model Context Protocol) service designed to connect MasterGo design tools with AI models.255stars
6codeofaxel avatarKilncodeofaxel/kilnSpawn an object into existence: describe it, and your agent designs it, checks it, and 3D prints it.242stars