conjure-viz-mcp

An MCP App server that renders interactive charts inline in VS Code Copilot Chat and other MCP-compatible hosts. No built-in visualization? No problem — just ask, and the chart appears right in the conversation.

What it does

conjure-viz-mcp exposes 14 chart tools that an LLM can call to render data visually. The charts are rendered in a sandboxed iframe using Chart.js, Mermaid, and CSS — all self-contained in a single HTML file with zero external network requests.

Available chart types

| Tool | Description | Rendering | |------|-------------|-----------| | render-trendline | Multi-line time series | Chart.js Line | | render-bar | Grouped or stacked bars | Chart.js Bar | | render-pie | Doughnut with center total | Chart.js Doughnut | | render-funnel | Sequential stage drop-off | CSS bars | | render-kpi | Big-number metric card | HTML/CSS | | render-heatmap | 2D intensity grid | CSS grid | | render-sparkline | Minimal inline line | Chart.js Line | | render-threshold | Line with threshold markers | Chart.js Line + plugin | | render-scatter | Scatter plot with optional grouping | Chart.js Scatter | | render-histogram | Auto-binned distribution | Chart.js Bar | | render-sankey | Flow/allocation diagram | chartjs-chart-sankey | | render-sequence | Sequence diagram | Mermaid | | render-graph | Dependency/topology graph | Mermaid | | render-gantt | Timeline/Gantt chart | Mermaid |

Quick start

Via npx (after publishing)

Add to your .vscode/mcp.json:

{
  "servers": {
    "conjure-viz-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "conjure-viz-mcp", "--stdio"]
    }
  }
}

From source

git clone https://github.com/GiridharanNarayanan/conjure-viz-mcp.git
cd conjure-viz-mcp
npm install
npm run build

Then add to .vscode/mcp.json:

{
  "servers": {
    "conjure-viz-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["tsx", "main.ts", "--stdio"],
      "cwd": "/path/to/conjure-viz-mcp"
    }
  }
}

HTTP mode (for development)

npm start

{
  "servers": {
    "conjure-viz-mcp": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

How it works

1. The LLM picks a chart tool based on the user's question
2. The MCP server returns structured data + a reference to the HTML UI resource
3. The host loads the self-contained HTML app in an iframe
4. The app receives the data via ontoolinput / ontoolresult callbacks
5. The matching React component renders the visualization

Charts automatically adapt to the VS Code theme (light, dark, high contrast).

See ARCHITECTURE.md for a detailed walkthrough.

Development

npm run dev        # Watch mode — rebuilds on file changes
npm run build      # Type-check + Vite bundle
npm run build:all  # Build frontend + compile server

License

ISC — see THIRD_PARTY_NOTICES.txt for bundled dependency licenses.