@vint.tri/report_gen_mcp 1.0.14 → 1.0.18

package/README.md

@@ -17,13 +17,13 @@ A powerful CLI tool for generating HTML reports with embedded charts, designed t
 ### Global Installation (Recommended)
 
 ```bash
-npm install -g @vint.tri/report_gen_mcp@1.0.9
+npm install -g @vint.tri/report_gen_mcp@1.0.18
 ```
 
 ### Direct Execution with npx
 
 ```bash
-npx @vint.tri/report_gen_mcp@1.0.9
+npx @vint.tri/report_gen_mcp@1.0.18
 ```
 
 ## Usage
@@ -64,28 +64,74 @@ To use this tool with Claude Desktop, add the following configuration to your Cl
     "tags": [],
     "command": "npx",
     "args": [
-      "@vint.tri/report_gen_mcp@1.0.9"
+      "@vint.tri/report_gen_mcp@1.0.18"
     ]
   }
 }
 ```
 
-Once configured, Claude can generate reports by sending requests with the following format:
+Once configured, Claude can generate reports by sending requests. Here's how to properly format your requests:
 
+#### How to Provide Data for Reports
+
+When calling the `generate-report` method, you need to provide three main pieces of data:
+
+1. **document**: A Markdown string containing your report content with chart placeholders
+2. **charts**: An object mapping chart IDs to their configurations
+3. **outputFile**: (Optional) The name of the output HTML file
+
+#### Document Format
+
+Your document should be a Markdown string that can include chart placeholders in the format `[[chart:chartId]]`. For example:
+
+```markdown
+# Sales Report
+
+## Monthly Performance
+
+[[chart:salesChart]]
+
+As shown above, our sales have increased by 15% this month.
+
+## Regional Comparison
+
+[[chart:regionalChart]]
+
+Different regions show varying performance levels.
+```
+
+#### Charts Configuration
+
+The `charts` parameter is an object where each key is a chart ID that matches a placeholder in your document, and each value is a chart configuration object with:
+
+- `type`: The chart type ("bar", "line", or "pie")
+- `config`: The Chart.js configuration for that chart
+
+#### Required Chart Data Structure
+
+All charts must follow a specific data structure:
+
+#### Method 1: Direct Method Call (Simple Format)
 ```json
 {
   "method": "generate-report",
   "params": {
-    "document": "# Sales Report\n\n[[chart:salesChart]]",
+    "document": "# Sales Report\n\nThis is our monthly sales report.\n\n[[chart:sales]]\n\n## Conclusion\n\nThis report shows our sales performance.",
     "charts": {
-      "salesChart": {
+      "sales": {
         "type": "bar",
         "config": {
-          "labels": ["Jan", "Feb", "Mar"],
-          "datasets": [{
-            "label": "Sales",
-            "data": [100, 150, 200]
-          }]
+          "labels": ["January", "February", "March", "April", "May"],
+          "datasets": [
+            {
+              "label": "Sales (USD)",
+              "data": [12000, 19000, 15000, 18000, 22000],
+              "backgroundColor": ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]
+            }
+          ],
+          "options": {
+            "title": "Monthly Sales Data"
+          }
         }
       }
     },
@@ -94,6 +140,180 @@ Once configured, Claude can generate reports by sending requests with the follow
 }
 ```
 
+#### Method 2: MCP Standard Format (Advanced)
+```json
+{
+  "method": "tools/call",
+  "params": {
+    "name": "generate-report",
+    "arguments": {
+      "document": "# Performance Report\n\n[[chart:performance]]\n\nDetailed analysis below.",
+      "charts": {
+        "performance": {
+          "type": "line",
+          "config": {
+            "labels": ["Q1", "Q2", "Q3", "Q4"],
+            "datasets": [
+              {
+                "label": "Revenue",
+                "data": [45000, 52000, 48000, 61000],
+                "borderColor": "#36A2EB",
+                "fill": false
+              },
+              {
+                "label": "Expenses",
+                "data": [30000, 32000, 31000, 35000],
+                "borderColor": "#FF6384",
+                "fill": false
+              }
+            ],
+            "options": {
+              "title": "Quarterly Performance",
+              "scales": {
+                "yAxes": [{
+                  "ticks": {
+                    "beginAtZero": true
+                  }
+                }]
+              }
+            }
+          }
+        }
+      },
+      "outputFile": "performance-report.html"
+    }
+  }
+}
+```
+
+#### How to Insert Charts in Documents
+
+Charts are inserted into your Markdown document using placeholders with the format `[[chart:chartId]]`, where `chartId` corresponds to the key in your charts object.
+
+Example:
+```markdown
+# My Report
+
+## Sales Overview
+
+[[chart:salesChart]]
+
+As we can see from the chart above, sales have been increasing steadily.
+
+## Regional Performance
+
+[[chart:regionalChart]]
+
+Different regions show varying performance levels.
+```
+
+#### Health Check
+
+To verify the tool is working correctly:
+
+```json
+{
+  "method": "health"
+}
+```
+
+Expected response:
+```json
+{
+  "status": "ok"
+}
+```
+
+#### List Available Tools
+
+To see what tools are available:
+
+```json
+{
+  "method": "tools/list"
+}
+```
+```
+
+### Detailed Chart Configuration Requirements
+
+Each chart type has specific configuration requirements that must be met. All chart configurations must include `labels` and `datasets` as arrays.
+
+#### Bar Charts
+
+Required structure:
+```json
+{
+  "type": "bar",
+  "config": {
+    "labels": ["Label1", "Label2", "Label3"],
+    "datasets": [
+      {
+        "label": "Dataset Name",
+        "data": [10, 20, 30],
+        "backgroundColor": ["red", "blue", "green"] // Optional
+      }
+    ],
+    "options": {
+      "title": "Chart Title" // Optional
+    }
+  }
+}
+```
+
+#### Line Charts
+
+Required structure:
+```json
+{
+  "type": "line",
+  "config": {
+    "labels": ["Label1", "Label2", "Label3"],
+    "datasets": [
+      {
+        "label": "Dataset Name",
+        "data": [10, 20, 30],
+        "borderColor": "blue" // Optional
+      }
+    ],
+    "options": {
+      "title": "Chart Title" // Optional
+    }
+  }
+}
+```
+
+#### Pie Charts
+
+Required structure:
+```json
+{
+  "type": "pie",
+  "config": {
+    "labels": ["Label1", "Label2", "Label3"],
+    "datasets": [
+      {
+        "data": [10, 20, 30],
+        "backgroundColor": ["red", "blue", "green"] // Optional
+      }
+    ],
+    "options": {
+      "title": "Chart Title" // Optional
+    }
+  }
+}
+```
+
+**Important Notes:**
+1. `labels` must be an array of strings
+2. `datasets` must be an array of objects
+3. Each dataset must include the required fields for its chart type:
+   - Bar charts: `label` and `data` (both required)
+   - Line charts: `label` and `data` (both required)
+   - Pie charts: `data` (required)
+4. All numerical data must be provided as arrays of numbers
+5. Color values (when provided) must be valid CSS color strings
+
 ### Health Check
 
 To verify the tool is working correctly:
@@ -130,8 +350,9 @@ npm test
 ### Methods
 
 1. `generate-report`: Creates an HTML report with embedded charts
-2. `health`: Checks if the tool is running correctly
-3. `mcp:list-tools`: Returns available tools (used by Claude Desktop)
+2. `get-report-url`: Returns a clickable URL for a generated report file
+3. `health`: Checks if the tool is running correctly
+4. `mcp:list-tools`: Returns available tools (used by Claude Desktop)
 
 ### Method Details
 
@@ -143,6 +364,7 @@ npm test
   - `type` (string): Chart type ("bar", "line", or "pie")
   - `config` (object): Chart.js configuration object
 - `outputFile` (string, optional): Output HTML file path (defaults to "report.html")
+- `tempDirectory` (string, optional): Temporary directory for file storage (defaults to current working directory if not specified)
 
 **Response:**
 ```json
@@ -153,6 +375,23 @@ npm test
 }
 ```
 
+#### get-report-url
+
+**Description:** Get a clickable URL for a generated report file
+
+**Parameters:**
+- `filePath` (string): Full path to the report file
+
+**Response:**
+```json
+{
+  "success": true,
+  "fileUrl": "file:///absolute/path/to/report.html",
+  "message": "Click the URL to open the report",
+  "filePath": "/absolute/path/to/report.html"
+}
+```
+
 #### health
 
 **Response:**

package/debug-report.html

@@ -0,0 +1,15 @@
+
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Report</title>
+    <style> body { font-family: Arial, sans-serif; } img { max-width: 100%; } </style>
+  </head>
+  <body>
+    <h1>Test Report</h1>
+<p>This is a test.</p>
+
+  </body>
+  </html>
+  

package/detailed-debug.js

@@ -2,7 +2,7 @@ const { spawn } = require('child_process');
 
 console.log('Detailed debug test...\n');
 
-const child = spawn('npx', ['-y', '@vint.tri/report_gen_mcp@1.0.9'], {
+const child = spawn('npx', ['-y', '@vint.tri/report_gen_mcp@1.0.14'], {
   stdio: ['pipe', 'pipe', 'pipe']
 });
 

package/dist/charts/bar.js

@@ -10,6 +10,7 @@ exports.barSchema = zod_1.z.object({
         label: zod_1.z.string(),
         data: zod_1.z.array(zod_1.z.number()),
         backgroundColor: zod_1.z.array(zod_1.z.string()).optional(),
+        borderColor: zod_1.z.array(zod_1.z.string()).optional(),
     })),
     options: zod_1.z.object({
         title: zod_1.z.string().optional(),

package/dist/charts/line.js

@@ -9,7 +9,8 @@ exports.lineSchema = zod_1.z.object({
     datasets: zod_1.z.array(zod_1.z.object({
         label: zod_1.z.string(),
         data: zod_1.z.array(zod_1.z.number()),
-        borderColor: zod_1.z.string().optional(),
+        borderColor: zod_1.z.array(zod_1.z.string()).optional(),
+        fill: zod_1.z.boolean().optional(),
     })),
     options: zod_1.z.object({
         title: zod_1.z.string().optional(),

package/dist/charts/pie.js

@@ -9,6 +9,7 @@ exports.pieSchema = zod_1.z.object({
     datasets: zod_1.z.array(zod_1.z.object({
         data: zod_1.z.array(zod_1.z.number()),
         backgroundColor: zod_1.z.array(zod_1.z.string()).optional(),
+        borderColor: zod_1.z.array(zod_1.z.string()).optional(),
     })),
     options: zod_1.z.object({
         title: zod_1.z.string().optional(),

package/dist/index.js

@@ -9,9 +9,10 @@ const commander_1 = require("commander");
 const reportGenerator_1 = require("./utils/reportGenerator");
 const path_1 = __importDefault(require("path"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
-const index_js_1 = require("@modelcontextprotocol/sdk/server/index.js");
+const os_1 = __importDefault(require("os"));
+const mcp_js_1 = require("@modelcontextprotocol/sdk/server/mcp.js");
 const stdio_js_1 = require("@modelcontextprotocol/sdk/server/stdio.js");
-const types_js_1 = require("@modelcontextprotocol/sdk/types.js");
+const zod_1 = require("zod");
 const app = (0, express_1.default)();
 const port = 3000;
 app.use(express_1.default.json());
@@ -52,123 +53,104 @@ commander_1.program
     const result = await (0, reportGenerator_1.generateReport)(opts.document, charts, opts.output);
     console.log(result);
 });
-// Handle stdio mode for Claude Desktop integration using MCP SDK
+// Handle stdio mode for Claude Desktop integration
 if (process.argv.length === 2) {
-    // No command specified, run in stdio mode with MCP SDK
-    const server = new index_js_1.Server({
-        name: 'report-gen-mcp-server',
-        version: '1.0.9',
+    // No command specified, run in stdio mode using MCP SDK
+    const mcpServer = new mcp_js_1.McpServer({
+        name: "report_gen_mcp",
+        version: "1.0.18",
     }, {
+        // Disable health check to prevent automatic calls
         capabilities: {
-            tools: {},
-        },
+            tools: {}
+        }
     });
-    // Setup tool handlers
-    server.setRequestHandler(types_js_1.ListToolsRequestSchema, async () => ({
-        tools: [
-            {
-                name: "generate-report",
-                description: "Generate an HTML report with embedded charts",
-                inputSchema: {
-                    type: "object",
-                    properties: {
-                        document: {
-                            type: "string",
-                            description: "Markdown document with chart placeholders [[chart:id]]"
-                        },
-                        charts: {
-                            type: "object",
-                            description: "Chart configurations mapped by ID",
-                            additionalProperties: {
-                                type: "object",
-                                properties: {
-                                    type: {
-                                        type: "string",
-                                        enum: ["bar", "line", "pie"]
-                                    },
-                                    config: {
-                                        type: "object"
-                                    }
-                                },
-                                required: ["type", "config"]
-                            }
-                        },
-                        outputFile: {
-                            type: "string",
-                            description: "Output HTML file path"
-                        },
-                        tempDirectory: {
-                            type: "string",
-                            description: "Temporary directory for file storage (defaults to current working directory if not specified)"
-                        }
-                    },
-                    required: ["document", "charts"]
-                }
-            }
-        ]
-    }));
-    server.setRequestHandler(types_js_1.CallToolRequestSchema, async (request) => {
+    // Register the generate-report tool
+    mcpServer.registerTool("generate-report", {
+        description: "Generate an HTML report with embedded charts",
+        inputSchema: {
+            document: zod_1.z.string().describe("Markdown document with chart placeholders [[chart:id]]"),
+            charts: zod_1.z.record(zod_1.z.object({
+                type: zod_1.z.enum(["bar", "line", "pie"]),
+                config: zod_1.z.object({
+                    labels: zod_1.z.array(zod_1.z.string()),
+                    datasets: zod_1.z.array(zod_1.z.object({
+                        label: zod_1.z.string().optional(),
+                        data: zod_1.z.array(zod_1.z.number()),
+                        backgroundColor: zod_1.z.array(zod_1.z.string()).optional(),
+                        borderColor: zod_1.z.array(zod_1.z.string()).optional(),
+                        fill: zod_1.z.boolean().optional(),
+                    })),
+                    options: zod_1.z.object({
+                        title: zod_1.z.string().optional(),
+                    }).optional(),
+                }),
+            })).describe("Chart configurations mapped by ID"),
+            outputFile: zod_1.z.string().optional().describe("Output HTML file path"),
+            tempDirectory: zod_1.z.string().optional().describe("Temporary directory for file storage (defaults to system temporary directory if not specified)"),
+        },
+    }, async (params) => {
+        const { document, charts, outputFile = 'report.html', tempDirectory = os_1.default.tmpdir() } = params;
+        const outputPath = path_1.default.resolve(tempDirectory, outputFile);
         try {
-            if (request.params.name === 'generate-report') {
-                const args = request.params.arguments || {};
-                const document = typeof args.document === 'string' ? args.document : '';
-                const charts = (typeof args.charts === 'object' && args.charts !== null) ? args.charts : {};
-                const outputFile = typeof args.outputFile === 'string' ? args.outputFile : 'report.html';
-                const tempDirectory = typeof args.tempDirectory === 'string' ? args.tempDirectory : process.cwd();
-                const outputPath = path_1.default.resolve(tempDirectory, outputFile);
-                const result = await (0, reportGenerator_1.generateReport)(document, charts, outputPath);
-                // Read the file content to send back to the client
-                const fileContent = await fs_extra_1.default.readFile(outputPath, 'utf8');
-                return {
-                    content: [
-                        {
-                            type: 'text',
-                            text: JSON.stringify({
-                                ...result,
-                                fileContent: fileContent
-                            }),
-                        }
-                    ],
-                };
-            }
-            else {
-                return {
-                    content: [
-                        {
-                            type: 'text',
-                            text: JSON.stringify({ error: 'Unknown method' }),
-                        }
-                    ],
-                    isError: true,
-                };
-            }
+            const result = await (0, reportGenerator_1.generateReport)(document, charts, outputPath);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            ...result,
+                            message: "Report generated successfully",
+                            filePath: outputPath
+                        })
+                    }
+                ]
+            };
         }
         catch (error) {
+            throw error;
+        }
+    });
+    // Register a new tool to get file path/URL
+    mcpServer.registerTool("get-report-url", {
+        description: "Get a clickable URL for a generated report file",
+        inputSchema: {
+            filePath: zod_1.z.string().describe("Full path to the report file")
+        },
+    }, async (params) => {
+        const { filePath } = params;
+        try {
+            // Check if file exists
+            await fs_extra_1.default.access(filePath);
+            // Return a file URL that can be clicked to open the file
+            const fileUrl = `file://${filePath}`;
             return {
                 content: [
                     {
-                        type: 'text',
-                        text: JSON.stringify({ error: error.message }),
+                        type: "text",
+                        text: JSON.stringify({
+                            success: true,
+                            fileUrl: fileUrl,
+                            message: "Click the URL to open the report",
+                            filePath: filePath
+                        })
                     }
-                ],
-                isError: true,
+                ]
             };
         }
+        catch (error) {
+            throw new Error(`File not found: ${filePath}`);
+        }
     });
-    // Error handling
-    server.onerror = (error) => {
-        console.error('[MCP Error]', error);
-    };
-    process.on('SIGINT', async () => {
-        await server.close();
-        process.exit(0);
-    });
-    // Connect the server to stdio
-    (async () => {
+    async function main() {
         const transport = new stdio_js_1.StdioServerTransport();
-        await server.connect(transport);
-        console.error('Report Generator MCP server running on stdio');
-    })();
+        await mcpServer.connect(transport);
+        console.log("MCP server is running...");
+    }
+    main().catch((error) => {
+        console.error("Server error:", error);
+        process.exit(1);
+    });
 }
 else {
     // Run commander program when arguments are provided

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vint.tri/report_gen_mcp",
-  "version": "1.0.14",
+  "version": "1.0.18",
   "description": "CLI tool for generating HTML reports with embedded charts",
   "main": "dist/index.js",
   "bin": {

package/src/charts/bar.ts

@@ -8,6 +8,7 @@ export const barSchema = z.object({
     label: z.string(),
     data: z.array(z.number()),
     backgroundColor: z.array(z.string()).optional(),
+    borderColor: z.array(z.string()).optional(),
   })),
   options: z.object({
     title: z.string().optional(),

package/src/charts/line.ts

@@ -7,7 +7,8 @@ export const lineSchema = z.object({
   datasets: z.array(z.object({
     label: z.string(),
     data: z.array(z.number()),
-    borderColor: z.string().optional(),
+    borderColor: z.array(z.string()).optional(),
+    fill: z.boolean().optional(),
   })),
   options: z.object({
     title: z.string().optional(),

package/src/charts/pie.ts

@@ -7,6 +7,7 @@ export const pieSchema = z.object({
   datasets: z.array(z.object({
     data: z.array(z.number()),
     backgroundColor: z.array(z.string()).optional(),
+    borderColor: z.array(z.string()).optional(),
   })),
   options: z.object({
     title: z.string().optional(),