@iflow-mcp/kamranbiglari-mcp-server-chart 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kamran Biglari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,264 @@
+# MCP Chart Server
+
+A Model Context Protocol (MCP) server that provides comprehensive chart generation capabilities. This server offers a wide variety of chart types with comprehensive Zod schema validation for type-safe chart configuration.
+
+## Claude.AI Integration (Free Running Version)
+
+For immediate use with Claude.AI without local setup, use these public endpoints:
+
+- **Streamable HTTP**: `https://chart.mcp.cloudcertainty.com/mcp`
+- **Server-Sent Events**: `https://chart.mcp.cloudcertainty.com/sse`
+
+Simply add either endpoint to your Claude.AI MCP configuration to start generating charts immediately.
+
+![Claude AI](screenshot/image.png)
+
+## Features
+
+- 🎯 **15+ Chart Types** - Comprehensive chart library covering all major visualization needs
+- 🔒 **Type Safety** - Full Zod schema validation for all chart configurations
+- 🌐 **Multiple Deployment Options** - Local server, HTTP streaming, and SSE endpoints
+- 🚀 **Claude.AI Integration** - Ready-to-use endpoints for Claude.AI integration
+- 📊 **Professional Charts** - Support for financial, statistical, and business visualizations
+
+## Chart Types Supported
+
+### Basic Charts
+- **Bar Chart** - Traditional bar charts with multiple datasets
+- **Line Chart** - Line charts with customizable styling and fill options
+- **Pie Chart** - Pie charts with hover effects and custom colors
+- **Radar Chart** - Multi-axis radar charts for comparative analysis
+- **Polar Area Chart** - Radial area charts for cyclical data
+
+### Advanced Charts
+- **Doughnut Chart** - Enhanced pie charts with center labels and semi-circle support
+- **Scatter Plot** - X/Y coordinate plotting with optional trend lines
+- **Bubble Chart** - Three-dimensional data visualization with bubble sizes
+- **OHLC Chart** - Financial candlestick charts with volume and indicators
+
+### Specialized Charts
+- **Violin Plot** - Statistical distribution visualization
+- **Gauge Chart** - Customizable gauge meters with thresholds
+- **Radial Gauge** - Simple radial progress indicators
+- **Progress Bar** - Linear progress indicators
+- **Sparkline** - Minimal trend visualization
+- **Sankey Diagram** - Flow and process visualization
+
+## Quick Start
+
+### Local Development
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/KamranBiglari/mcp-server-chart.git
+   cd mcp-server-chart
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Build the project**
+   ```bash
+   npm run build
+   ```
+
+4. **Run the server**
+   ```bash
+   npm start
+   ```
+
+## Usage Examples
+
+### Basic Bar Chart
+```json
+{
+  "type": "bar",
+  "data": {
+    "labels": ["January", "February", "March", "April", "May"],
+    "datasets": [
+      { "label": "Sales", "data": [50, 60, 70, 180, 190] },
+      { "label": "Expenses", "data": [100, 200, 300, 400, 500] }
+    ]
+  }
+}
+```
+
+### Financial OHLC Chart
+```json
+{
+  "type": "ohlc",
+  "data": {
+    "datasets": [
+      {
+        "label": "MSFT",
+        "data": [
+          {"x": 1459468800000, "o": 18.23, "h": 19.36, "l": 18.18, "c": 19.31}
+        ],
+        "color": {"up": "#26a69a", "down": "#ef5350", "unchanged": "#999"}
+      }
+    ]
+  }
+}
+```
+
+### Advanced Doughnut Chart
+```json
+{
+  "type": "doughnut",
+  "data": {
+    "labels": ["Complete", "Remaining"],
+    "datasets": [{"data": [75, 25], "backgroundColor": ["#4CAF50", "#E0E0E0"]}]
+  },
+  "options": {
+    "circumference": 3.14159,
+    "rotation": 3.14159,
+    "plugins": {
+      "doughnutlabel": {
+        "labels": [{"text": "75%", "font": {"size": 24}}]
+      }
+    }
+  }
+}
+```
+
+### Scatter Plot
+```json
+{
+  "type": "scatter",
+  "data": {
+    "datasets": [
+      {
+        "label": "Dataset 1",
+        "data": [
+          {"x": 2, "y": 4},
+          {"x": 3, "y": 3},
+          {"x": 5, "y": 8}
+        ]
+      }
+    ]
+  }
+}
+```
+
+## Configuration
+
+### MCP Client Configuration
+
+Add to your MCP client configuration:
+
+```json
+{
+  "mcpServers": {
+    "chart-server": {
+      "command": "node",
+      "args": ["path/to/mcp-server-chart/dist/index.js"]
+    }
+  }
+}
+```
+
+### Claude.AI Configuration
+
+For Claude.AI integration, add one of these endpoints:
+
+```json
+{
+  "mcpServers": {
+    "chart-server": {
+      "url": "https://chart.mcp.cloudcertainty.com/mcp"
+    }
+  }
+}
+```
+
+## Development
+
+### Project Structure
+```
+src/
+├── charts/           # Chart type definitions
+│   ├── bar.ts       # Bar chart schema
+│   ├── line.ts      # Line chart schema
+│   ├── ohlc.ts      # OHLC chart schema
+│   └── ...          # Other chart types
+├── utils/           # Utility functions
+│   ├── index.ts     # Zod to JSON schema conversion
+│   └── schema.ts    # Common schema definitions
+└── index.ts         # Main MCP server
+```
+
+### Building
+```bash
+npm run build      # Build TypeScript
+npm run dev        # Development mode with watch
+npm run lint       # Run linting
+```
+
+### Testing
+```bash
+npm test           # Run test suite
+npm run test:watch # Watch mode testing
+```
+
+## Chart Type Reference
+
+| Chart Type | Use Case | Data Format |
+|------------|----------|-------------|
+| `bar` | Categorical comparisons | `{labels: string[], datasets: {data: number[]}[]}` |
+| `line` | Trends over time | `{labels: string[], datasets: {data: number[]}[]}` |
+| `pie` | Part-to-whole relationships | `{labels: string[], datasets: {data: number[]}[]}` |
+| `doughnut` | Enhanced pie charts | `{labels: string[], datasets: {data: number[]}[]}` |
+| `radar` | Multi-variable comparison | `{labels: string[], datasets: {data: number[]}[]}` |
+| `polarArea` | Cyclical data | `{labels: string[], datasets: {data: number[]}[]}` |
+| `scatter` | Correlation analysis | `{datasets: {data: {x: number, y: number}[]}[]}` |
+| `bubble` | Three-dimensional data | `{datasets: {data: {x: number, y: number, r: number}[]}[]}` |
+| `ohlc` | Financial data | `{datasets: {data: {x: number, o: number, h: number, l: number, c: number}[]}[]}` |
+| `violin` | Statistical distributions | `{labels: string[], datasets: {data: number[][]}[]}` |
+| `gauge` | KPI dashboards | `{datasets: {value: number, data: number[]}[]}` |
+| `sankey` | Process flows | `{datasets: {data: {from: string, to: string, flow: number}[]}[]}` |
+
+## API Reference
+
+### Tools Available
+
+All chart types are available as MCP tools with the following pattern:
+- Tool name matches chart type (e.g., `bar`, `line`, `ohlc`)
+- Input schema validates chart configuration
+- Returns generated chart data
+
+### Schema Validation
+
+Every chart type includes comprehensive Zod schemas that validate:
+- Chart type and structure
+- Data format and types
+- Styling options
+- Chart-specific configurations
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Add your chart type or improvement
+4. Include tests and documentation
+5. Submit a pull request
+
+## License
+
+MIT License - see LICENSE file for details
+
+## Support
+
+- 📚 Documentation: Check the inline schema documentation
+- 🐛 Issues: Report bugs via GitHub Issues
+- 💬 Discussions: Use GitHub Discussions for questions
+- 🌐 Live Demo: Try the public endpoints with Claude.AI
+
+## Roadmap
+
+- [ ] Real-time data binding
+- [ ] Custom theme support
+- [ ] Export formats (PNG, SVG, PDF)
+- [ ] Animation and interaction options
+- [ ] Dashboard layout compositions

