Chart-JS-Generator-MCP

An ASP.NET Core server that renders Chart.js charts to PNG images using a headless Chromium browser. It exposes chart generation both as a REST API and as an MCP (Model Context Protocol) server, making it usable directly from MCP-compatible AI clients.

How it works

Chart data is accepted as a request, converted to Chart.js JavaScript via the ChartJSCore .NET library, injected into a minimal HTML page, and rendered in a headless Chromium browser via PuppeteerSharp. The canvas is captured and returned as a data:image/png;base64,... string.

MCP Tools

Both tools accept colors as hex (#36A2EB) or rgba (rgba(54, 162, 235, 0.5)) strings and return a base64-encoded PNG.

REST API

POST /api/charts/bar
POST /api/charts/line

Both endpoints accept a JSON body and return { "base64Image": "data:image/png;base64,..." }.

Bar chart request:

{
  "labels": ["Jan", "Feb", "Mar"],
  "datasets": [
    {
      "label": "Sales",
      "data": [10, 20, 30],
      "backgroundColor": "#36A2EB",
      "borderColor": "#2980B9",
      "borderWidth": 1
    }
  ],
  "title": "Monthly Sales",
  "width": 800,
  "height": 400
}

Line chart request:

{
  "labels": ["Jan", "Feb", "Mar"],
  "datasets": [
    {
      "label": "Revenue",
      "data": [65, 59, 80],
      "borderColor": "#36A2EB",
      "backgroundColor": "rgba(54, 162, 235, 0.2)",
      "fill": false,
      "tension": 0.1,
      "borderWidth": 2,
      "pointRadius": 3
    }
  ],
  "title": "Revenue Trend",
  "width": 800,
  "height": 400
}

Running locally

Requires .NET 10 SDK. On first run, Chromium is downloaded automatically.

dotnet run --project chart-server.csproj

The server starts on the default ASP.NET Core port (check console output). The MCP endpoint is mounted at /mcp.

Running with Docker

docker build -t chart-server .
docker run -p 8080:8080 chart-server

The Docker image installs system Chromium and sets PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium. The server listens on port 8080.

Environment variables

Tests

dotnet test chart-server.Tests/chart-server.Tests.csproj

Tests launch a real Chromium process. A shared ChartJsEngineFixture ensures only one browser instance is used across the test run.

Dependencies

• ModelContextProtocol / ModelContextProtocol.AspNetCore — MCP server SDK
• ChartJSCore — Chart.js model and code generation
• PuppeteerSharp — headless Chromium automation