@gluip/chart-canvas-mcp 0.1.0

package/dist/api-server.js

@@ -0,0 +1,18 @@
+import express from "express";
+import cors from "cors";
+import { stateManager } from "./state.js";
+const app = express();
+const PORT = 3000;
+app.use(cors());
+app.use(express.json());
+// Get current canvas state
+app.get("/state", (req, res) => {
+    res.json(stateManager.getState());
+});
+// Health check
+app.get("/health", (req, res) => {
+    res.json({ status: "ok" });
+});
+app.listen(PORT, () => {
+    console.log(`API server listening on http://localhost:${PORT}`);
+});

package/dist/api.js

@@ -0,0 +1,32 @@
+import express from "express";
+import cors from "cors";
+import path from "path";
+import { fileURLToPath } from "url";
+import { stateManager } from "./state.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export function startApiServer() {
+    const app = express();
+    const PORT = 3000;
+    app.use(cors());
+    app.use(express.json());
+    // API endpoints
+    app.get("/state", (req, res) => {
+        res.json(stateManager.getState());
+    });
+    app.get("/health", (req, res) => {
+        res.json({ status: "ok" });
+    });
+    // Serve frontend static files in production
+    const frontendDistPath = path.join(__dirname, "../../frontend/dist");
+    app.use(express.static(frontendDistPath));
+    // Fallback to index.html for client-side routing
+    app.get("*", (req, res) => {
+        res.sendFile(path.join(frontendDistPath, "index.html"));
+    });
+    app.listen(PORT, () => {
+        console.error(`Server running on http://localhost:${PORT}`);
+        console.error(`- API: http://localhost:${PORT}/state`);
+        console.error(`- Frontend: http://localhost:${PORT}`);
+    });
+}

package/dist/index.js

@@ -0,0 +1,216 @@
+#!/usr/bin/env node
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { stateManager } from "./state.js";
+import { startApiServer } from "./api.js";
+import open from "open";
+const server = new Server({
+    name: "chart-canvas-server",
+    version: "0.1.0",
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+// Register tools
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return {
+        tools: [
+            {
+                name: "addVisualization",
+                description: "Add a new chart visualization to the canvas",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        type: {
+                            type: "string",
+                            enum: ["line", "bar", "scatter", "table", "flowchart", "pie"],
+                            description: "Type of visualization to create",
+                        },
+                        series: {
+                            type: "array",
+                            items: {
+                                type: "object",
+                                properties: {
+                                    name: {
+                                        type: "string",
+                                        description: "Name of the series (e.g., '2015', 'Product A')",
+                                    },
+                                    data: {
+                                        type: "array",
+                                        items: {
+                                            type: "array",
+                                            items: { type: "number" },
+                                            minItems: 2,
+                                            maxItems: 2,
+                                        },
+                                        description: "Array of [x, y] coordinate pairs for this series",
+                                    },
+                                },
+                                required: ["name", "data"],
+                            },
+                            description: "Array of data series to display (required for charts)",
+                        },
+                        table: {
+                            type: "object",
+                            properties: {
+                                headers: {
+                                    type: "array",
+                                    items: { type: "string" },
+                                    description: "Column headers for the table",
+                                },
+                                rows: {
+                                    type: "array",
+                                    items: {
+                                        type: "array",
+                                        items: { type: ["string", "number"] },
+                                    },
+                                    description: "Table rows, each row is an array of values",
+                                },
+                            },
+                            required: ["headers", "rows"],
+                            description: "Table data (required for table type)",
+                        },
+                        mermaid: {
+                            type: "string",
+                            description: "Mermaid diagram syntax (required for flowchart type)",
+                        },
+                        title: {
+                            type: "string",
+                            description: "Optional title for the chart",
+                        },
+                        description: {
+                            type: "string",
+                            description: "Optional description or explanation for the chart",
+                        },
+                        xLabels: {
+                            type: "array",
+                            items: { type: "string" },
+                            description: "Optional labels for the x-axis (e.g., dates). Should match the number of data points.",
+                        },
+                    },
+                    required: ["type"],
+                },
+            },
+            {
+                name: "removeVisualization",
+                description: "Remove a visualization from the canvas by ID",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        id: {
+                            type: "string",
+                            description: "ID of the visualization to remove",
+                        },
+                    },
+                    required: ["id"],
+                },
+            },
+            {
+                name: "clearCanvas",
+                description: "Remove all visualizations from the canvas",
+                inputSchema: {
+                    type: "object",
+                    properties: {},
+                },
+            },
+            {
+                name: "showCanvas",
+                description: "Open the canvas in a browser window to view visualizations",
+                inputSchema: {
+                    type: "object",
+                    properties: {},
+                },
+            },
+        ],
+    };
+});
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    switch (name) {
+        case "addVisualization": {
+            const { type, series, table, mermaid, title, description, xLabels } = args;
+            const viz = stateManager.addVisualization({
+                type,
+                series,
+                table,
+                mermaid,
+                title,
+                description,
+                xLabels,
+            });
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Added ${type} chart with ID ${viz.id}. View it at http://localhost:3000`,
+                    },
+                ],
+            };
+        }
+        case "removeVisualization": {
+            const { id } = args;
+            const removed = stateManager.removeVisualization(id);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: removed
+                            ? `Removed visualization ${id}`
+                            : `Visualization ${id} not found`,
+                    },
+                ],
+            };
+        }
+        case "clearCanvas": {
+            stateManager.clearCanvas();
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: "Cleared all visualizations from canvas",
+                    },
+                ],
+            };
+        }
+        case "showCanvas": {
+            try {
+                await open("http://localhost:3000");
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: "Opened canvas in browser at http://localhost:3000",
+                        },
+                    ],
+                };
+            }
+            catch (error) {
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `Failed to open browser: ${error instanceof Error ? error.message : String(error)}`,
+                        },
+                    ],
+                };
+            }
+        }
+        default:
+            throw new Error(`Unknown tool: ${name}`);
+    }
+});
+async function main() {
+    // Start the API server for frontend
+    startApiServer();
+    // Start MCP server on stdio
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("Chart Canvas MCP Server running");
+    console.error("API server running on http://localhost:3000");
+}
+main().catch((error) => {
+    console.error("Fatal error:", error);
+    process.exit(1);
+});

