English | 日本語 | README

QuickChart MCP Server

Overview

This Model Context Protocol (MCP) server provides powerful visualization tools using QuickChart.io APIs.
With this MCP, AI assistants can create charts, diagrams, barcodes, QR codes, word clouds, tables, and more.

Example prompts:

• "I need a chart showing our Q4 sales by region"

• "Create a QR code for our contact information"

• "Generate a professional table from this CSV data"

• "Make a word cloud from these customer reviews"

• "Draw a flowchart of our deployment process"

The AI will:

1. Choose the right tool for your request

2. Structure the data appropriately

3. Apply suitable styling and formatting

4. Save or display the result as needed

Output Options

Get URLs: Perfect for sharing, embedding in web pages, or quick previews
Save Files: Ideal for reports, presentations, or archival purposes

Supported Formats:

• Images: PNG, JPEG, WebP, SVG

• Documents: PDF

• Data: Base64 encoding

File Management:

• Files are saved to your Desktop by default (configurable)

• Custom output directory via environment variable

• Custom paths supported for organization

• Automatic directory creation when needed

Installation

Via Claude Desktop

Add to your Claude Desktop configuration:

With Custom Configuration

Environment Variables

Environment Variables:

URL Configuration:

• QUICKCHART_BASE_URL: Main QuickChart API base URL (default: https://quickchart.io)

• QUICKCHART_API_BASE_URL: QuickChart API server base URL (default: https://api.quickchart.io)

Setting QUICKCHART_BASE_URL will configure these endpoints:

• Charts: {BASE_URL}/chart

• QR Codes: {BASE_URL}/qr

• Word Clouds: {BASE_URL}/wordcloud

• ApexCharts: {BASE_URL}/apex-charts/render

• Google Charts: {BASE_URL}/google-charts/render

• Barcodes: {BASE_URL}/barcode

• GraphViz: {BASE_URL}/graphviz

• Text-to-Chart: {BASE_URL}/natural

• Watermarks: {BASE_URL}/watermark

Setting QUICKCHART_API_BASE_URL will configure these endpoints:

• Tables: {API_BASE_URL}/v1/table

Tool Disable Settings: To disable specific tools, set these environment variables to false:

• QUICKCHART_ENABLE_CHART: Chart.js chart tool

• QUICKCHART_ENABLE_APEXCHARTS: ApexCharts tool

• QUICKCHART_ENABLE_GOOGLECHARTS: Google Charts tool

• QUICKCHART_ENABLE_TEXTCHART: Text-to-chart tool

• QUICKCHART_ENABLE_SPARKLINE: Sparkline tool

• QUICKCHART_ENABLE_GRAPHVIZ: GraphViz tool

• QUICKCHART_ENABLE_WORDCLOUD: Word cloud tool

• QUICKCHART_ENABLE_BARCODE: Barcode tool

• QUICKCHART_ENABLE_QRCODE: QR code tool

• QUICKCHART_ENABLE_TABLE: Table tool

• QUICKCHART_ENABLE_WATERMARK: Watermark tool

• QUICKCHART_ENABLE_HELP: Visualization tool help

File Management:

• QUICKCHART_DEFAULT_OUTPUT_DIR: Default directory for saving files (absolute path, default: Desktop in home directory)

Default Output Directory Examples:

Tools

create-chart-using-chartjs

Create charts using Chart.js and QuickChart.io - get chart image URL or save chart image to file

Documentation: QuickChart.io Chart API

• Input: Action (get_url/save_file), outputPath, dimensions (integers), format options, encoding method, and Chart.js configuration object

• Output: Chart URL or confirmation message with saved file path

Supported Chart Types:

• bar: Bar charts for comparing values across categories

• line: Line charts for showing trends over time

• pie: Pie charts for showing proportions and percentages

• doughnut: Doughnut charts (pie chart with hollow center)

• radar: Radar charts for comparing multiple variables

• polarArea: Polar area charts for cyclical data visualization

• scatter: Scatter plots for correlation analysis

• bubble: Bubble charts for three-dimensional data relationships

• area: Area charts for showing cumulative values over time

• mixed: Mixed charts combining multiple chart types

Prompt Examples:

• Sales Reports: "Create a bar chart showing monthly sales data"

• Performance Metrics: "Generate a gauge chart showing our 85% performance score"

• Trend Analysis: "Show quarterly revenue growth as a line chart"

• Data Comparison: "Compare product performance across regions using a pie chart"

• Statistical Analysis: "Create a scatter plot to show the relationship between price and sales"

Usage Examples for AI:

create-chart-using-apexcharts

Create charts using ApexCharts library - get chart image URL or save chart image to file

Documentation: ApexCharts Image Rendering

• Input: Action (get_url/save_file), outputPath, ApexCharts configuration, dimensions, and version options

• Output: ApexCharts URL or confirmation message with saved file path

Supported Chart Types:

• line: Line charts for depicting trends and behaviors over time

• area: Area charts for showing cumulative data trends

• bar: Bar charts for categorical data comparison

• column: Column charts for vertical data comparison

• pie: Pie charts for proportion visualization

• donut: Donut charts for enhanced proportion display

• scatter: Scatter plots for correlation analysis

• bubble: Bubble charts for multi-dimensional data

• candlestick: Candlestick charts for financial data

• boxplot: Box plots for statistical data distribution

• heatmap: Heat maps for matrix data visualization

• treemap: Tree maps for hierarchical data

• radar: Radar charts for multi-variable comparison

• radialbar: Radial bar charts and circular gauges

• rangearea: Range area charts for data ranges

• rangebar: Range bar charts for time periods

• funnel: Funnel charts for process visualization

Prompt Examples:

• Financial Dashboards: "Create a candlestick chart for stock prices"

• Interactive Reports: "Generate a multi-series area chart with zoom functionality"

• Time Series Analysis: "Show real-time data with datetime axis charts"

Usage Examples for AI:

create-chart-using-googlecharts

Create charts using Google Charts library - get chart image URL or save chart image to file

Documentation: Google Charts Image Server

• Input: Action (get_url/save_file), outputPath, JavaScript drawing code, packages, dimensions, and API keys

• Output: Google Charts URL or confirmation message with saved file path

Supported Chart Types:

• bar: Bar charts for category data comparison

• column: Column charts for vertical data comparison

• line: Line charts for trend visualization

• area: Area charts and stepped area charts

• pie: Pie charts for proportion display

• donut: Donut charts for enhanced proportion visualization

• scatter: Scatter charts for correlation analysis

• bubble: Bubble charts for multi-dimensional data

• combo: Combo charts combining multiple chart types

• gauge: Gauge charts for measurement and target values

• timeline: Timeline charts for time-series events

• gantt: Gantt charts for project management

• geochart: Geographic charts and world maps

• treemap: Tree map charts for hierarchical data

• sankey: Sankey diagrams for flow visualization

• candlestick: Candlestick charts for financial data

• histogram: Histograms for data distribution

• calendar: Calendar charts for date-based data

• org: Organizational charts for hierarchy display

• table: Table charts for structured data display

• waterfall: Waterfall charts for cumulative effects

• annotation: Annotation charts for detailed analysis

Prompt Examples:

• Geographic Data: "Create a world map showing sales by country"

• Organizational Charts: "Generate a company hierarchy diagram"

• Timeline Visualizations: "Show project milestones on a timeline chart"

Usage Examples for AI:

create-chart-using-natural-language

Generate charts from natural language descriptions - get chart image URL or save chart image to file

Documentation: Text to Chart API

• Input: Action (get_url/save_file), outputPath, natural language description, data values, and chart options

• Output: AI-generated chart URL or confirmation message with saved file path

Main Features:

• Natural Language Analysis: Understands descriptions like "blue line chart showing monthly sales"

• Automatic Chart Selection: Determines optimal chart type automatically

• Data Integration: Automatic processing of CSV format data

• Style Application: Automatic optimization of colors, fonts, and layout

Prompt Examples:

• Quick Prototyping: "Show monthly revenue growth as a blue line chart"

• Data Exploration: "Create a chart that best represents this sales data"

• Automated Reporting: "Generate appropriate visualization from CSV data"

Usage Examples for AI:

create-sparkline-using-chartjs

Create compact sparkline charts - get sparkline image URL or save sparkline image to file

Documentation: Sparkline API

• Input: Action (get_url/save_file), outputPath, Chart.js configuration, dimensions, and display options

• Output: Sparkline URL or confirmation message with saved file path

Supported Chart Types:

• line: Single line sparklines for trend visualization

• multiline: Multiple line sparklines for comparison

Key Features:

• Compact Design: Small charts embeddable in dashboards and reports

• Customizable Styling: Adjustable colors, line thickness, and point styles

• Fill Options: Optional area fill under lines

• Line Properties: Configurable tension, dash patterns, and point radius

• Multiple Series: Support for multiple data series in one sparkline

Prompt Examples:

• Dashboard Widgets: "Generate small trend indicators for KPI dashboard"

• Inline Metrics: "Create mini charts for email reports"

• Mobile Displays: "Show compact data trends for mobile apps"

Usage Examples for AI:

create-diagram-using-graphviz

Create graph diagrams using GraphViz - get diagram image URL or save diagram image to file

Documentation: GraphViz API

• Input: Action (get_url/save_file), outputPath, DOT graph description, layout algorithm, format, and dimensions

• Output: GraphViz diagram URL or confirmation message with saved file path

What You Can Create:

• Flowcharts: Step-by-step process diagrams with decision points

• Organizational Charts: Company hierarchy and reporting structures

• Network Diagrams: System architecture and infrastructure maps

• Decision Trees: Logic flow and decision-making processes

• ER Diagrams: Database schema and relationships

• State Machines: System state transitions and workflows

• Mind Maps: Concept mapping and brainstorming diagrams

• Dependency Graphs: Project dependencies and task relationships

• System Architecture: Software component interactions

• Data Flow Diagrams: Information flow through systems

Prompt Examples:

• Workflow Documentation: "Generate a flowchart showing our approval process"

• System Architecture: "Create a network diagram of our infrastructure"

• Decision Trees: "Map out the customer onboarding decision flow"

Supported Layout Algorithms:

• dot: Hierarchical graphs (flowcharts, org charts)

• neato: Undirected graphs (network diagrams)

• fdp: Force-directed model layouts

• circo: Circular layouts (cycle diagrams)

• twopi: Radial layouts (hub-and-spoke diagrams)

Prompt Examples:

• Workflow Documentation: "Generate a flowchart showing our approval process"

• System Architecture: "Create a network diagram of our infrastructure"

• Decision Trees: "Map out the customer onboarding decision flow"

Usage Examples for AI:

create-wordcloud

Create word cloud visualizations - get word cloud image URL or save word cloud image to file

Documentation: Word Cloud API

• Input: Action (get_url/save_file), outputPath, text content, fonts, colors, and layout options

• Output: Word cloud URL or confirmation message with saved file path

Prompt Examples:

• Content Analysis: "Create a word cloud from customer feedback"

• Survey Results: "Visualize most common responses in survey data"

• Social Media Analytics: "Show trending keywords from social posts"

Prompt Examples:

• Content Analysis: "Create a word cloud from customer feedback"

• Survey Results: "Visualize most common responses in survey data"

• Social Media Analytics: "Show trending keywords from social posts"

Usage Examples for AI:

create-barcode

Generate barcodes and QR codes - get barcode image URL or save barcode image to file

Documentation: Barcode API

• Input: Action (get_url/save_file), outputPath, barcode type, text data, dimensions, and formatting options

• Output: Barcode URL or confirmation message with saved file path

Supported Barcode Types (100+ formats):

• QR Code: High-density 2D barcode for URLs, text, and data

• Code 128: Versatile 1D barcode for alphanumeric content

• EAN-13/UPC-A: Standard retail product identification

• Data Matrix: Compact 2D barcode for small items

• PDF417: High-capacity 2D barcode for documents

• Aztec: Compact 2D barcode with built-in error correction

What You Can Create:

• Product Management: UPC-A and EAN-13 codes for retail products

• Inventory Management: Code 128 barcodes for warehouse tracking

• Shipping Labels: Generate tracking codes for logistics

• Document Encoding: PDF417 codes for storing large amounts of data

• Asset Tracking: Data Matrix codes for equipment and tools

• Mobile Applications: QR codes for app downloads and links

• Contact Information: QR codes containing vCard data

• Event Tickets: Secure barcodes for entry validation

• Payment Processing: QR codes for mobile payments

• Location Sharing: QR codes with GPS coordinates

• WiFi Access: QR codes for network credentials

• Promotional Campaigns: QR codes linking to special offers

Prompt Examples:

• Inventory Management: "Generate product barcodes for warehouse system"

• Retail Operations: "Create UPC codes for new product lines"

• Asset Tracking: "Generate Code128 barcodes for equipment tracking"

Prompt Examples:

• Inventory Management: "Generate product barcodes for warehouse system"

• Retail Operations: "Create UPC codes for new product lines"

• Asset Tracking: "Generate Code128 barcodes for equipment tracking"

Usage Examples for AI:

create-table

Convert data to table images - get table image URL or save table image to file

Documentation: Table Image API

• Input: Action (get_url/save_file), outputPath, table data structure, column definitions, and styling options

• Output: Table image URL or confirmation message with saved file path

Prompt Examples:

• Financial Reports: "Convert quarterly earnings data into professional table"

• Comparison Charts: "Create feature comparison table for products"

• Summary Reports: "Generate formatted tables for executive presentations"

Prompt Examples:

• Financial Reports: "Convert quarterly earnings data into professional table"

• Comparison Charts: "Create feature comparison table for products"

• Summary Reports: "Generate formatted tables for executive presentations"

Usage Examples for AI:

create-qr-code

Create QR codes with extensive customization options - get QR code image URL or save QR code image to file

Documentation: QR Code API

• Input: Action (get_url/save_file), outputPath, text content, format options, size, colors, error correction level, and advanced customization

• Output: QR code URL or confirmation message with saved file path

What You Can Create:

• Website Links: Direct links to websites, landing pages, and online content

• Contact Information: vCard data for easy contact sharing

• WiFi Access: Network credentials for guest access

• Event Details: Calendar events, meeting information, and RSVP links

• App Downloads: Direct links to app stores and download pages

• Payment Information: Payment links and cryptocurrency addresses

• Location Sharing: GPS coordinates and map links

• Social Media: Profile links and social media connections

• Product Information: Item details, specifications, and reviews

• Marketing Campaigns: Promotional links and special offers

• Business Cards: Digital business card information

• Menu Access: Restaurant menus and ordering systems

• Document Sharing: Links to PDFs, forms, and downloads

• Survey Links: Research questionnaires and feedback forms

Prompt Examples:

• Marketing Campaigns: "Create QR codes linking to product pages"

• Event Management: "Generate QR codes for ticket verification"

• Contact Sharing: "Create QR codes containing business card information"

• WiFi Access: "Generate QR codes for guest network access"

Prompt Examples:

• Marketing Campaigns: "Create QR codes linking to product pages"

• Event Management: "Generate QR codes for ticket verification"

• Contact Sharing: "Create QR codes containing business card information"

• WiFi Access: "Generate QR codes for guest network access"

Usage Examples for AI:

create-watermark

Add watermarks and logos to images - get watermarked image URL or save watermarked image to file

Documentation: Watermark API

• Input: Action (get_url/save_file), outputPath, main image URL, watermark image URL, positioning, and opacity options

• Output: Watermarked image URL or confirmation message with saved file path

Prompt Examples:

• Document Protection: "Add company logo watermark to reports"

• Brand Consistency: "Apply watermarks to all marketing materials"

• Copyright Protection: "Add attribution to shared visualizations"

Prompt Examples:

• Document Protection: "Add company logo watermark to reports"

• Brand Consistency: "Apply watermarks to all marketing materials"

• Copyright Protection: "Add attribution to shared visualizations"

Usage Examples for AI:

get-visualization-tool-help

Get detailed usage information and examples for all available chart, diagram, and QR code tools

• Input: No parameters required

• Output: Complete documentation for all visualization tools in JSON format

Usage Examples for AI:

This tool provides comprehensive information about all available tools including:

• Supported chart types and features

• Prompt examples for each tool

• Detailed usage examples with JSON configuration

• Official documentation links

• What you can create with each tool

• Additional web resources for AI to search

Development

1. Clone this repository

   git clone https://github.com/TakanariShimbo/quickchart-mcp-server.git cd quickchart-mcp-server

2. Install dependencies

   npm ci

3. Build the project

   npm run build

4. Test with MCP Inspector (optional)

   npx @modelcontextprotocol/inspector node dist/index.js

Publishing to NPM

This project includes automated NPM publishing via GitHub Actions. To set up publishing:

1. Create NPM Access Token

1. Log in to NPM (create account if needed)

   npm login

2. Create Access Token

   • Go to https://www.npmjs.com/settings/tokens

   • Click "Generate New Token"

   • Select "Automation" (for CI/CD usage)

   • Copy the generated token (starts with npm_)

2. Add Token to GitHub Repository

1. Navigate to Repository Settings

   • Go to your GitHub repository

   • Click "Settings" tab

   • Go to "Secrets and variables" → "Actions"

2. Add NPM Token

   • Click "New repository secret"

   • Name: NPM_TOKEN

   • Value: Paste your NPM token from step 1

   • Click "Add secret"

3. Setup GitHub Personal Access Token (for release script)

The release script needs to push to GitHub, so you'll need a GitHub token:

1. Create GitHub Personal Access Token

   • Go to https://github.com/settings/tokens

   • Click "Generate new token" → "Generate new token (classic)"

   • Set expiration (recommended: 90 days or custom)

   • Select scopes:

     • ✅ repo (Full control of private repositories)

   • Click "Generate token"

   • Copy the generated token (starts with ghp_)

2. Configure Git with Token

   # Option 1: Use GitHub CLI (recommended) gh auth login # Option 2: Configure git to use token git config --global credential.helper store # Then when prompted for password, use your token instead

4. Release New Version

Use the included release script to automatically version, tag, and trigger publishing:

5. Verify Publication

1. Check GitHub Actions

   • Go to "Actions" tab in your repository

   • Verify the "Publish to npm" workflow completed successfully

2. Verify NPM Package

   • Visit: https://www.npmjs.com/package/@takanarishimbo/quickchart-mcp-server

   • Or run: npm view @takanarishimbo/quickchart-mcp-server

Release Process Flow

1. release.sh script updates version in all files

2. Creates git commit and tag

3. Pushes to GitHub

4. GitHub Actions workflow triggers on new tag

5. Workflow builds project and publishes to NPM

6. Package becomes available globally via npm install

Creating Desktop Extension (DXT)

Desktop Extensions (.dxt) enable one-click installation of MCP servers in Claude Desktop. To create a DXT file for this server:

1. Initialize DXT Manifest

Run this command in the project root directory:

2. Create DXT Package

This creates a .dxt file that users can install in Claude Desktop with a single click.

3. User Configuration

The DXT file includes user-configurable options that allow users to:

• URL Configuration: Set custom QuickChart instance URLs

• Tool Management: Enable/disable specific visualization tools

• Easy Installation: No manual JSON configuration required

Users can modify these settings during installation or later through Claude Desktop's extension management interface.

Project Structure

Resources

Official Documentation

QuickChart API

• QuickChart Main Documentation - Comprehensive guide to all QuickChart APIs

Chart Libraries

• Chart.js Documentation - Popular JavaScript charting library

• ApexCharts Documentation - Modern charting library

• Google Charts Documentation - Google's visualization API

• GraphViz Documentation - Graph visualization software

MCP Protocol

• Model Context Protocol - Official MCP specification

• MCP SDK Documentation - TypeScript SDK for MCP

• Claude Desktop MCP Guide - Using MCP with Claude

• MCP Inspector - Debug and test MCP servers

Tutorials & Examples

Getting Started

• QuickChart Gallery - Chart examples and inspiration

• Chart.js Examples - Interactive chart examples

• ApexCharts Demos - Live chart demonstrations

• GraphViz Gallery - Graph visualization examples

Advanced Usage

• Chart.js Configuration - Detailed configuration options

• DOT Language Guide - GraphViz syntax reference

• QR Code Best Practices - QR code design guidelines

• Data Visualization Guidelines - Choosing the right chart type

Development Tools

• Chart.js Chart Builder - Interactive chart builder

• QR Code Generator - Online QR code testing

• GraphViz Online - Test DOT syntax online

License

MIT - See LICENSE file for details