Skip to content
Scalekit Docs
Talk to an Engineer Dashboard

Connect AI agents to HTML/CSS to Image

Scalekit connector
Open markdown

The HTML/CSS to Image connector lets your AI agent act in each user's HTML/CSS to Image account. Each user connects their own HTML/CSS to Image API key once, and Scalekit sends it with every call, so your agent never handles credentials. It comes with 14 tools.

Tools
14
What they doRead · write · destructive
5 · 8 · 15 read8 write1 destructive
Users sign in with

Setup

  1. Install the SDK

    Terminal window
    npm install @scalekit-sdk/node dotenv
  2. Set your credentials

    Add your Scalekit credentials to your .env file. Find values in app.scalekit.com > Developers > API Credentials.

    .env
    SCALEKIT_ENVIRONMENT_URL=<your-environment-url>
    SCALEKIT_CLIENT_ID=<your-client-id>
    SCALEKIT_CLIENT_SECRET=<your-client-secret>
  3. Create the HTML/CSS to Image connection

    In AgentKit > Connections, create a HTML/CSS to Image connection. The name you give it is the connection_name your code passes. See Configure connections.

Tools

Pass the exact name to execute_tool
Try in PlaygroundRequest a tool
  • htmlcsstoimage_get_imageGet the stored details of one image: its source (HTML/CSS, URL or template) and the render options it was created with.Read-only

    Get Image

    Get the stored details of one image: its source (HTML/CSS, URL or template) and the render options it was created with. Returns image_type, id, created_at and the source fields (html and css, url, or template_id, template_version and template_values) plus options such as device_scale, viewport, selector and ms_delay. It does not return the image file; use the url from the create response for that. Use htmlcsstoimage_get_image to inspect one image. Use htmlcsstoimage_list_images to find image IDs.

    Inputs

    image_idstringrequired
    ID of the image, as returned by htmlcsstoimage_create_image (or the last path segment of its hcti.io url, without any extension). Example: be4c5118-fe19-462b-a49e-48cf72697a9d.
  • htmlcsstoimage_get_usageGet the account's image usage by hour, day, month and billing period.Read-only

    Get Usage

    Get the account's image usage by hour, day, month and billing period. Returns data (recent image counts grouped by hour, day and month; these overlap and should not be added together) and per_billing_period (image totals per billing period, oldest first). Use htmlcsstoimage_get_usage to check how many image credits have been used before a large batch.

    Inputs

    This tool takes no inputs.

  • htmlcsstoimage_list_imagesList images created by the account, newest first, excluding deleted images.Read-only

    List Images

    List images created by the account, newest first, excluding deleted images. Returns images (id, url, created_at), next_page_token and has_next_page. Use htmlcsstoimage_list_images to browse or find image IDs. Use htmlcsstoimage_get_image for one image's full settings.

    Inputs

    countinteger
    Number of images per page, 1 to 50. Defaults to 50. Example: 25.
    page_tokenstring
    next_page_token from the previous response, to fetch the next page. Omit for the first page. Example: eyJsYXN0X2lkIjoiYTNhYjJhYjIifQ==.
  • htmlcsstoimage_list_template_versionsGet one template's saved versions, newest first, with the HTML, CSS and render settings of each.Read-only

    Get Template Versions

    Get one template's saved versions, newest first, with the HTML, CSS and render settings of each. Returns data (one entry per version: id, version, name, html, css, settings, created_at) and pagination.next_page_start. The first entry is the current version. Use htmlcsstoimage_list_template_versions to read a template or pick a version for htmlcsstoimage_create_templated_image_version. Use htmlcsstoimage_list_templates to find template IDs.

    Inputs

    template_idstringrequired
    ID of a saved template, as returned by htmlcsstoimage_create_template or htmlcsstoimage_list_templates. Example: t-b0354248-e7f6-4cca-81c6-2b4a70a16388.
    countinteger
    Number of results per page. Defaults to 10. Example: 25.
    max_versioninteger
    Pagination cursor: pass pagination.next_page_start from the previous response to get the next page. Omit for the first page. Example: 1595179003987.
  • htmlcsstoimage_list_templatesList saved templates with the settings of each one's latest version.Read-only

    List Templates

    List saved templates with the settings of each one's latest version. Returns data (id, version, template_type html_css or blocks, name, description, html, css, render settings, and variables for editor templates) and pagination.next_page_start. Use htmlcsstoimage_list_templates to find a template_id. Use htmlcsstoimage_list_template_versions for one template's version history.

    Inputs

    countinteger
    Number of results per page. Defaults to 10. Example: 25.
    max_versioninteger
    Pagination cursor: pass pagination.next_page_start from the previous response to get the next page. Omit for the first page. Example: 1595179003987.
  • htmlcsstoimage_create_imageRender HTML and CSS into an image and get back a hosted image URL (PNG by default; JPG, WebP or PDF by changing the extension).Write

    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.

    Inputs

    htmlstringrequired
    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_schemestring
    Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark.one of lightdark
    cssstring
    CSS that styles the HTML. Handlebars is not supported in CSS. Example: .card { padding: 24px; background: #0f172a; color: #fff; font-family: 'Roboto'; }
    dedupe_duration_sinteger
    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_scalenumber
    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_twemojiboolean
    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.
    formatstring
    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 pngjpgjpegwebppdf
    google_fontsstring
    Google Fonts families to load, separated by a pipe. Reference them with font-family in the CSS. Example: Roboto|Open Sans.
    max_wait_msinteger
    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_typestring
    CSS media type used while rendering. One of screen or print. Example: print.one of screenprint
    metadataobject
    Your own key-value labels stored with the image, string values only. Example: {"post_id": "1234", "source": "blog"}.
    ms_delayinteger
    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_optionsobject
    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_readyboolean
    When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.
    selectorstring
    CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.
    timezonestring
    IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.
    transparent_backgroundboolean
    When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.
    viewport_heightinteger
    Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.
    viewport_mobileboolean
    When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.
    viewport_widthinteger
    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_batchCreate several HTML/CSS or URL images in one call from shared default options plus one variation per image.Write

    Create Image Batch

    Create several HTML/CSS or URL images in one call from shared default options plus one variation per image. Returns images, a list of id and url pairs in the same order as variations. Each image uses image credits as if created alone. Use htmlcsstoimage_create_image_batch for many similar images at once. Use htmlcsstoimage_create_templated_image_batch to fill saved templates, and htmlcsstoimage_create_image for a single image. Batch size is limited by plan (some plans do not allow batches). Each image renders in about 1-3 seconds and the tool call times out after 10 seconds, so keep batches small (a handful of HTML images, fewer URL screenshots).

    Inputs

    variationsarrayrequired
    One object per image, in the order the results should come back. After merging with default_options each one must have html or url. Example: [{"html": "<div>Image 1</div>"}, {"html": "<div>Image 2</div>", "device_scale": 1}, {"url": "https://example.com"}].
    default_optionsobject
    Options applied to every variation; a variation's own options override them. Takes the same fields as htmlcsstoimage_create_image or htmlcsstoimage_create_url_image, such as css, google_fonts, device_scale, viewport_width, viewport_height, selector, ms_delay and format (dedupe_duration_s is not supported in batches). Example: {"css": "body { font-family: sans-serif; }", "device_scale": 2}.
  • htmlcsstoimage_create_templateSave a reusable HTML/CSS template with Handlebars variables and its render settings.Write

    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.

    Inputs

    htmlstringrequired
    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><p>{{subtitle}}</p></div>.
    color_schemestring
    Chrome's preferred color scheme, for pages that use prefers-color-scheme. One of light or dark. Example: dark.one of lightdark
    cssstring
    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; }
    descriptionstring
    Notes on what the template is for, up to 1024 characters. Example: Open Graph image for blog posts.
    device_scalenumber
    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_twemojiboolean
    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_fontsstring
    Google Fonts families to load, separated by a pipe. Reference them with font-family in the CSS. Example: Roboto|Open Sans.
    max_wait_msinteger
    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_typestring
    CSS media type used while rendering. One of screen or print. Example: print.one of screenprint
    ms_delayinteger
    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.
    namestring
    Short name to find the template by, up to 64 characters. Example: Blog social card.
    render_when_readyboolean
    When true, wait to capture until the page's JavaScript calls ScreenshotReady(). The render fails if ScreenshotReady() is never called. Example: true.
    selectorstring
    CSS selector of one element to crop the image to; the image is cut to that element's bounding box. Example: .card or #hero.
    timezonestring
    IANA timezone Chrome uses while rendering, which affects dates shown by JavaScript. Example: America/New_York.
    transparent_backgroundboolean
    When true, render with a transparent background instead of white (use png or webp to keep transparency). Example: true.
    viewport_heightinteger
    Height of Chrome's viewport in pixels, 1 to 6000. Send viewport_width and viewport_height together. Example: 630.
    viewport_mobileboolean
    When true, emulate a mobile device viewport, honoring the page's viewport meta tag. Example: true.
    viewport_widthinteger
    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.