Semiotic
@nteract
Data visualization library for streaming and static charts that exposes traditional charts but also maps and networks.
Overview
What is Semiotic?
Semiotic is a React data visualization library that ships with a built-in MCP server for AI-assisted chart generation. It provides tools for developers and data analysts to automate chart creation, debugging, and reporting within MCP-compatible environments.
How to use Semiotic?
Install with npm install semiotic and connect to the MCP server using npx semiotic-mcp. The server exposes five tools for schema retrieval, chart recommendation, rendering, configuration diagnosis, and issue reporting.
Key features of Semiotic
- Exposes 5 MCP tools: getSchema, suggestChart, renderChart, diagnoseConfig, reportIssue.
- getSchema returns prop schemas for any of 30 chart components on demand.
- suggestChart analyzes sample data and recommends chart types with confidence levels.
- renderChart renders any of 25 chart components to static SVG.
- diagnoseConfig detects common configuration mistakes and returns actionable fixes.
- reportIssue generates pre-filled GitHub issue URLs for bug reports.
Use cases of Semiotic
- AI-assisted chart generation in React applications using MCP.
- Analyze sample data to receive chart type recommendations with example JSX.
- Diagnose and fix common configuration errors in Semiotic charts.
- Render charts to static SVG for documentation or export.
- Generate pre-filled GitHub issue URLs to streamline bug reporting.
FAQ from Semiotic
What tools does the Semiotic MCP server provide?
The server provides five tools: getSchema, suggestChart, renderChart, diagnoseConfig, and reportIssue.
What chart types does Semiotic support?
Semiotic covers XY charts (line, area, scatter, heatmap), ordinal charts (bar, histogram, box plot, violin), network charts (force-directed, sankey, chord, tree), and geographic charts (choropleth, proportional symbol, flow map, distance cartogram).
How do I install and connect to the Semiotic MCP server?
Install with npm install semiotic and connect using npx semiotic-mcp.
Can I render charts to static images?
Yes, the renderChart tool renders any of 25 chart components to static SVG.
How do I report a bug using Semiotic?
Use the reportIssue tool to generate a pre-filled GitHub issue URL.
