Vega-Lite & Deneb MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with access to Vega-Lite and Deneb documentation, examples, and validation tools.

What it does

This server enables AI assistants like Claude to:

• Search Vega-Lite and Deneb documentation
• Get visualization examples by category
• Validate Vega-Lite specifications
• Access schema information
• Power BI integration via Deneb documentation

Quick Start

1. Install

# Clone the repository
git clone https://github.com/inteligencianegociosmmx/vegaLite_mcp_server.git
cd vegaLite_mcp_server

# Install dependencies and build
npm install
npm run build

2. Configure

Claude Code (VS Code) - Recommended

# One command installation
claude mcp add vegalite node /path/to/vegaLite_mcp_server/dist/index.js

Then completely close and reopen VS Code (important - don't just reload).

Claude Desktop

Edit your config file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

Add:

{
  "mcpServers": {
    "vegalite": {
      "command": "node",
      "args": ["/absolute/path/to/vegaLite_mcp_server/dist/index.js"]
    }
  }
}

Restart Claude Desktop.

3. Verify

Claude Code: Type /mcp - you should see "vegalite" listed

Claude Desktop: Look for the tools indicator

4. Try it

Search for "bar chart" in Vega-Lite

Show me a scatter plot example

Validate this spec: {"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "mark": "bar", ...}

Available Tools

Deneb Support

Deneb is a certified custom visual for Microsoft Power BI that uses Vega-Lite. This server now includes Deneb documentation to help Power BI users:

• Understand how to use Vega-Lite in Power BI
• Learn about Power BI-specific features (cross-filtering, tooltips, etc.)
• Get examples specific to the Power BI context

Try: "How do I use cross-filtering in Deneb?" or "What's the difference between Vega-Lite and Deneb?"

Troubleshooting

Server not showing up?

1. Check the path is absolute and correct
2. Test manually: node /path/to/dist/index.js (should say "running on stdio")
3. For Claude Code: Completely close and reopen VS Code (not just reload)
4. Verify with /mcp (Claude Code) or look for tools indicator (Claude Desktop)

Tools not working?

npm run build  # Rebuild the project

Remove the server:

claude mcp remove vegalite  # Claude Code
# Or manually delete from config file

Development

npm run watch        # Auto-rebuild on changes
npm run scrape      # Fetch latest Vega-Lite docs

Project Structure

src/
 index.ts              # Main MCP server
 tools/
    search.ts        # Documentation search
    examples.ts      # Example retrieval
    validate.ts      # Spec validation
 utils/
     scraper.ts       # Documentation scraper

Manual Configuration

<details> <summary>Click to expand manual setup instructions</summary>

Claude Code (Manual)

1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2. Type: Claude Code: Edit MCP Settings
3. Add:

{
  "mcpServers": {
    "vegalite": {
      "command": "node",
      "args": ["/absolute/path/to/dist/index.js"]
    }
  }
}

1. Save and completely close/reopen VS Code

Other MCP Clients

Add the same configuration to your client's MCP settings file. Check your client's documentation for the config file location.

</details>

Contributing

Contributions welcome! Please submit a Pull Request.

See CONTRIBUTING.md for development guidelines.

Future Features

For information about deploying as a remote server, see docs/DEPLOYMENT.md.

License

MIT License - See LICENSE

Links

• Issues: https://github.com/inteligencianegociosmmx/vegaLite_mcp_server/issues
• Vega-Lite Docs: https://vega.github.io/vega-lite/
• MCP Docs: https://modelcontextprotocol.io

---

Built with Model Context Protocol Powered by Vega-Lite