What can you do with this server?

The Vega-Lite MCP Server provides AI assistants with comprehensive access to Vega-Lite documentation, examples, validation tools, and schema information. * Search documentation: Search through Vega-Lite documentation for information about charts, encodings, marks, and more * Retrieve examples: Get Vega-Lite example specifications by category or type (bar, line, scatter, area, histogram, heatmap, interactive, etc.) with optional search terms * Validate specifications: Validate Vega-Lite JSON specifications to check for errors and ensure correctness * Access schema information: Get detailed information about Vega-Lite schema properties and overall structure (mark, encoding, data, transform, etc.)

Which integrations are available for this server?

Provides access to Vega-Lite documentation, examples, and validation tools, enabling AI assistants to search documentation, retrieve visualization examples by category, validate specifications, and access schema information for creating data visualizations.

How do I use Vega-Lite MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Vega-Lite MCP Server show me a bar chart example with tooltips" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

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

Tool	What it does	Example
`search_docs`	Search Vega-Lite and Deneb docs	"How do filter transforms work?" or "How does Deneb work with Power BI?"
`get_example`	Get examples by category	"Show me a line chart example"
`validate_spec`	Validate JSON specs	"Validate this Vega-Lite spec: {...}"
`get_schema_info`	Get schema details	"What encoding channels are available?"

🆕 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?

Check the path is absolute and correct
Test manually: node /path/to/dist/index.js (should say "running on stdio")
For Claude Code: Completely close and reopen VS Code (not just reload)
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

Claude Code (Manual)

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

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

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.

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

Install Server

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Report Issue

Related Servers

Vega-Lite MCP Server