npx mcpbar@latest install datafe/quick-chart-mcp -c claude

npx mcpbar@latest edit -c claude

{
  "mcpServers": {
    "Quick Chart Server": {
      "command": "npx",
      "args": [
        "-y",
        "quick-chart-mcp"
      ],
      "env": {
        "QUICK_CHART_DRAW_URL": "${input:quick_chart_draw_url}"
      }
    }
  }
}

Quick Chart MCP Server

A Model Context Protocol (MCP) server that provides chart tools, allowing it to interact with the quick chart through a standardized interface. This implementation is based on the chart definition and enables users can open quick chart pages seamlessly.

Overview

This MCP server tools:

• Interact with Quick Chart

The server implements the Model Context Protocol specification to standardize chart interactions for AI agents.

Prerequisites

• Node.js (v16 or higher)
• pnpm (recommended), npm, or yarn

Installation

Installing via Smithery

To install quick-chart-mcp for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @datafe/quick-chart-mcp --client claude

Option 1: Install from npm (recommend for clients like Cursor/Cline)

# Install globally
npm install -g quick-chart-mcp

# Or install locally in your project
npm install quick-chart-mcp

Option 2: Build from Source (for developers)

1. Clone this repository:

git clone https://github.com/datafe/quick-chart-mcp
cd quick-chart-mcp

2. Install dependencies (pnpm is recommended, npm is supported):

pnpm install

3. Build the project:

pnpm run build

4. Development the project (by @modelcontextprotocol/inspector):

pnpm run dev

open http://localhost:5173

Configuration

MCP Configs

{
  "mcpServers": {
    "quick-chart-mcp": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "command": "npx",
      "args": [
        "[email protected]"
      ],
      "transportType": "stdio"
    }
  }
}

Environment Setup

Create a .env file with your credentials:

# Quick Chart Configuration
NODE_ENV=optional_development_or_product
QUICK_CHART_DRAW_URL=optional_quick_chart_draw_url
NEED_INSTALL_QUICK_CHART=optional_true_or_false

Project Structure

quick-chart-mcp/
├── src/
│   ├── index.ts          # Main entry point
├── package.json
└── tsconfig.json

Available Tools

The MCP server provides the following Quick Chart tools:

• GetChartImgLink - Retrieve chart image link by parameters.
• InstallQuickChart - Install quick chart service locally.

Security Considerations

• Use environment variables for sensitive information
• Regularly monitor and audit AI agent activities

Troubleshooting

If you encounter issues:

1. Verify the build was successful

Dependencies

image APIs.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.