Area chart widget for MCP Apps

#When to use an area chart

An area chart is for one value that changes over time, when the shape of the change matters as much as the last number. It is the widget for "how is X trending?":

• Product metrics: active users, sign-ups or sessions per day, week or month.
• Revenue and sales over time, from your billing or CRM tool.
• Traffic and performance: visits per day, response time per hour, errors per release.
• Anything a tool returns as a dated series: stock levels, support volume, energy use.

It draws a single series. To compare categories, use the bar chart; to put several headline numbers with their change side by side, use metrics.

#How the model fills the chart

The schema is short on purpose. title and points are required, subtitle and unit are optional, and each point is a label and a value. There must be at least two points, because a trend needs a start and an end.

Labels are strings, so the model can send "Mon", "W12", "Sep" or a full date, whatever reads best on the axis. Points go oldest first: the header compares the last value with the first one, so the period your tool returns decides what "change" means. If people will ask "since when?", put the period in the subtitle (the schema has room for it) or add that hint to the field description so the model fills it.

unit appears next to the latest value, for things like "€", "ms" or "users".

#What it does in the chat

There is no chart library behind it. Two Liquid filters, svg_line and svg_area, turn the values into SVG paths when the template renders, so the widget is self-contained, needs no CSP domains, and shows up the moment the host loads it. The line then draws itself from left to right, the gradient area fades in under it, and a dot lands on the last point. People who prefer reduced motion get the finished chart without animation.

The header shows the latest value in large type and the percentage change against the first point, in the design's positive color when it rose and its negative color when it fell. The baseline stays at zero for positive series, so a small wobble is not drawn as a cliff.

The chart declares no host actions: it is an answer, not a control.

#Make it yours

Each design gives the chart its own character: a single ink line over a whisper of fill in Nordic, a two-color line that glows in Aurora, a flat slab with a black outline and an offset shadow in Brutalist, a printed figure with a red line in Editorial, a glowing tube over an oscilloscope grid in Neon. It also wears the brand-inspired designs and any your organization creates. Markup, styles and schema are editable: add a target line, show the minimum and maximum, or change how the change is computed.

#Take it to your server

Link the published chart from your MCP server so it follows every change you publish, or download the HTML and manifest. Add UI to your MCP server shows both, and theming MCP Apps explains how the colors follow light and dark mode.

{
  "title": "Active users",
  "subtitle": "Per week",
  "points": [
    {
      "label": "W1",
      "value": 1240
    },
    {
      "label": "W2",
      "value": 1385
    },
    {
      "label": "W3",
      "value": 1310
    },
    {
      "label": "W4",
      "value": 1620
    },
    {
      "label": "W5",
      "value": 1795
    },
    {
      "label": "W6",
      "value": 1710
    },
    {
      "label": "W7",
      "value": 2040
    },
    {
      "label": "W8",
      "value": 2315
    }
  ]
}

{
  "name": "show_area_chart",
  "title": "Area chart",
  "description": "Shows how one value evolves over time as a smooth area chart, with the latest value and its change against the first point. Use it for trends such as revenue, users or traffic per day, week or month.",
  "inputSchema": {
    "type": "object",
    "required": [
      "title",
      "points"
    ],
    "properties": {
      "title": {
        "type": "string"
      },
      "subtitle": {
        "type": "string"
      },
      "unit": {
        "type": "string"
      },
      "points": {
        "type": "array",
        "minItems": 2,
        "items": {
          "type": "object",
          "required": [
            "label",
            "value"
          ],
          "properties": {
            "label": {
              "type": "string"
            },
            "value": {
              "type": "number"
            }
          }
        }
      }
    }
  }
}