package/biome.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.0.4/schema.json",
+	"assist": {
+		"actions": {
+			"source": {
+				"useSortedKeys": "on"
+			}
+		},
+		"enabled": true
+	},
+	"files": {
+		"includes": ["!worker-configuration.d.ts"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentWidth": 4,
+		"lineWidth": 100
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noInferrableTypes": "error",
+				"noNonNullAssertion": "off",
+				"noParameterAssign": "error",
+				"noUnusedTemplateLiteral": "error",
+				"noUselessElse": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useNumberNamespace": "error",
+				"useSelfClosingElements": "error",
+				"useSingleVarDeclarator": "error"
+			},
+			"suspicious": {
+				"noConfusingVoidType": "off",
+				"noDebugger": "off",
+				"noExplicitAny": "off"
+			}
+		}
+	},
+	"root": false,
+	"vcs": {
+		"clientKind": "git",
+		"enabled": true,
+		"useIgnoreFile": true
+	}
+}

package/dist/charts/bar.js

@@ -0,0 +1,43 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+// Define the schema for the bar chart
+// {
+//   type: 'bar',
+//   data: {
+//     labels: ['January', 'February', 'March', 'April', 'May'],
+//     datasets: [
+//       { label: 'Dogs', data: [50, 60, 70, 180, 190] },
+//       { label: 'Cats', data: [100, 200, 300, 400, 500] },
+//     ],
+//   },
+// }
+const schema = {
+    type: z.literal("bar").default("bar"),
+    data: z.object({
+        labels: z.array(z.string()).describe("Labels for the x-axis"),
+        datasets: z.array(z.object({
+            label: z.string().describe("Label for the dataset"),
+            data: z.array(z.number()).describe("Data points for the dataset"),
+        })),
+    }),
+};
+const tool = {
+    name: "bar",
+    description: `Generates a bar chart with the provided data.
+    example input:
+  \`\`\`json
+    {
+    "labels": ["January", "February", "March", "April", "May"],
+    "datasets": [
+      { "label": "Dogs", "data": [50, 60, 70, 180, 190] },
+      { "label": "Cats", "data": [100, 200, 300, 400, 500] }
+    ]
+  }
+    \`\`\`
+    `,
+    inputSchema: zodToJsonSchema(schema),
+};
+export const bar = {
+    schema,
+    tool,
+};

