Set up HCTI in Grok Build

Capture a webpage or turn HTML/CSS into a PNG, WebP, or PDF with HTML/CSS to Image.

You’ll need: an HCTI account with image credits. Sign in through your browser when connecting—no API key to copy.

1. Connect HCTI in Grok Build

This guide uses Grok Build, the coding agent with MCP and plugin support.

Install through the plugin marketplace

Open /plugins in Grok Build and browse the Marketplace tab for HTML/CSS to Image. If the plugin is available in your configured marketplace, install it, then open /mcps to enable its HCTI server and authenticate. The HCTI plugin includes rendering and template workflow guidance.

Add the MCP server directly

If the plugin is not listed, connect the same hosted tools from your terminal:

grok mcp add --transport http hcti https://mcp.hcti.io
grok mcp list

Open /mcps in Grok Build, select hcti, and press i to authenticate. Complete OAuth in the browser, then ask “Use HCTI to check my image usage and account limits”. Tools are namespaced, so create_url_image may appear as hcti__create_url_image.

Use one connection method to avoid duplicate tools. See the Grok Build MCP guide and plugin guide.

2. Take a screenshot

Send this prompt after connecting:

Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.

Open the returned image URL to view your screenshot. Replace https://example.com with your own public URL.

3. Render HTML/CSS

Try a small card with explicit text, colors, and dimensions:

Use HCTI to render this HTML and CSS as a PNG at device_scale 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.

The result is a dark blue card with centered white text. Edit the text or CSS and render again to refine it.

How to capture a pricing table

Give Grok Build a public pricing URL and the selector for its table:

Use HCTI to screenshot https://example.com/pricing with selector=".pricing-grid" and device_scale=2. Return the image URL.

Replace the example URL and selector with a real page and matching element. Grok can inspect your project markup to help identify the selector; the deployed page must be reachable by HCTI.

Available tools

These core tools work across MCP clients. Access depends on the permissions approved for your connection. Ask your assistant to use HCTI by name.

Account usage

Tool	What it does
`check_usage`	Check images used, image allowance, next reset, and overage settings without rendering an image.

Screenshots and rendering

Tool	What it does
`create_image`	Render HTML/CSS as PNG, JPG, WebP, or PDF. Supports device_scale, viewport_width, viewport_height, and ms_delay.
`create_url_image`	Capture a public page or CSS selector, with viewport settings and cookie-banner blocking.
`create_templated_image`	Render a saved template with template_id and template_values.
`create_batch_images`	Render variations with shared default_options and per-image variations.
`get_max_batch_size`	Check the account's batch limit before preparing a batch.

Template management

Tool	What it does
`create_template`	Save HTML/CSS as a reusable template with variables.
`update_template`	Update an existing template by ID.
`list_templates`	Find templates in the connected account.
`list_template_versions`	Inspect a template's version history.

See rendering parameters and the Template Editor for image options and reusable designs. The complete tools reference also covers proxies, storage destinations, Open Graph configurations, and required permissions.

Troubleshooting

For a permission-denied error, reconnect and approve the required access before retrying. Usage checks and maximum batch-size checks require usage:read.

Missing tools or connection errors

Run grok mcp doctor hcti to diagnose the direct connection. In /mcps, refresh with r, enable the server, and authenticate with i. Use grok inspect to identify configurations inherited from another client if duplicate tools appear.

Rendering errors

HCTI fetches webpages from its hosted service. Use a publicly accessible URL; it cannot reach your computer’s localhost. For HTML/CSS rendering, supply the file contents and accessible assets rather than local file paths. Check your HCTI dashboard for available image credits.

See shared MCP troubleshooting for authentication and rendering errors, or choose another client.

Need help?

Talk to a human. Email support@htmlcsstoimage.com and we’ll help you get started.