Use ChartQuery as an MCP server in your AI coding assistant

AI coding assistants are good at writing code. They are bad at producing images. Ask Claude or Cursor to generate a chart and you will get a code snippet that needs a runtime, dependencies, and a rendering environment. Ask it to create a Mermaid diagram as PNG and you will end up with a text block you still need to render yourself.

MCP fixes this. With a single config file, your AI assistant can call ChartQuery directly and get back rendered images: bar charts, sequence diagrams, QR codes, barcodes, labels. No intermediate code, no extra dependencies, no copy-pasting into a playground.

This post covers what MCP is, how to set it up with ChartQuery, and why it changes the way you work with visual assets in AI-assisted workflows.

What is MCP?

The Model Context Protocol is an open standard that lets AI assistants call external tools during a conversation. Instead of the AI generating code that you then run, it calls an API directly and uses the result in its response.

Think of it as giving your AI assistant access to real tools, not just the ability to write instructions for you.

MCP works over HTTP. The AI client (Claude Code, Cursor, Gemini CLI, etc.) sends a tool call to an MCP server. The server executes the operation and returns the result. For ChartQuery, that means the AI sends a chart configuration and gets back an image URL or rendered image.

Why use ChartQuery through MCP?

The AI generates charts, not chart code

Without MCP, asking an AI for a chart gives you something like this:

const chart = new Chart(ctx, {
  type: 'bar',
  data: { labels: ['Q1', 'Q2', 'Q3'], datasets: [{ data: [10, 20, 15] }] }
});

You still need to run it, render it, and export the image. With ChartQuery as an MCP tool, the AI calls the API directly and the chart image appears in the conversation. No setup, no runtime.

Consistent, production-quality output

Client-side chart libraries render differently across browsers, OS versions, and screen sizes. ChartQuery renders server-side with fixed, deterministic output. The same config produces the same image every time, regardless of where the AI runs.

This matters when you are generating charts for documentation, reports, or dashboards. You want pixel-consistent results, not "it looked fine on my machine."

Every visual type in one tool

ChartQuery is not just charts. A single MCP connection gives your AI access to:

• 10 chart types: bar, line, area, pie, doughnut, radar, polar area, bubble, scatter, mixed
• 28 diagram languages: Mermaid, PlantUML, GraphViz, D2, and 24 others
• Barcodes: EAN-13, Code 128, UPC-A, ITF-14, and 20+ formats
• QR codes: with gradients, custom corners, and multiple dot styles
• Labels: thermal label previews for TSC, ZPL, ESC/POS, and 6 other printer languages

One API key, one config file. Your AI can generate any of these without switching tools.

No rendering infrastructure

When you ask an AI to generate a chart with a client library, someone needs to run that code. That usually means a Node.js environment, headless Chrome, or a canvas dependency. With ChartQuery, the rendering happens on our servers. The AI sends a JSON payload, gets an image back. Nothing to install, nothing to maintain.

Setup

The MCP endpoint for ChartQuery is:

https://mcp.chartquery.com/

You need an API key from app.chartquery.com. The key is passed via the x-api-key header.

Cursor

Go to Settings > MCP, add an HTTP server, or create a mcp.json file in your project root:

{
  "mcpServers": {
    "chartquery": {
      "url": "https://mcp.chartquery.com/",
      "headers": {
        "x-api-key": "YOUR_API_KEY"
      }
    }
  }
}

Once configured, Cursor can call ChartQuery tools directly when you ask it to generate visual assets.

Claude Code

Use the CLI to add ChartQuery as an MCP server:

claude mcp add --transport http chartquery https://mcp.chartquery.com/ \
  --header "x-api-key: YOUR_API_KEY"

Claude Code will now have access to all ChartQuery endpoints as callable tools.

Gemini CLI

Point the client at the MCP endpoint and pass your API key as documented in the Gemini CLI MCP docs. The same https://mcp.chartquery.com/ URL works with any MCP-compatible client.

OpenAI Developer Mode

Wire the MCP tools to https://mcp.chartquery.com/ following the OpenAI Developer Mode guide. The setup is similar: provide the URL and your API key.

What you can do with it

Once connected, you can ask your AI assistant to generate visuals directly. Some examples of what works:

"Generate a bar chart comparing Q1 revenue across three product lines"

The AI calls /v1/chart with the appropriate config and returns the rendered PNG in the conversation. If you provide the data, it uses your exact numbers.

"Create a Mermaid sequence diagram showing the OAuth 2.0 authorization code flow"

The AI calls /v1/diagram with Mermaid syntax and returns an SVG image.

"Generate an EAN-13 barcode for product 4006381333931"

The AI calls /v1/barcode with the product number and returns a scannable barcode image.

"Create a QR code linking to our docs, with rounded dots and an indigo-to-orange gradient"

The AI calls /v1/qrcode with styling parameters and returns a branded QR code.

All of these happen in one conversation, with one tool connection, using one API key.

Billing and limits

MCP calls use the same credit system as regular API calls. A chart or diagram render costs 5 credits. AI-powered generation (where you describe what you want in English) costs 10 credits. Barcodes, QR codes, and labels cost 5 credits each.

Rate limits match your subscription plan. The Starter plan (29 EUR/month) gives you 500,000 credits and a 10 req/s limit. Pro (99 EUR/month) gives 2,000,000 credits at 50 req/s.

There is no separate MCP pricing. If you already have a ChartQuery API key, it works with MCP at no additional cost.

Security

Never commit your API key to version control. Use environment variables or a project-specific config file that is excluded from git. The mcp.json example above uses a placeholder for this reason.

All MCP traffic goes over HTTPS. The server uses Streamable HTTP transport, which means it works through firewalls and proxies the same way any HTTPS request does.

When to use it

MCP with ChartQuery is useful when you are:

• Writing documentation and need inline charts or diagrams
• Building reports and want to preview charts before committing to a config
• Prototyping dashboards and iterating on chart designs with your AI
• Generating visual assets (barcodes, QR codes) as part of a development workflow
• Creating architecture diagrams directly from conversation

It replaces the loop of "AI writes code, you run code, you check output, you adjust, repeat" with "AI generates image, you see it, done."

Try it

1. Get an API key at app.chartquery.com/register
2. Add ChartQuery as an MCP server using the config above
3. Ask your AI assistant to generate a chart

Full MCP documentation is available at docs.chartquery.com/mcp.