HTML/CSS to Image connector for AI agents

Tools your design agent reaches for on HTML/CSS to Image, scoped per user.

CALL ANY TOOL

14 tools for image generation with HTML/CSS to Image: render HTML and CSS or a URL into images, create and version Handlebars templates, batch-render images, and check usage.

htmlcsstoimage_create_image

Create image

Render HTML and CSS into an image and get back a hosted image URL (PNG by default; JPG, WebP or PDF by changing the extension). Returns id and url. The url is a permanent hcti.io link that serves the image, and the id is used to look up or delete it. Uses 1 image credit (2 when ms_delay is over 5000). Use htmlcsstoimage_create_image for your own markup. Use htmlcsstoimage_create_url_image to screenshot a live webpage, htmlcsstoimage_create_templated_image to fill a saved template, and htmlcsstoimage_create_image_batch for many images in one call. Most renders take 1-3 seconds (simple markup about 300 ms); external assets, JavaScript, ms_delay and max_wait_ms add to that, and the tool call times out after 10 seconds, so keep ms_delay plus page load well under 10 seconds.

Parameters

Name

Type

Required

Description

html

string

Required

HTML to render: a fragment such as <div class="card">Hello</div>, or a full document starting with <html>. Fragments are wrapped in a blank page and the image is auto-cropped to the content unless a viewport is set. External images, stylesheets and scripts referenced by full URL are loaded. Example: <div class="card"><h1>Launch week</h1></div>.

color_scheme

string

Optional

Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark. One of: `light`, `dark`.

css

string

Optional

