Vega-Lite Data Visualization MCP server

This server implements the Model Context Protocol (MCP) to provide data visualization capabilities through Vega-Lite syntax. It allows an LLM to save data tables and create visualizations from them, acting as a bridge between language models and data visualization tools.

Installation

To use the MCP data visualization server, follow these steps:

1. Clone the repository or download the source code

2. Install the package using a Python virtual environment manager like uv:

uv pip install -e /path/to/mcp-datavis-server

Configuration

Setup with Claude Desktop

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

{
  "mcpServers": {
    "datavis": {
        "command": "uv",
        "args": [
            "--directory",
            "/absolute/path/to/mcp-datavis-server",
            "run",
            "mcp_server_datavis",
            "--output_type",
            "png" 
        ]
    }
  }
}

Note: You can set the --output_type to either:

• png - to receive visualizations as base64 encoded images
• text - to receive the complete Vega-Lite specification with data as text

Using the Server

The server provides two main tools for data visualization workflows:

Saving Data

Use the save_data tool to store data tables for later visualization:

// Example of saving data
{
  "name": "sales_data",
  "data": [
    {"month": "Jan", "sales": 100},
    {"month": "Feb", "sales": 120},
    {"month": "Mar", "sales": 90},
    {"month": "Apr", "sales": 150}
  ]
}

Creating Visualizations

Use the visualize_data tool to create visualizations from your saved data using Vega-Lite specifications:

// Example of creating a bar chart
{
  "data_name": "sales_data",
  "vegalite_specification": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "month", "type": "nominal"},
      "y": {"field": "sales", "type": "quantitative"}
    }
  }
}

When using the png output type, the server will return a base64 encoded image of the visualization. With the text output type, it will return the complete Vega-Lite specification including the data.

Example Workflow

1. Save your data using the save_data tool
2. Design your visualization using Vega-Lite syntax
3. Create the visualization with the visualize_data tool
4. View the resulting image or Vega-Lite specification

This server enables powerful data visualization capabilities directly within your LLM interactions, without requiring external tools or manual steps.

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.