Semiotic — Claude Code MCP server: what it does, how to install
MCP server for creating and checking React charts with AI assistants. Useful for interactive dashboards and streaming views.
claude mcp add --transport http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcpWhat Semiotic does
Semiotic links coding assistants to the Semiotic React visualization library. The server supplies component schemas, anti-pattern diagnostics, and structured recipes for charts ranging from standard XY plots to Sankey and chord diagrams.
The system checks numeric data before drawing components. Its audit routines catch zero-span domains, non-finite values, and scale-distorting outliers that otherwise break chart mathematics. Realtime components render on canvas at 60fps.
Check your project's existing dependencies first: extending an installed charting library often makes more sense for small tweaks. Semiotic runs through a hosted HTTP endpoint or locally via npx.
What it helps with
- validate React chart properties and component schemas
- detect numeric data anomalies before rendering
- build force-directed graphs and Sankey diagrams
- stream live metrics at 60fps on canvas
Example prompts for the agent
- Generate a Semiotic Sankey diagram for user onboarding flow
- Run diagnostics on this chart configuration to fix logarithmic scale issues
- Create a realtime canvas chart component that accepts streaming updates
How to install Semiotic
1Platform CLI: remote server
claude mcp add --transport http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp2Platform CLI
claude mcp add semiotic -- npx -y semiotic1Platform CLI: remote server
codex mcp add semiotic --url https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp2Platform CLI
codex mcp add semiotic -- npx -y semioticConfig file
{
"mcpServers": {
"semiotic": {
"url": "https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp"
}
}
}{
"mcpServers": {
"semiotic": {
"command": "npx",
"args": [
"-y",
"semiotic"
]
}
}
}Config file
{
"servers": {
"semiotic": {
"type": "http",
"url": "https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp"
}
}
}{
"servers": {
"semiotic": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"semiotic"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp2Platform CLI
gemini mcp add semiotic npx -y semioticStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Semiotic
How to install Semiotic in Claude Code?
Run claude mcp add --transport http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp in your terminal to connect the hosted server.
What does Semiotic do?
It provides schema validation, data audits, and rendering helpers for React data visualization. Assistants use these tools to build, inspect, and repair chart code without failing silently.
What data issues does the Semiotic audit detect?
The preflight audit detects non-finite numbers, zero-span domains, invalid log values, and negative geometry sizes. It catches math errors that pass plain schema checks.
