{
  "markdown": "# Chart Canvas MCP Server\n\n> Interactive visualization dashboard for AI assistants via Model Context Protocol\n\nCreate beautiful charts, diagrams, and tables directly from your AI conversations. Chart Canvas provides a real-time dashboard that displays visualizations as you work with LLMs like Claude.\n\n## Demo\n\n[![Chart Canvas Demo](https://img.youtube.com/vi/XVucQstPisc/maxresdefault.jpg)](https://www.youtube.com/watch?v=XVucQstPisc)\n\nWatch the [full demo on YouTube](https://www.youtube.com/watch?v=XVucQstPisc) to see Chart Canvas in action!\n\n## Features\n\n✨ **Multiple Chart Types**: Line, bar, scatter, pie charts, tables, and Mermaid diagrams  \n🎨 **Interactive Dashboard**: Drag-and-drop grid layout with real-time updates  \n🔄 **Live Synchronization**: Changes appear instantly in your browser  \n📊 **Rich Visualizations**: Powered by ECharts and Mermaid  \n💾 **Universal Data Sources**: Query SQLite, CSV, Parquet, JSON, and NDJSON files directly  \n⚡ **Smart Data Flow**: Execute queries server-side - data stays local, never sent to LLM  \n🔒 **Privacy First**: Your data never leaves your machine  \n🚀 **Easy Setup**: One command to get started  \n🌐 **Production Ready**: Built-in production mode with optimized builds\n\n## Supported Data Sources\n\nChart Canvas can query and visualize data from multiple file formats:\n\n- **SQLite** (`.db`, `.sqlite`, `.sqlite3`) - Relational databases\n- **CSV** (`.csv`) - Comma-separated values\n- **Parquet** (`.parquet`) - Columnar storage format\n- **JSON** (`.json`) - JSON arrays of objects\n- **NDJSON** (`.jsonl`, `.ndjson`) - Newline-delimited JSON\n\n**Privacy & Performance**: All queries execute locally on your machine using DuckDB. Query results are transformed into visualizations server-side - only metadata (chart configuration) is sent to the LLM, never your actual data. This makes it fast, scalable, and private.\n\n## Quick Start\n\n### Installation\n\n```bash\nnpm install -g @gluip/chart-canvas-mcp\n```\n\nOr use directly with npx (no installation needed):\n\n```bash\nnpx @gluip/chart-canvas-mcp\n```\n\n### Configuration\n\nAdd to your MCP client configuration (e.g., Claude Desktop):\n\n**macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`  \n**Windows**: `%APPDATA%/Claude/claude_desktop_config.json`\n\n```json\n{\n  \"mcpServers\": {\n    \"chart-canvas\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@gluip/chart-canvas-mcp\"]\n    }\n  }\n}\n```\n\n### Usage\n\n1. Start your MCP client (e.g., Claude Desktop)\n2. The server will automatically start on port 3000\n3. Use the `showCanvas` tool to open the dashboard in your browser\n4. Ask the AI to create visualizations!\n\n## Example Prompts\n\n```\n\"Show me a line chart comparing sales data for 2023 and 2024\"\n\n\"Create a pie chart showing market share by region\"\n\n\"Draw a flowchart for the user authentication process\"\n\n\"Make a table with team member information\"\n\n\"Show me the database schema for my SQLite database\"\n\n\"Query the athletes table and show the top 10 with most personal records\"\n\n\"Create a chart showing sales trends from the database grouped by region\"\n```\n\n## MCP Tools\n\n### addVisualization\n\nCreate charts, diagrams, and tables on the canvas.\n\n**Supported Types**:\n\n- `line` - Line charts with multiple series\n- `bar` - Bar charts for comparisons\n- `scatter` - Scatter plots for data distribution\n- `pie` - Pie charts with labels\n- `table` - Data tables with headers\n- `flowchart` - Mermaid diagrams (flowcharts, sequence diagrams, Gantt charts, etc.)\n\n**Example**:\n\n```typescript\n{\n  type: \"line\",\n  title: \"Monthly Sales\",\n  series: [\n    { name: \"2023\", data: [[1, 120], [2, 132], [3, 101]] },\n    { name: \"2024\", data: [[1, 220], [2, 182], [3, 191]] }\n  ],\n  xLabels: [\"Jan\", \"Feb\", \"Mar\"]\n}\n```\n\n### removeVisualization\n\nRemove a specific visualization by ID.\n\n### clearCanvas\n\nRemove all visualizations from the canvas.\n\n### showCanvas\n\nOpen the dashboard in your default browser.\n\n### getDatabaseSchema\n\nInspect the structure of a SQLite database to understand available tables and columns before writing queries.\n\n**Parameters**:\n\n- `databasePath` - Path to SQLite database file (e.g., `./data/mydb.sqlite` or absolute path)\n\n**Example**:\n\n```typescript\n{\n  databasePath: \"/path/to/database.db\";\n}\n```\n\n**Returns**: Formatted schema showing all tables, columns, data types, and constraints.\n\n### queryAndVisualize\n\nExecute a SQL query on a SQLite database and create a visualization from the results. Queries are executed server-side and must be read-only (SELECT only). Maximum 10,000 rows.\n\n**Parameters**:\n\n- `databasePath` - Path to SQLite database file\n- `query` - SQL SELECT query (read-only)\n- `visualizationType` - Type of chart: `line`, `bar`, `scatter`, `pie`, or `table`\n- `columnMapping` (optional for table) - Mapping of columns to chart axes:\n  - `xColumn` - Column for X-axis (required for charts)\n  - `yColumns` - Array of columns for Y-axis (required for charts)\n  - `seriesColumn` - Column to group data into separate series (optional)\n  - `groupByColumn` - Alternative grouping column (optional)\n- `title` - Optional title for visualization\n- `description` - Optional description\n- `useColumnAsXLabel` - If true, use X column values as labels instead of numbers\n\n**Example**:\n\n```typescript\n{\n  databasePath: \"./data/sales.db\",\n  query: \"SELECT region, SUM(revenue) as total FROM sales GROUP BY region\",\n  visualizationType: \"bar\",\n  columnMapping: {\n    xColumn: \"region\",\n    yColumns: [\"total\"]\n  },\n  title: \"Revenue by Region\",\n  useColumnAsXLabel: true\n}\n```\n\n**Security**: Only SELECT and WITH (CTE) queries are allowed. INSERT, UPDATE, DELETE, DROP, and other modifying operations are blocked.\n\n## Architecture\n\n- **Backend**: Node.js + TypeScript + Express + MCP SDK\n- **Frontend**: Vue 3 + ECharts + Mermaid + Grid Layout\n- **Communication**: Real-time polling for instant updates\n\n## Development\n\n### Local Development\n\n```bash\n# Clone repository\ngit clone https://github.com/gluip/chart-canvas.git\ncd chart-canvas\n\n# Install backend dependencies\ncd backend\nnpm install\n\n# Install frontend dependencies\ncd ../frontend\nnpm install\n\n# Development mode (backend + frontend separate)\n# Terminal 1 - Backend\ncd backend\nnpm run dev\n\n# Terminal 2 - Frontend\ncd frontend\nnpm run dev\n\n# Production mode (single server)\ncd backend\nnpm run build:all\nnpm run start:prod\n```\n\n### MCP Configuration for Local Development\n\n```json\n{\n  \"mcpServers\": {\n    \"chart-canvas\": {\n      \"command\": \"/path/to/node\",\n      \"args\": [\n        \"/path/to/chart-canvas/backend/node_modules/.bin/tsx\",\n        \"/path/to/chart-canvas/backend/src/index.ts\"\n      ]\n    }\n  }\n}\n```\n\n## License\n\nMIT © 2026 Martijn\n\n## Links\n\n- [NPM Package](https://www.npmjs.com/package/@gluip/chart-canvas-mcp)\n- [GitHub Repository](https://github.com/gluip/chart-canvas)\n- [Model Context Protocol](https://modelcontextprotocol.io)\n",
  "bytes": 6845,
  "sha": "d505c777204955af7908b58029966e800072e21cf453957e8c64555804ec8133",
  "repo_slug": "gluip/chart-canvas",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_gluip_chart_canvas_27a1a50d/readme"
}