CSS that styles the HTML. Handlebars is not supported in CSS. Example: .card { padding: 24px; background: #0f172a; color: #fff; font-family: 'Roboto'; }

dedupe_duration_s

integer

Optional

Reuse an identical image created within this many seconds instead of rendering (and charging) again, 0 to 31536000. Availability and the effective maximum depend on the plan. Example: 86400.

device_scale

number

Optional

Pixel ratio for the render, 0.1 to 3. HTML and template renders default to 2 (retina, so a 600 px wide element gives a 1200 px image); URL screenshots default to 1. Example: 1.

disable_twemoji

boolean

Optional

When true, turn off automatic Twemoji replacement and use the page's own or native emoji fonts. HTML and template renders use Twemoji by default. Example: true.

format

string

Optional

File extension put on the returned image URL: png (default), jpg, jpeg, webp or pdf. It only changes the returned link; the same image can still be fetched in any format by changing the extension. Example: webp. One of: `png`, `jpg`, `jpeg`, `webp`, `pdf`.

google_fonts

string

Optional

Google Fonts families to load, separated by a pipe. Reference them with font-family in the CSS. Example: Roboto|Open Sans.

max_wait_ms

integer

Optional

Upper limit in milliseconds on waiting for the page to finish loading, 500 to 10000 (subject to plan). Use it to capture sooner on pages that keep loading irrelevant content. Example: 3000.

media_type

string

Optional

CSS media type used while rendering. One of screen or print. Example: print. One of: `screen`, `print`.

metadata

object

Optional

Your own key-value labels stored with the image, string values only. Example: {"post_id": "1234", "source": "blog"}.

ms_delay

integer

Optional

Extra milliseconds to wait after the page loads before capturing, 0 to 10000, so JavaScript, fonts or animations can finish. Values above 5000 cost 2 image credits. Keep it low: the tool call times out after 10 seconds. Example: 500.

pdf_options

object

Optional

PDF page options, used when the image is fetched as a PDF. page_width and page_height take a value with a unit (px, in, cm, mm or pt), margins takes exactly four values (top, right, bottom, left) with units, scale is 0.1 to 2, and print_background prints background graphics. Example: {"page_width": "8.5in", "page_height": "11in", "margins": ["0.5in", "0.5in", "0.5in", "0.5in"], "print_background": true}.

render_when_ready

boolean

Optional

When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.

selector

string

Optional

CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.

timezone

string

Optional

IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.

transparent_background

boolean

Optional

When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.

viewport_height

integer

Optional

Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.

viewport_mobile

boolean

Optional

When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.

viewport_width

integer

Optional

Width of Chrome's viewport in pixels, 1 to 6000. Setting a viewport turns off automatic cropping to the content. Send viewport_width and viewport_height together. Example: 1200.

htmlcsstoimage_create_image_batch

Batch create image

htmlcsstoimage_create_template

Create template

Save a reusable HTML/CSS template with Handlebars variables and its render settings. Returns template_id and template_version. Use htmlcsstoimage_create_template once, then htmlcsstoimage_create_templated_image to make images from it. Use htmlcsstoimage_create_template_version to change an existing template. Free plans can keep 5 templates; paid plans 1,000.

Parameters

Name

Type

Required

Description

html

string

Required

Template HTML with Handlebars placeholders for the values filled in at render time; must contain at least one placeholder such as {{title}}. Example: <div class="card"><h1>{{title}}</h1>{{subtitle}} </div>.

color_scheme

string

Optional

Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark. One of: `light`, `dark`.

css

string

Optional

CSS for images made from the template. Handlebars is not supported in CSS; put dynamic styles inline in the HTML. Example: .card { padding: 40px; background: #0f172a; color: #fff; }

description

string

Optional

Notes on what the template is for, up to 1024 characters. Example: Open Graph image for blog posts.

device_scale

number

Optional

Pixel ratio for the render, 0.1 to 3. HTML and template renders default to 2 (retina, so a 600 px wide element gives a 1200 px image); URL screenshots default to 1. Example: 1.

disable_twemoji

boolean

Optional

When true, turn off automatic Twemoji replacement and use the page's own or native emoji fonts. HTML and template renders use Twemoji by default. Example: true.

google_fonts

string

Optional

Google Fonts families to load, separated by a pipe. Reference them with font-family in the CSS. Example: Roboto|Open Sans.

max_wait_ms

integer

Optional

Upper limit in milliseconds on waiting for the page to finish loading, 500 to 10000 (subject to plan). Use it to capture sooner on pages that keep loading irrelevant content. Example: 3000.

media_type

string

Optional

CSS media type used while rendering. One of screen or print. Example: print. One of: `screen`, `print`.

ms_delay

integer

Optional

name

string

Optional

Short name to find the template by, up to 64 characters. Example: Blog social card.

render_when_ready

boolean

Optional

When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.

selector

string

Optional

CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.

timezone

string

Optional

IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.

transparent_background

boolean

Optional

When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.

viewport_height

integer

Optional

Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.

viewport_mobile

boolean

Optional

When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.

viewport_width

integer

Optional

Width of Chrome's viewport in pixels, 1 to 6000. Setting a viewport turns off automatic cropping to the content. Send viewport_width and viewport_height together. Example: 1200.

htmlcsstoimage_create_template_version

Create template version

Save new HTML, CSS and render settings for an existing template as a new version. Send the complete template, not just the changes. Returns template_id and the new template_version. Images made later from the template use this version; existing images and pinned versions are unchanged. Use htmlcsstoimage_create_template_version to edit a template. Use htmlcsstoimage_create_template for a new one.

Parameters

Name

Type

Required

Description

html

string

Required

template_id

string

Required

ID of the template to update, as returned by htmlcsstoimage_create_template or htmlcsstoimage_list_templates. Example: t-b0354248-e7f6-4cca-81c6-2b4a70a16388.

color_scheme

string

Optional

Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark. One of: `light`, `dark`.

css

string

Optional

CSS for images made from the template. Handlebars is not supported in CSS; put dynamic styles inline in the HTML. Example: .card { padding: 40px; background: #0f172a; color: #fff; }

description

string

Optional

Notes on what the template is for, up to 1024 characters. Example: Open Graph image for blog posts.

device_scale

number

Optional

Pixel ratio for the render, 0.1 to 3. HTML and template renders default to 2 (retina, so a 600 px wide element gives a 1200 px image); URL screenshots default to 1. Example: 1.

disable_twemoji

boolean

Optional

When true, turn off automatic Twemoji replacement and use the page's own or native emoji fonts. HTML and template renders use Twemoji by default. Example: true.

google_fonts

string

Optional

Google Fonts families to load, separated by a pipe. Reference them with font-family in the CSS. Example: Roboto|Open Sans.

max_wait_ms

integer

Optional

Upper limit in milliseconds on waiting for the page to finish loading, 500 to 10000 (subject to plan). Use it to capture sooner on pages that keep loading irrelevant content. Example: 3000.

media_type

string

Optional

CSS media type used while rendering. One of screen or print. Example: print. One of: `screen`, `print`.

ms_delay

integer

Optional

name

string

Optional

Short name to find the template by, up to 64 characters. Example: Blog social card.

render_when_ready

boolean

Optional

When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.

selector

string

Optional

CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.

timezone

string

Optional

IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.

transparent_background

boolean

Optional

When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.

viewport_height

integer

Optional

Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.

viewport_mobile

boolean

Optional

When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.

viewport_width

integer

Optional

Width of Chrome's viewport in pixels, 1 to 6000. Setting a viewport turns off automatic cropping to the content. Send viewport_width and viewport_height together. Example: 1200.

htmlcsstoimage_create_templated_image

Create templated image

htmlcsstoimage_create_templated_image_batch

Batch create templated image

htmlcsstoimage_create_templated_image_version

Create templated image version

htmlcsstoimage_create_url_image

Create url image

Screenshot a public webpage and get back a hosted image URL, optionally cropped to one element, full-page, or at a set viewport and scale. Returns id and url. The url is a permanent hcti.io link that serves the screenshot (PNG by default; change the extension for JPG, WebP or PDF). Uses 1 image credit (2 when ms_delay is over 5000). Use htmlcsstoimage_create_url_image for an existing page. Use htmlcsstoimage_create_image to render your own HTML and CSS. Webpages are slower than plain HTML: heavy pages, full-page captures and ms_delay can approach the 10-second tool timeout, so set max_wait_ms (for example 3000-5000) on slow sites.

Parameters

Name

Type

Required

Description

url

string

Required

Public http or https URL of the webpage to screenshot. Pages behind a login are not reachable. Example: https://example.com/pricing.

block_consent_banners

boolean

Optional

When true, try to hide cookie and consent banners before capturing. Example: true.

color_scheme

string

Optional

Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark. One of: `light`, `dark`.

css

string

Optional

CSS injected into the page after it loads, to hide or restyle elements before the screenshot. Example: .cookie-banner { display: none; }

dedupe_duration_s

integer

Optional

Reuse an identical image created within this many seconds instead of rendering (and charging) again, 0 to 31536000. Availability and the effective maximum depend on the plan. Example: 86400.

device_scale

number

Optional

Pixel ratio for the render, 0.1 to 3. HTML and template renders default to 2 (retina, so a 600 px wide element gives a 1200 px image); URL screenshots default to 1. Example: 1.

format

string

Optional

full_screen

boolean

Optional

When true, capture the full scrollable height of the page instead of only the viewport. Example: true.

max_wait_ms

integer

Optional

Upper limit in milliseconds on waiting for the page to finish loading, 500 to 10000 (subject to plan). Use it to capture sooner on pages that keep loading irrelevant content. Example: 3000.

media_type

string

Optional

CSS media type used while rendering. One of screen or print. Example: print. One of: `screen`, `print`.

metadata

object

Optional

Your own key-value labels stored with the image, string values only. Example: {"post_id": "1234", "source": "blog"}.

ms_delay

integer

Optional

pdf_options

object

Optional

render_when_ready

boolean

Optional

When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.

selector

string

Optional

CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.

timezone

string

Optional

IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.

transparent_background

boolean

Optional

When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.

viewport_height

integer

Optional

Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.

viewport_mobile

boolean

Optional

When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.

viewport_width

integer

Optional

Width of Chrome's viewport in pixels, 1 to 6000. Setting a viewport turns off automatic cropping to the content. Send viewport_width and viewport_height together. Example: 1200.

htmlcsstoimage_delete_image

Delete image

htmlcsstoimage_get_image

Get image

htmlcsstoimage_get_usage

Get usage

htmlcsstoimage_list_images

List images

htmlcsstoimage_list_template_versions

List template versions

htmlcsstoimage_list_templates

List templates

Build your Agent

Same auth pattern across LangChain, OpenAI, Anthropic, and Google ADK.

import { ScalekitClient } from "@scalekit-sdk/node";
import { createReactAgent } from "@langchain/langgraph/prebuilt";

const sk = new ScalekitClient(env.SCALEKIT_ENV_URL, env.SCALEKIT_CLIENT_ID, env.SCALEKIT_CLIENT_SECRET);

// HTML/CSS to Image tools scoped to this user
const { tools } = await sk.tools.listScopedTools("user_123", {
  filter: { connectionNames: ["htmlcsstoimage"], toolNames: [
    "htmlcsstoimage_create_image",
    "htmlcsstoimage_create_templated_image",
    "htmlcsstoimage_list_templates"] },
  pageSize: 100,
});

const agent = createReactAgent({ llm, tools });
await agent.invoke({ messages: [{ role: "user", content: "Render an OG image for the post Shipping per-user auth" }] });

import OpenAI from "openai";
import { ScalekitClient } from "@scalekit-sdk/node";

const sk = new ScalekitClient(env.SCALEKIT_ENV_URL, env.SCALEKIT_CLIENT_ID, env.SCALEKIT_CLIENT_SECRET);
const openai = new OpenAI();

const { tools } = await sk.tools.listScopedTools("user_123", {
  filter: { connectionNames: ["htmlcsstoimage"] }, pageSize: 100,
});

const res = await openai.chat.completions.create({
  model: "gpt-5",
  messages: [{ role: "user", content: "Render an OG image for the post Shipping per-user auth" }],
  tools,
});

// Execute the tool call with the user's vaulted HTML/CSS to Image API ID and API key
await sk.tools.executeTool(res.choices[0].message.tool_calls[0], "user_123");

import Anthropic from "@anthropic-ai/sdk";
import { ScalekitClient } from "@scalekit-sdk/node";

const sk = new ScalekitClient(env.SCALEKIT_ENV_URL, env.SCALEKIT_CLIENT_ID, env.SCALEKIT_CLIENT_SECRET);
const anthropic = new Anthropic();

const { tools } = await sk.tools.listScopedTools("user_123", {
  filter: { connectionNames: ["htmlcsstoimage"] }, pageSize: 100,
});

const msg = await anthropic.messages.create({
  model: "claude-sonnet-5",
  max_tokens: 1024,
  messages: [{ role: "user", content: "Render an OG image for the post Shipping per-user auth" }],
  tools,
});

// Tool call runs with the user's vaulted HTML/CSS to Image API ID and API key
await sk.tools.executeTool(msg.content, "user_123");

import { Agent } from "@google/adk/agents";
import { ScalekitClient } from "@scalekit-sdk/node";

const sk = new ScalekitClient(env.SCALEKIT_ENV_URL, env.SCALEKIT_CLIENT_ID, env.SCALEKIT_CLIENT_SECRET);

const { tools } = await sk.tools.listScopedTools("user_123", {
  filter: { connectionNames: ["htmlcsstoimage"] }, pageSize: 100,
});

const agent = new Agent({
  name: "design_agent",
  model: "gemini-2.5-pro",
  instruction: "HTML/CSS to Image tools scoped to this user",
  tools,
});

await agent.run("Render an OG image for the post Shipping per-user auth");

Try these prompts

Copy any prompt into your agent. Each maps directly to a HTML/CSS to Image tool. Click to copy, paste into your agent, done.

Render images

Copy the prompt

Copied

Render this HTML card as a PNG.

Copy the prompt

Copied

Take a full-page screenshot of https://acme.com/pricing.

Copy the prompt

Copied

Render the #hero element of https://acme.com as a WebP image.

Templates

Copy the prompt

Copied

List our saved templates.

Copy the prompt

Copied

Create an image from the blog-og template with the title Shipping per-user auth.

Copy the prompt

Copied

Save a new version of the invoice-card template with this CSS.

Batches and usage

Copy the prompt

Copied

Create 5 social cards from the launch template, one per speaker.

Copy the prompt

Copied

How many images did we render this billing period?

Copy the prompt

Copied

List the images we created this week.

SEE HOW AUTH WORKS

Each user connects their own HTML/CSS to Image API ID and API key once, and Scalekit sends them with every call. Credentials stay vaulted, every call is scope checked, and every action is logged.

Authorize

Your user connects

HTML/CSS to Image

once. We tie it to their identity and the meetings they approved — no shared bot account, no org-wide access

Who:

user ‘A’

when:

Once per user

access:

Limited to user

Store

Their

HTML/CSS to Image

token lives in a vault scoped to them. User A's meetings are never reachable by an agent acting for user B, even on the same connection

vault:

encrypted

scope:

per-user

tokens:

auto-refreshed

Resolve

When your agent calls a

HTML/CSS to Image

tool, we fetch the right token server-side. It never touches your agent, never appears in the LLM context, never shows up in your logs

speed:

~40ms

check:

before every call

seen by:

nobody

Audit

Every

HTML/CSS to Image

tool call is logged — who triggered it, which meeting was fetched, what came back. 90 days of history, tied to the user who authorized it

history:

90 days

export:

SIEM-ready

logged:

every call

Test other agents

See the same per-user auth pattern across other design and media connectors.

Engineering Teams

Auto release notes agent

Reads merged GitHub PRs, groups them into structured release notes, publishes the page to Notion, and announces the release in Slack. Every call runs on the engineer's own delegated OAuth.

Why Scalekit

Secure your agent's access. Connectors ship in minutes

01.

Shared tokens break per-user analytics

A shared set of HTML/CSS to Image credentials looks fine in a demo. In production every rendered image looks like one service account, and you cannot tell which user triggered it. Scalekit resolves the credential of the actual user who triggered the agent, never a shared bot.

// shared key
audit → bot_service_account

// scalekit
audit → user_abc ✓

02.

Authentication is not authorization

03.

Multi-tenancy is architectural

04.

HTML/CSS to Image today. Ten connectors tomorrow.

“Our agents act across Salesforce, Gong, Google Drive, and more, on behalf of every customer. Scalekit behind the scenes meant we can keep adding tools without ever rebuilding how credentials or tool calling work.”

Venu Madhav Kattagoni

Head of Engineering / Von

FAQs

Frequently Asked Questions

Does the agent access HTML/CSS to Image as the user or through a shared API key?

As the user. Each user connects their own HTML/CSS to Image API ID and API key once, and Scalekit sends them with every call. Every image the agent renders or deletes is attributed to that user in your audit trail, not a shared service account.

Where are the HTML/CSS to Image credentials stored?

In Scalekit's managed AES-256 token vault, namespaced per tenant. Revocation is a single dashboard action. Credentials never appear in prompts, logs, or LLM context.

Can I limit what the agent does in HTML/CSS to Image?

Yes. Filter by tool name in listScopedTools to expose only what you want, for example render and template tools without htmlcsstoimage_delete_image, which permanently deletes an image and purges it from the CDN. Scalekit also enforces scope checks before every API call.

What happens when a user revokes HTML/CSS to Image access?

The connection is invalidated on the next tool call. Subsequent requests for that user fail closed with a clear error. Other users in the tenant remain unaffected. The event is logged for audit.

What image formats can the agent create?

PNG by default. htmlcsstoimage_create_image returns a hosted URL, and changing its extension serves JPG, WebP, or PDF. htmlcsstoimage_create_url_image screenshots a public webpage, optionally cropped to one element, full-page, or at a set viewport and scale.