Which sizes does the stat-card template support?

1080×1080, 1200×630. The default is 1080×1080; pass width and height to pick another supported size.

Which parameters are required?

value and label. Every other parameter is optional and has a rendering default.

Does rendering the same parameters twice cost twice?

No. The same template version, parameters, brand kit version, format, and size produce the same cache key, so a repeat request is served from cache instead of rendering again. Billing is not connected yet in early access.

Template · stat-card@1

Stat card template

The stat-card template renders one big number with its label, change, and period, for reports and year-in-review posts. Send JSON parameters through the remote MCP server, POST /v1/renders, or a signed /i/stat-card.png URL; the default size is 1080×1080.

Sizes: 1080×1080 · 1200×630
Formats: PNG · JPEG · WebP
Version: 1.0.0

VectorFast Render is in early access. Billing is not connected yet, and API keys are issued to waitlist members as access opens. Join the waitlist

Preview

Rendered by VectorFast Render from this template's English and Chinese example parameters, through the same signed URLs your own pages would use.

Preview images are signed on the server and are not available in this environment.

Ask your agent

Paste the prompt into Claude, Cursor, or another agent connected to the VectorFast Render MCP server. The JSON is the render tool call it should turn into.

Prompt

Turn this into a square stat card for our Q3 investor update: 1.2M images rendered in Q3, up 38% on Q2. Add a footnote that it counts API and MCP renders.

MCP render call

{
  "name": "render",
  "arguments": {
    "template": "stat-card",
    "params": {
      "value": "1.2M",
      "label": "images rendered",
      "delta": "+38%",
      "period": "Q3 2026",
      "footnote": "Counts API and MCP renders; cache hits excluded."
    },
    "width": 1080,
    "height": 1080
  }
}

Connect Claude to VectorFast Render

Parameters

Read from the schema that POST /v1/renders validates. String values are trimmed; anything over a limit is rejected with invalid_params.

Stat card template parameters
Param	Type	Required	Limit	Notes
value	string	Yes	≤ 12 chars	Pre-formatted number such as "1.2M" or "98%"; the template does not format numbers.
label	string	Yes	≤ 80 chars	What the number counts.
delta	string	No	≤ 16 chars	Change such as "+38%".
period	string	No	≤ 30 chars	Time window such as "Q3 2026".
footnote	string	No	≤ 120 chars	Source or definition in small print.

Render it from code

The REST call needs an API key in Authorization: Bearer. Its response includes a signed url you can store and reuse as an og:image. The Node.js function shows the signing algorithm the server verifies; per-key signing secrets are not issued yet in early access, and the secret must stay on your server.

curl · POST /v1/renders

curl https://vectorfast.ai/v1/renders \
  -H "Authorization: Bearer $VECTORFAST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "template": "stat-card@1",
  "format": "png",
  "width": 1080,
  "height": 1080,
  "params": {
    "value": "1.2M",
    "label": "images rendered",
    "delta": "+38%",
    "period": "Q3 2026",
    "footnote": "Counts API and MCP renders; cache hits excluded."
  }
}'

Node.js · signed URL (server-side only)

import { createHmac } from 'node:crypto'

// Server-side only. Never ship the signing secret to a browser, a mobile app or a repo.
const SIGNING_SECRET = process.env.VECTORFAST_SIGNING_SECRET

function encode(value) {
  return encodeURIComponent(value).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
}

export function signRenderUrl({ template, format = 'png', params, brand, width, height, keyId }, secret = SIGNING_SECRET) {
  const query = {}
  for (const [key, value] of Object.entries(params)) {
    if (value === undefined || value === null)
      continue
    query[key] = typeof value === 'string' ? value : Array.isArray(value) ? JSON.stringify(value) : String(value)
  }
  if (brand) query.brand = brand
  if (keyId) query.k = keyId
  if (width) query.w = String(width)
  if (height) query.h = String(height)

  const canonical = Object.entries(query)
    .map(([key, value]) => [encode(key), encode(value)])
    .sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0))
    .map(([key, value]) => key + '=' + value)
    .join('&')
  const path = '/i/' + template + '.' + format
  const sig = createHmac('sha256', secret).update(path + '?' + canonical).digest('base64url')
  return 'https://vectorfast.ai' + path + '?' + (canonical ? canonical + '&' : '') + 'sig=' + sig
}

const url = signRenderUrl({
  template: 'stat-card',
  format: 'png',
  width: 1080,
  height: 1080,
  params: {
    "value": "98%",
    "label": "of renders served from cache",
    "delta": "+4 pts",
    "period": "October 2026",
    "footnote": "Edge and R2 hits over all signed-URL requests."
  },
})

How signed URLs work

Stat card template FAQ

Which sizes does the stat-card template support?: 1080×1080, 1200×630. The default is 1080×1080; pass width and height to pick another supported size.
Which parameters are required?: value and label. Every other parameter is optional and has a rendering default.
Does rendering the same parameters twice cost twice?: No. The same template version, parameters, brand kit version, format, and size produce the same cache key, so a repeat request is served from cache instead of rendering again. Billing is not connected yet in early access.

Updated 2026-10-30 · Markdown version