Skip to main content
Glama
Sign In

HTML/CSS to Image API

by io.github.htmlcsstoimage
OverviewDiscussionsAdmin

Create an Image of a URL

create_url_image
Destructive

Creates a screenshot of an existing web page at content.url. Rendering loads the page and its resources in a browser and executes its JavaScript. Set content.full_screen for the entire scrollable page, or content.selector to capture a particular element. Returns asset ID, URL, and format information in item; include_image_data requests an eager inline preview, and include_file returns the output as an embedded binary resource. Use create_image when supplying HTML/CSS directly, or create_templated_image when rendering a saved template.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "content": "<content>"
    },
    "name": "create_url_image"
  }
}

Input Schema

NameRequiredDescriptionDefault
contentYesPublic HTTP or HTTPS page URL in url, plus optional CSS overrides, viewport, cropping, and loading controls. Set ms_delay when client-side content needs extra time; use render_when_ready only when the page provides the HCTIReadyNow readiness element.
include_fileNoEagerly render and include up to 10 MiB of the original output, including PDFs, as an MCP embedded resource with uri, mimeType, and base64 blob fields. This takes longer; the asset URL remains available if the file cannot be included. Deferred renders cannot include file data. Enable only when file bytes are needed; combine with include_image_data only when both representations are needed.
include_image_dataNoEagerly render and include up to 10 MiB of image data for an inline preview. This takes longer and reports progress when the client supports progress notifications. Successful stored renders also return a URL that can be opened or embedded outside the MCP context. Use only when the user requests or needs an inline preview.

Output Schema