package/dist/charts/bubble.js

@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+// Define the schema for the bubble chart
+// {
+//   type: 'bubble',
+//   data: {
+//     datasets: [
+//       {
+//         label: 'Data 1',
+//         data: [
+//           { x: 1, y: 4, r: 9 },
+//           { x: 2, y: 4, r: 6 },
+//           { x: 3, y: 8, r: 30 },
+//           { x: 0, y: 10, r: 1 },
+//           { x: 10, y: 5, r: 5 },
+//         ],
+//       },
+//     ],
+//   },
+// }
+const bubbleDataPointSchema = z.object({
+    x: z.number(),
+    y: z.number(),
+    r: z.number().describe("Radius of the bubble"),
+});
+const schema = {
+    type: z.literal("bubble").default("bubble"),
+    data: z.object({
+        datasets: z.array(z.object({
+            label: z.string().describe("Label for the dataset"),
+            data: z.array(bubbleDataPointSchema).describe("Array of {x, y, r} bubble points"),
+            backgroundColor: z.string().optional().describe("Background color of the bubbles"),
+            borderColor: z.string().optional().describe("Border color of the bubbles"),
+            borderWidth: z.number().optional().describe("Width of the bubble borders"),
+            hoverBackgroundColor: z.string().optional().describe("Background color when hovering"),
+            hoverBorderColor: z.string().optional().describe("Border color when hovering"),
+            hoverBorderWidth: z.number().optional().describe("Border width when hovering"),
+            hoverRadius: z.number().optional().describe("Radius when hovering"),
+        })),
+    }),
+};
+const tool = {
+    name: "bubble",
+    description: `Generates a bubble chart with the provided data points.
+  example input:
+\`\`\`json
+{
+  "type": "bubble",
+  "data": {
+    "datasets": [
+      {
+        "label": "Data 1",
+        "data": [
+          {"x": 1, "y": 4, "r": 9},
+          {"x": 2, "y": 4, "r": 6},
+          {"x": 3, "y": 8, "r": 30},
+          {"x": 0, "y": 10, "r": 1},
+          {"x": 10, "y": 5, "r": 5}
+        ]
+      }
+    ]
+  }
+}
+\`\`\`
+  `,
+    inputSchema: zodToJsonSchema(schema),
+};
+export const bubble = {
+    schema,
+    tool,
+};