package/dist/state.js

@@ -0,0 +1,35 @@
+import { randomUUID } from "crypto";
+class StateManager {
+    state = {
+        visualizations: [],
+    };
+    getState() {
+        return JSON.parse(JSON.stringify(this.state));
+    }
+    addVisualization(viz) {
+        // Flowcharts krijgen een grotere default grootte
+        const isFlowchart = viz.type === "flowchart";
+        const defaultWidth = isFlowchart ? 10 : 6;
+        const defaultHeight = isFlowchart ? 8 : 4;
+        const newViz = {
+            id: randomUUID(),
+            ...viz,
+            // Auto-position: calculate next available spot
+            x: (this.state.visualizations.length % 2) * 6,
+            y: Math.floor(this.state.visualizations.length / 2) * 4,
+            w: defaultWidth,
+            h: defaultHeight,
+        };
+        this.state.visualizations.push(newViz);
+        return newViz;
+    }
+    removeVisualization(id) {
+        const initialLength = this.state.visualizations.length;
+        this.state.visualizations = this.state.visualizations.filter((v) => v.id !== id);
+        return this.state.visualizations.length < initialLength;
+    }
+    clearCanvas() {
+        this.state.visualizations = [];
+    }
+}
+export const stateManager = new StateManager();

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@gluip/chart-canvas-mcp",
+  "version": "0.1.0",
+  "description": "MCP server for creating interactive visualizations (charts, diagrams, tables) through AI assistants",
+  "author": "Martijn",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "chart-canvas-mcp": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "visualization",
+    "charts",
+    "echarts",
+    "mermaid",
+    "ai",
+    "llm"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/martijn/chart-canvas.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "build:all": "npm run build && cd ../frontend && npm run build",
+    "dev": "tsx src/index.ts",
+    "dev:api": "tsx src/api-server.ts",
+    "start": "node dist/index.js",
+    "start:prod": "npm run build:all && node dist/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.4",
+    "express": "^4.21.2",
+    "cors": "^2.8.5",
+    "open": "^10.1.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/cors": "^2.8.17",
+    "@types/node": "^22.10.5",
+    "typescript": "^5.7.3",
+    "tsx": "^4.19.2"
+  }
+}