# Semiotic

MCP server for creating and checking React charts with AI assistants. Useful for interactive dashboards and streaming views.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 2716
- Author: nteract
- License: Apache-2.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/nteract/semiotic
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/semiotic

## What it 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`.

## Requirements
- Needs: Node.js (commands run via npx)
- Remote server: `https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp`

## Install

### Claude Code (native platform)

1. **Platform CLI: remote server**
```bash
claude mcp add --transport http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp
```

2. **Platform CLI**
```bash
claude mcp add semiotic -- npx -y semiotic
```

### Codex

1. **Platform CLI: remote server**
```bash
codex mcp add semiotic --url https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp
```

2. **Platform CLI**
```bash
codex mcp add semiotic -- npx -y semiotic
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "semiotic": {
            "url": "https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp"
        }
    }
}
```
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "semiotic": {
            "command": "npx",
            "args": [
                "-y",
                "semiotic"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "semiotic": {
            "type": "http",
            "url": "https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp"
        }
    }
}
```
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "semiotic": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "semiotic"
            ]
        }
    }
}
```

### Gemini CLI

1. **Platform CLI: remote server**
```bash
gemini mcp add -t http semiotic https://semiotic-mcp-server-481507046413.us-west1.run.app/mcp
```

2. **Platform CLI**
```bash
gemini mcp add semiotic npx -y semiotic
```

## When to use it
- 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
- 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

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md