# Quickstart

> Create a VectorFast Render API key, render your first image with POST /v1/renders, and reuse the signed image URL in og:image or your product.

Canonical URL: https://vectorfast.ai/render/docs/quickstart
Markdown URL: https://vectorfast.ai/render/docs/quickstart.md
Last modified: 2026-10-30

**Short answer:** create an API key, send one `POST /v1/renders` request with a template id and parameters, and store the signed `url` from the response. That URL serves the same image forever and is safe to put in an `og:image` tag.

<Callout title="Early access">
  API keys are issued to waitlist members as access opens, and billing is not connected yet. Everything below works the same once billing starts, except that new renders will spend credits.
</Callout>

## 1. Create an API key [#1-create-an-api-key]

Sign in at vectorfast.ai with your early-access account. A key management screen is not built yet; until it ships, keys are created by the account endpoint `POST /api/render/keys`, which uses your signed-in browser session rather than an API key. From the browser console on a vectorfast.ai page:

```js
await fetch('/api/render/keys', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Local development' }),
}).then(response => response.json())
```

The response contains `secret`, the full key (`vf_live_` followed by 44 characters). It is shown once. Store it in an environment variable on your server:

```bash
export VECTORFAST_API_KEY="vf_live_…"
```

See [Authentication](/render/docs/authentication) for revoking keys and rate limits.

## 2. Render an image [#2-render-an-image]

```bash
curl https://vectorfast.ai/v1/renders \
  -H "Authorization: Bearer $VECTORFAST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "launch-post@1",
    "format": "png",
    "width": 1200,
    "height": 630,
    "params": {
      "title": "Scheduled renders are live",
      "subtitle": "On-brand images now render from CI on every release.",
      "badge": "New"
    }
  }'
```

The response:

```json
{
  "id": "rnd_…",
  "url": "https://vectorfast.ai/i/launch-post.png?badge=New&brand=default&h=630&k=…&subtitle=…&title=…&w=1200&sig=…",
  "cache_key": "…",
  "cached": false,
  "credits_charged": 0,
  "width": 1200,
  "height": 630,
  "scale": 1,
  "format": "png",
  "render_ms": 42,
  "template_version": "launch-post@1.0.0"
}
```

Send the same request again and you get `"cached": true` and `"render_ms": 0`: nothing was rendered the second time. `render_ms` depends on the template and on whether fonts were already cached.

Leave out `brand_kit` and the render uses your oldest brand kit, or the built-in VectorFast kit if you have none. To render with a specific kit, pass its id (`"brand_kit": "bk_…"`); see [Brand kits and logos](/render/docs/brand-kits).

## 3. Reuse the signed URL [#3-reuse-the-signed-url]

`url` is a signed `GET /i/{template}.{format}` URL. Anyone holding it can load the image, it never expires, and it is served with `Cache-Control: public, max-age=31536000, immutable`. Store it next to the record it belongs to and use it directly:

```html
<meta property="og:image" content="https://vectorfast.ai/i/launch-post.png?…&sig=…" />
```

If you want `<img>` tags to point at VectorFast without a server round trip per page, you can also build signed URLs yourself once per-key signing secrets are available; see [Signed URLs](/render/docs/signed-urls).

## 4. Or let an agent do it [#4-or-let-an-agent-do-it]

Connect the MCP server once and ask in plain language. In Claude Code:

```bash
claude mcp add --transport http vectorfast-render https://vectorfast.ai/mcp \
  --header "Authorization: Bearer $VECTORFAST_API_KEY"
```

Then ask: &#x2A;"Make a launch image for our scheduled renders release with a New badge."* See [MCP](/render/docs/mcp) for Claude Desktop, Cursor, and ChatGPT.

## Next [#next]

* Browse the [templates](/render/templates) and their parameters.
* Pick sizes and formats in the [REST API reference](/render/docs/rest-api).
* Add OG images to a framework: [Next.js](/render/guides/nextjs-og-image), [Astro](/render/guides/astro-og-image).