MCP Directory

Semiotic MCP

Render Semiotic charts, validate configs, and get chart recommendations via MCP tool calls.

Unverified
stdio (local)
No auth
TypeScript
View repo 2.7k Website npm

Add to your client

Copy the config for your MCP client and paste it into its config file.

Install / run
npx semiotic-mcp

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json

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

Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf

Before you start

  • Node.js with npx available
  • An MCP client (e.g. Claude Desktop, Cursor, Windsurf)

About Semiotic MCP

An MCP server bundled with the Semiotic React data visualization library. It gives AI coding assistants tool-based access to render charts to static SVG, discover machine-readable prop schemas for 47 chart types, get chart and dashboard recommendations from sample or streaming data, diagnose and repair chart configurations, apply theme presets, and interrogate chart data. The server runs locally over stdio via npx semiotic-mcp with no authentication; an optional stateless HTTP mode supports inspectors, web clients, and ChatGPT Apps SDK experiments.

Tools & capabilities (13)

renderChart

Render a Semiotic chart to static SVG. Pass { component, props }. Returns the SVG string plus a 'Render evidence' JSON block (mark counts, resolved axis domains, empty flag, annotation count, accessible name) or validation errors with fix suggestions.

renderInteractiveChart

Render a static-data chart as a ChatGPT Apps widget using the same server render path as renderChart, hydrating an iframe UI with fit, zoom, data, hover, and render-evidence controls.

getSchema

Return the prop schema for a specific component via { component }, or omit component to list all 47 chart schemas. Renderable components are marked [renderable].

suggestChart

Legacy sample-row recommender. Pass { data } with 1–5 sample objects plus optional intent/capability filters to get ranked chart suggestions.

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 realtime charts from a stream schema, throughput, and retention hints.

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 — and return 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 }.

applyTheme

List named theme presets or return ThemeProvider/CSS/token usage for a preset such as { name: 'tufte' }.

When to use it

  • Let an AI coding assistant generate correct Semiotic chart code on the first try using machine-readable schemas
  • Render charts to static SVG (for email, OG images, PDFs, Slack) directly from a tool call
  • Get ranked chart or dashboard recommendations from a sample of your data
  • Diagnose and repair broken chart configurations with actionable fixes
  • Power chart rendering in ChatGPT Apps SDK experiments via stateless HTTP mode

Security notes

No API keys or authentication required. The server runs locally via stdio. HTTP mode (--http) supports MCP_ALLOWED_HOSTS for production host-header allowlisting.

Semiotic MCP FAQ

Does it require an API key?

No. The server runs locally via stdio with no API keys or authentication required.

Can it run over HTTP instead of stdio?

Yes. Run `npx semiotic-mcp --http --port 3001`. Since 3.7.2 HTTP mode is stateless, so each request gets a fresh read-only server and it can autoscale on serverless hosts.

How many chart types does it know about?

It exposes schemas for 47 chart types via getSchema, spanning XY, categorical, network, geo, realtime, and value families. Charts marked [renderable] can be rendered through renderChart; realtime charts require a browser/live environment.

#data-visualization#charts#react#svg#d3#ai-codegen#dashboards

Alternatives to Semiotic MCP

Compare all alternatives →
BlenderMCP
Design & Media
23k

Control Blender from Claude and other LLMs for prompt-assisted 3D modeling, scene creation, and asset generation.

Unverified
stdio (local)
No auth
Python
22 tools
Updated 16 days agoRepo
Figma Context MCP (figma-developer-mcp)
Design & Media
15k

Popular community server that feeds Figma layout data to coding agents via a Figma API token.

Verified
stdio (local)
API key
TypeScript
2 tools
Updated 1 month agoRepo
21st.dev Magic MCP
Design & Media
5.2k

Generate beautiful, modern UI components from natural-language descriptions inside your IDE.

Unverified
stdio (local)
API key
TypeScript
4 tools
Updated 4 months agoRepo

Compare Semiotic MCP with:

vs BlenderMCPvs Figma Context MCP (figma-developer-mcp)vs 21st.dev Magic MCPvs Shadcn UI v4 MCP Server