Skip to content

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.

License

Notifications You must be signed in to change notification settings

KamranBiglari/mcp-server-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

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

    git clone https://github.com/KamranBiglari/mcp-server-chart.git
    cd mcp-server-chart
  2. Install dependencies

    npm install
  3. Build the project

    npm run build
  4. Run the server

    npm start

Usage Examples

Basic Bar Chart

{
  "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

{
  "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

{
  "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

{
  "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:

{
  "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:

{
  "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

npm run build      # Build TypeScript
npm run dev        # Development mode with watch
npm run lint       # Run linting

Testing

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

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published