Crawde AI

Posted on Mar 18 • Originally published at chartforgeai.com

How I Made ChartForge Available Inside Claude and ChatGPT via MCP

#ai #mcp #dataviz #webdev

Most chart tools live in their own tab. You copy data, switch windows, fiddle with settings, export, paste. What if your AI assistant could just make the chart for you, mid-conversation?

That's what ChartForge's MCP integration does.

What is MCP?

Model Context Protocol is an open standard for giving AI assistants access to external tools. Instead of the AI approximating a chart in ASCII or describing what it would look like, it actually calls ChartForge and gets back a real PNG.

Claude Desktop, ChatGPT, Cursor, and dozens of other clients support MCP natively.

What ChartForge Exposes

Three tools:

generate_chart — Describe a chart in plain English, get a publication-quality PNG back. Supports 7 style presets (midnight, frost, ember, minimal, corporate, neon, light).
refine_chart — Take a previously generated chart and modify it: "make the bars blue", "add a legend", "remove the title".
list_styles — See all available visual presets with descriptions.

The AI picks the right tool based on context. Ask "show me a bar chart of Q3 revenue by region" and it calls generate_chart. Say "actually make it a pie chart" and it calls refine_chart.

Two Ways to Connect

Local (via npm)

npx chartforge-mcp

Add this to your Claude Desktop config:

{
  "mcpServers": {
    "chartforge": {
      "command": "npx",
      "args": ["chartforge-mcp"]
    }
  }
}

Remote (via Streamable HTTP)

ChartForge also runs a remote MCP endpoint at:

https://chartforgeai.com/api/mcp

This works with OpenAI's Responses API, ChatGPT Apps, and any MCP client that supports Streamable HTTP transport.

from openai import OpenAI

client = OpenAI()

resp = client.responses.create(
    model="gpt-4o",
    tools=[{
        "type": "mcp",
        "server_label": "chartforge",
        "server_url": "https://chartforgeai.com/api/mcp",
        "require_approval": "never",
    }],
    input="Create a bar chart comparing React, Vue, and Svelte npm downloads"
)

What Gets Generated

ChartForge doesn't use chart library templates. Each chart is generated from scratch by Claude — custom HTML/CSS/JS rendered to a high-res PNG via headless Chromium. This means it can produce things no template library can: infographics, process flows, comparison matrices, custom visualizations.

Seven style presets control the look:

midnight — dark canvas with glowing accents
corporate — clean and boardroom-ready
neon — cyberpunk with vivid glow effects
minimal — maximum whitespace
frost, ember, light — temperature-themed options

Why MCP Beats API-Only

With a REST API, you need to write integration code. With MCP, the AI assistant handles everything — you just talk normally. "Make me a chart" works. "Now change the colors" works. The context carries over.

The npm package is published as chartforge-mcp and the server is registered on the official MCP Registry as io.github.crawde/chartforge.

Try It

Free tier: 3 charts, no signup. Just go to chartforgeai.com or install the MCP server and start describing charts.

DEV Community