NameRequiredDescriptionDefault
itemNoOperation result. Check success before using this value.
errorNoError details when the operation failed; null on success.
successNoWhether the operation succeeded. If false, inspect error before retrying.

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed2 schema fields changed
    • changedInput schema / properties / include_file / description
      Previous value: -"Eagerly render and include up to 4 MiB of the original output, including PDFs, as an MCP embedded resource with uri, mimeType, and base64 blob fields. This takes longer; the asset URL remains available if the file cannot be included. Deferred renders cannot include file data. Enable only when file bytes are needed; combine with include_image_data only when both representations are needed."New value: +"Eagerly render and include up to 10 MiB of the original output, including PDFs, as an MCP embedded resource with uri, mimeType, and base64 blob fields. This takes longer; the asset URL remains available if the file cannot be included. Deferred renders cannot include file data. Enable only when file bytes are needed; combine with include_image_data only when both representations are needed."
    • changedInput schema / properties / include_image_data / description
      Previous value: -"Eagerly render and include up to 4 MiB of image data for an inline preview. This takes longer and reports progress when the client supports progress notifications. Successful stored renders also return a URL that can be opened or embedded outside the MCP context. Use only when the user requests or needs an inline preview."New value: +"Eagerly render and include up to 10 MiB of image data for an inline preview. This takes longer and reports progress when the client supports progress notifications. Successful stored renders also return a URL that can be opened or embedded outside the MCP context. Use only when the user requests or needs an inline preview."
  2. Changed1 schema field changed
    • addedInput schema / properties / include_file
      Added value: +{
+  "default": false,
+  "description": "Eagerly render and include up to 4 MiB of the original output, including PDFs, as an MCP embedded resource with uri, mimeType, and base64 blob fields. This takes longer; the asset URL remains available if the file cannot be included. Deferred renders cannot include file data. Enable only when file bytes are needed; combine with include_image_data only when both representations are needed.",
+  "type": "boolean"
+}
  3. Changed1 schema field changed
    • addedInput schema / properties / content / properties / request_overrides
      Added value: +{
+  "description": "An array of request rules. Use `action: \"block\"` with a `url` wildcard pattern (using `*`) and/or `resource_types` as an array of resource names, such as `image`, `script`, or `xhr`. Both matchers must match when supplied together; any matching block rule blocks the request. Omitted, `null`, or `[]` adds no overrides. Requires a paid plan. Accepts a JSON array in JSON requests or a JSON-encoded array string in form requests. Maximum 100 rules and 512 characters per URL pattern. Each block rule requires a nonempty URL pattern or at least one resource type; supplied matchers cannot be empty. Not supported in query strings.",
+  "items": {
+    "anyOf": [
+      {
+        "properties": {
+          "action": {
+            "const": "block"
+          },
+          "resource_types": {
+            "description": "Resource types to match, supplied as an array of names, such as image, script, xhr, or fetch. Any listed type may match. When url is also supplied, it must match too.",
+            "items": {
+              "enum": [
+                "beacon",
+                "document",
+                "stylesheet",
+                "image",
+                "image_set",
+                "media",
+                "font",
+                "script",
+                "text_track",
+                "xhr",
+                "fetch",
+                "event_source",
+                "manifest",
+                "ping",
+                "img",
+                "other"
+              ],
+              "type": "string"
+            },
+            "type": [
+              "array",
+              "null"
+            ]
+          },
+          "url": {
+            "description": "URL wildcard pattern to match, using * for any sequence of characters. When resource_types is also supplied, both matchers must match.",
+            "type": [
+              "string",
+              "null"
+            ]
+          }
+        }
+      }
+    ],
+    "description": "A browser request override. The action discriminator selects the rule type; currently only block is supported.",
+    "required": [
+      "action"
+    ],
+    "type": "object"
+  },
+  "type": [
+    "array",
+    "null"
+  ]
+}
  4. Changed1 schema field changed
    • changedInput schema / properties / content / properties / disable_twemoji / description
      Previous value: -"Use native Linux emoji rendering instead of HCTI's consistent Twemoji images. Leave `disable_twemoji` unset unless native emoji rendering is specifically needed."New value: +"Set `disable_twemoji: false` explicitly to inject Twemoji into the loaded page. Omitted, `null`, or `true` leaves the page's emoji handling unchanged and does not disable the website's own emoji scripts."
  5. Changed5 schema fields changed
    • changedInput schema / properties / content / description
      Previous value: -"Parameters for creating the image"New value: +"Public HTTP or HTTPS page URL in url, plus optional CSS overrides, viewport, cropping, and loading controls. Set ms_delay when client-side content needs extra time; use render_when_ready only when the page provides the HCTIReadyNow readiness element."
    • changedInput schema / properties / content / properties / url / description
      Previous value: -"The exact public HTTP or HTTPS URL to capture. Use `html` instead when the content can be supplied directly."New value: +"The exact public HTTP or HTTPS URL to capture. Call `create_image` when supplying HTML and CSS directly."
    • addedOutput schema / properties / error / description
      Added value: +"Error details when the operation failed; null on success."
    • addedOutput schema / properties / item / description
      Added value: +"Operation result. Check success before using this value."
    • addedOutput schema / properties / success / description
      Added value: +"Whether the operation succeeded. If false, inspect error before retrying."
  6. First observed

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare openWorldHint=true and destructiveHint=true; the description supplies the reason, namely that it fetches a live page and executes its JavaScript. It also discloses the return payload (asset ID, URL, format in item) and the cost tradeoff of eager rendering for inline data and embedded files. It stops short of noting side effects such as stored assets counting against quota or dedupe behavior, which is why it is not a 5.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with what the tool does, then capture-mode guidance, then the return shape, then sibling routing. Every sentence carries information, though the return-value sentence overlaps with what the output schema already provides.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with a deep nested content object, the description covers the essential capture modes, the eager-preview flags, and the correct sibling routing, and an output schema handles return values. It does not mention prerequisites such as proxy or storage destination IDs needing prior resolution, leaving some setup context to the schema.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so nearly every parameter is already documented in the schema; the description mainly adds selection guidance for full_screen, selector, include_image_data, and include_file. It says nothing about the long tail of options (proxy_id, storage_destination_id, pdf_options, jumbo dimensions, request_overrides) that the schema carries alone. With the schema doing the heavy lifting, the baseline of 3 is right.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource ("Creates a screenshot of an existing web page at content.url") and immediately clarifies that rendering loads resources and executes JavaScript. Sibling tools are named later, so an agent can separate this from create_image and create_templated_image without opening a schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly routes between the three creation tools: this one for existing URLs, create_image when supplying HTML/CSS directly, and create_templated_image for saved templates. It also gives in-tool selection rules (full_screen for the whole scrollable page vs selector for a single element) and when to use include_image_data versus include_file.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

All HTML/CSS to Image API toolsInspect
Try in Browser
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources