Integration

HTML/CSS to Image integration

HTML/CSS to Image rendering API: turn a snippet of HTML and CSS, or a public web page, into a PNG, JPEG, WebP or PDF, create up to twenty five variations of the same layout in one call, download a rendered image at the size and resolution you need, list what has been rendered, delete images and read the account usage. Creating an image returns its address rather than its bytes, and fetching that address is what produces the picture. Requests authenticate with HTTP basic credentials made of a user identifier and an API key.

Connect HTML/CSS to Image How integrations work

Ask it in chat

Say what should happen.
The workflow builds itself.

When this happens, do that in HTML/CSS to Image.Built from the 7 HTML/CSS to Image tools below, on the connection you add once.

Common HTML/CSS to Image use cases

rendering one card per row of a list
auditing what the account has rendered
checking consumption before a bulk render
collecting the picture produced by a render
removing an image that carries personal data
cleaning up a batch of renders after delivery
producing a social preview image from a template
monitoring the monthly total
rendering a chart or a table as a picture
finding an image whose identifier was lost

What you can do with HTML/CSS to Image

Each of these is one operation on one endpoint, available both as a workflow step and as a tool an AI agent can call on its own. Nothing bundles several operations into one action, so what a run did stays readable afterwards.

Most endpoints run on the free plan. A few, mainly the ones that publish on your behalf, need a paid plan.

Image, 6 operations

create_imageCreate imagePOSTRenders HTML and CSS into an image and returns its address.
create_images_batchCreate images batchPOSTRenders several variations of one layout in a single call.
delete_imageDelete imageDELETEDeletes a rendered image from the account.
delete_images_batchDelete images batchDELETEDeletes several rendered images at once.
get_imageGet imageGETDownloads a rendered image, resized or cropped on the way out.
list_imagesList imagesGETLists the images rendered by the account.

Usage, 1 operation

get_usageGet usageGETReads how many images the account has rendered.

Use HTML/CSS to Image from Claude Code, Cursor or Codex

Connect HTML/CSS to Image in LiveContext, create an API key in Settings, then add the LiveContext MCP server to your client. Its HTML/CSS to Image operations become tools the client can call, next to every other integration you connected.

Claude Code

claude mcp add --transport http livecontext https://livecontext.ai/mcp --header "X-API-Key: YOUR_API_KEY"

Codex (~/.codex/config.toml)

[mcp_servers.livecontext]
url = "https://livecontext.ai/mcp"

[mcp_servers.livecontext.http_headers]
"X-API-Key" = "YOUR_API_KEY"

Cursor, Claude Desktop and other JSON configs

{
  "mcpServers": {
    "livecontext": {
      "type": "http",
      "url": "https://livecontext.ai/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Set up the MCP server step by step

How to connect HTML/CSS to Image

Create your workspace
Sign up free. Nothing to install.
Connect HTML/CSS to Image once
Add your HTML/CSS to Image connection in Settings. Every tool from this integration reuses it, and secrets are encrypted at rest and visible only to you.
Describe the job in chat
The workflow builds itself in front of you and picks the endpoints it needs. Drag the steps yourself on the canvas whenever you would rather be explicit.

HTML/CSS to Image integration FAQ

What can you do with the HTML/CSS to Image integration?

LiveContext exposes 7 operations on HTML/CSS to Image, covering image and usage. Common uses include rendering one card per row of a list, auditing what the account has rendered and checking consumption before a bulk render.