package/dist/charts/doughnut.js

@@ -0,0 +1,104 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+// Define the schema for the doughnut chart
+// {
+//   type: 'doughnut',
+//   data: {
+//     labels: ['January', 'February', 'March', 'April', 'May'],
+//     datasets: [{ data: [50, 60, 70, 180, 190] }],
+//   },
+//   options: {
+//     plugins: {
+//       doughnutlabel: {
+//         labels: [{ text: '550', font: { size: 20 } }, { text: 'total' }],
+//       },
+//     },
+//   },
+// }
+const fontSchema = z.object({
+    size: z.number().optional(),
+    weight: z.string().optional(),
+});
+const doughnutLabelItemSchema = z.object({
+    text: z.string(),
+    font: fontSchema.optional(),
+    color: z.string().optional(),
+});
+const datalabelsSchema = z.object({
+    color: z.string().optional(),
+    anchor: z.string().optional(),
+    align: z.string().optional(),
+    formatter: z.function().optional(),
+    font: fontSchema.optional(),
+});
+const pluginsSchema = z.object({
+    doughnutlabel: z.object({
+        labels: z.array(doughnutLabelItemSchema).optional(),
+    }).optional(),
+    datalabels: datalabelsSchema.optional(),
+});
+const layoutSchema = z.object({
+    padding: z.number().optional(),
+});
+const legendSchema = z.object({
+    display: z.boolean().optional(),
+});
+const optionsSchema = z.object({
+    circumference: z.number().optional(),
+    rotation: z.number().optional(),
+    cutoutPercentage: z.number().optional(),
+    layout: layoutSchema.optional(),
+    legend: legendSchema.optional(),
+    plugins: pluginsSchema.optional(),
+});
+const schema = {
+    type: z.literal("doughnut").default("doughnut"),
+    data: z.object({
+        labels: z.array(z.string()).describe("Labels for each doughnut slice"),
+        datasets: z.array(z.object({
+            data: z.array(z.number()).describe("Data values for each slice"),
+            label: z.string().optional().describe("Label for the dataset"),
+            backgroundColor: z.union([z.string(), z.array(z.string())]).optional().describe("Background colors for slices"),
+            borderColor: z.union([z.string(), z.array(z.string())]).optional().describe("Border colors for slices"),
+            borderWidth: z.number().optional().describe("Width of the slice borders"),
+            hoverBackgroundColor: z.array(z.string()).optional().describe("Background colors when hovering"),
+            hoverBorderColor: z.array(z.string()).optional().describe("Border colors when hovering"),
+            hoverBorderWidth: z.number().optional().describe("Border width when hovering"),
+        })),
+    }),
+    options: optionsSchema.optional(),
+};
+const tool = {
+    name: "doughnut",
+    description: `Generates a doughnut chart with the provided data.
+  example input:
+\`\`\`json
+{
+  "type": "doughnut",
+  "data": {
+    "labels": ["January", "February", "March", "April", "May"],
+    "datasets": [
+      {
+        "data": [50, 60, 70, 180, 190]
+      }
+    ]
+  },
+  "options": {
+    "plugins": {
+      "doughnutlabel": {
+        "labels": [
+          {"text": "550", "font": {"size": 20}},
+          {"text": "total"}
+        ]
+      }
+    }
+  }
+}
+\`\`\`
+  `,
+    inputSchema: zodToJsonSchema(schema),
+};
+export const doughnut = {
+    schema,
+    tool,
+};

