Vega-Lite Data Visualization MCP server

Enables data visualization capabilities using Vega-Lite specification language to create custom charts and graphs from tabular data, with output as either text specifications or rendered PNG images.
Back to servers
Provider
Marko Mitranic
Release date
Mar 18, 2025
Language
Python
Stats
2 stars

This MCP server implements a data visualization interface between LLMs and Vega-Lite, enabling AI assistants to create data visualizations from tabular data. The server exposes tools for saving datasets and generating visualizations in different output formats.

Installation Options

Using Docker

Build and run the Docker container:

docker build -t mcp-server-vegalite .
docker run -i --rm mcp-server-vegalite --output-type png

Using UV Package Manager

If you have UV installed, run the server directly:

uv --directory /path/to/mcp-vegalite-server run mcp_server_vegalite --output-type png

Configuring with Claude Desktop

To integrate the server with Claude Desktop, add the following to your claude_desktop_config.json file:

{
  "mcpServers": {
    "datavis": {
        "command": "uv",
        "args": [
            "--directory",
            "/absolute/path/to/mcp-datavis-server",
            "run",
            "mcp_server_vegalite",
            "--output-type",
            "png" # or "text"
        ]
    }
  }
}

Usage Guide

Available Tools

The MCP server provides two main tools:

save_data

This tool stores tabular data for later visualization:

  • Input Parameters:
    • name (string): Identifier for the data table
    • data (array): Array of objects representing the data table
  • Returns: A success message

visualize_data

This tool creates visualizations using Vega-Lite:

  • Input Parameters:
    • data_name (string): Name of the previously saved data table
    • vegalite_specification (string): JSON string containing Vega-Lite visualization specs
  • Returns:
    • When --output_type is text: A success message with the complete Vega-Lite specification
    • When --output_type is png: A base64-encoded PNG image of the visualization

Output Format Options

The server supports two output types, specified via the --output-type parameter:

  • text: Returns the Vega-Lite specification with the data included
  • png: Returns a rendered PNG image of the visualization

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.

Want to 10x your AI skills?

Get a free account and learn to code + market your apps using AI (with or without vibes!).

Nah, maybe later