package/dist/charts/gauge.js

@@ -0,0 +1,84 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils/index.js";
+// Define the schema for the gauge chart
+// {
+//   type: 'gauge',
+//   data: {
+//     datasets: [
+//       {
+//         value: 50,
+//         data: [20, 40, 60],
+//         backgroundColor: ['green', 'orange', 'red'],
+//         borderWidth: 2,
+//       },
+//     ],
+//   },
+//   options: {
+//     valueLabel: {
+//       fontSize: 22,
+//       backgroundColor: 'transparent',
+//       color: '#000',
+//       formatter: function (value, context) {
+//         return value + ' mph';
+//       },
+//       bottomMarginPercentage: 10,
+//     },
+//   },
+// }
+const valueLabelSchema = z.object({
+    fontSize: z.number().optional(),
+    backgroundColor: z.string().optional(),
+    color: z.string().optional(),
+    formatter: z.function().optional(),
+    bottomMarginPercentage: z.number().optional(),
+});
+const optionsSchema = z.object({
+    valueLabel: valueLabelSchema.optional(),
+});
+const schema = {
+    type: z.literal("gauge").default("gauge"),
+    data: z.object({
+        datasets: z.array(z.object({
+            value: z.number().describe("Current value of the gauge"),
+            data: z.array(z.number()).describe("Threshold values for different sections"),
+            backgroundColor: z.array(z.string()).describe("Background colors for each section"),
+            borderWidth: z.number().optional().describe("Width of the gauge border"),
+            label: z.string().optional().describe("Label for the dataset"),
+        })),
+    }),
+    options: optionsSchema.optional(),
+};
+const tool = {
+    name: "gauge",
+    description: `Generates a gauge chart with the provided value and thresholds.
+  example input:
+\`\`\`json
+{
+  "type": "gauge",
+  "data": {
+    "datasets": [
+      {
+        "value": 50,
+        "data": [20, 40, 60],
+        "backgroundColor": ["green", "orange", "red"],
+        "borderWidth": 2
+      }
+    ]
+  },
+  "options": {
+    "valueLabel": {
+      "fontSize": 22,
+      "backgroundColor": "transparent",
+      "color": "#000",
+      "bottomMarginPercentage": 10
+    }
+  }
+}
+\`\`\`
+  `,
+    inputSchema: zodToJsonSchema(schema),
+};
+export const gauge = {
+    schema,
+    tool,
+};

package/dist/charts/index.js

@@ -0,0 +1,15 @@
+export { bar } from "./bar.js";
+export { bubble } from "./bubble.js";
+export { doughnut } from "./doughnut.js";
+export { gauge } from "./gauge.js";
+export { line } from "./line.js";
+export { ohlc } from "./ohlc.js";
+export { pie } from "./pie.js";
+export { polarArea } from "./polarArea.js";
+export { progressBar } from "./progressBar.js";
+export { radar } from "./radar.js";
+export { radialGauge } from "./radialGauge.js";
+export { sankey } from "./sankey.js";
+export { scatter } from "./scatter.js";
+export { sparkline } from "./sparkline.js";
+export { violin } from "./violin.js";