Integrating the HTML/CSS to Image MCP Server

Take website screenshots, render images or PDFs, and manage your organization’s resources directly from your AI assistant.

Introduction

No matter which AI tool or agent you use, you can connect it to HTML/CSS to Image through MCP. Give any compatible assistant a public URL or HTML/CSS, and ask it to take a screenshot, render a PDF, or create images from your saved templates.

Start for free. A free HCTI account works with any integration. Creating images uses your organization’s available image credits just like the API.
Sign in securely. Authorize your account through OAuth in your browser, without copying API keys into your assistant.
No browser infrastructure to manage. HCTI handles rendering and returns a hosted URL you can open, download, or share.

You can also ask your assistant to configure proxies, storage destinations, and automatic Open Graph images through the Management API capabilities. These operations require additional OAuth permissions; API key management is REST-only.

Choose your client

Choose your assistant for setup instructions and copyable examples.

Client	How to connect
ChatGPT & Codex	Install the official plugin; use it in a conversation or a coding task.
Claude & Claude Code	Install from the Claude Connectors Directory, or connect Claude Code.
Cline	Connect a Streamable HTTP server from the Cline extension.
Cursor	Add HCTI to Cursor Agent with the install button or MCP configuration.
Gemini CLI	Connect Gemini CLI with a remote HTTP server and browser sign-in.
GitHub Copilot	Connect Copilot CLI from your terminal.
Grok	Use the HCTI plugin or a direct MCP connection in Grok Build.
JetBrains IDEs	Connect AI Assistant through an OAuth-capable MCP bridge.
OpenCode	Configure a remote MCP server and authorize it from the CLI.
VS Code	Add a remote HTTP server and use its tools in Copilot Agent mode.
Windsurf	Connect HCTI to Cascade for screenshots and rendering.
Zed	Add a remote MCP server to the Agent Panel.

What is MCP?

The Model Context Protocol lets assistants call external tools. HCTI’s hosted MCP server renders the HTML/CSS or public URL supplied by your assistant and returns the result. You do not need to run a rendering browser yourself.

MCP server URL: https://mcp.hcti.io

Transport: Streamable HTTP

Authentication: OAuth

Our agent plugin also packages workflow guidance for using HCTI. Where a client supports that plugin, installing it provides both the connection and instructions for the assistant. A direct MCP connection gives access to the tools below.

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.

Authentication

After adding HCTI, use your client’s connect or login action and complete authorization in your browser. Sign in to the HCTI account whose templates and credits you want to use, review the selected organization and permissions, then return to the assistant. Open More Permissions to select additional management access if needed. Some clients prompt automatically on first use; the individual guides show how to connect explicitly.

To check the connection without rendering an image, ask: “Use HCTI to check my image usage and account limits.” The check_usage tool requires usage:read and returns usage and limits without rendering an image. get_max_batch_size also requires usage:read. Rendering requests use your HCTI account’s image allowance; your assistant subscription is separate.

Example prompts

How to take a website screenshot

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 URL to inspect the capture. To capture just part of your own site, provide a CSS selector such as .pricing-grid that actually exists on that page. HCTI must be able to reach the URL from its hosted service; localhost is not reachable.

How to render HTML and CSS as a PNG

Use HCTI to render this HTML and CSS as a PNG with device_scale set to 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 should show white text centered on a dark blue card. The assistant sends HTML/CSS to HCTI for rendering. When working from a repository, ask it to read the relevant files and supply self-contained markup and styles; local asset paths need to be replaced with accessible assets.

How to export a PDF

Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.

How to reuse a template and create variations

Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".

Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.

Use the Template Editor to design a template and define the values your assistant should pass as template_values.

How to inspect organization resources

Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.

Approve og_configs:read for this example. To create or update configurations, also approve og_configs:create_update. See the tools reference for proxy, storage destination, and OG management operations.

Image parameters

When creating images, the main parameters are:

Parameter	Type	Description
`html`	`String`	The HTML content to render. Required for `create_image`.
`css`	`String`	CSS styles for your HTML.
`url`	`String`	The URL to screenshot. Required for `create_url_image`.

Additional parameters

Name	Type	Description
`additional_header_origins`	`Array`	Allow custom `headers` on requests to specific additional HTTP or HTTPS origins.
`block_consent_banners`	`Boolean`	When set to `true`, automatically blocks cookie consent banners and popups on websites. Most useful for URL screenshots.
`color_scheme`	`String`	Set Chrome to render in `light` or `dark` mode. Affects websites using `prefers-color-scheme`.
`dedupe_duration_s`	`Integer`	Reuse an identical recent image without consuming image credits. Sets the lookback window in seconds; defaults and allowed values vary by image type and plan.
`device_scale`	`Double`	Control resolution by adjusting the pixel ratio from `0.1` to `3`. Higher values increase image quality and file size.
`disable_twemoji`	`Boolean`	Set to `true` to use native emoji fonts instead of Twemoji.
`format`	`String`	Choose the file extension in the initially returned image URL: `png`, `jpg`, `webp`, or `pdf`.
`full_screen`	`Boolean`	Generate an image of the entire height of a URL page.
`google_fonts`	`String`	Load one or more Google fonts, such as `Roboto\|Open Sans`.
`headers`	`Object`	Add custom HTTP headers when screenshotting a URL. Headers are restricted to the requested URL's origin and any `additional_header_origins`.
`identify_as_hcti`	`Boolean`	Add `X-HCTI-SCREENSHOT: 1` to the top-level request when screenshotting a URL.
`include_headers_on_subrequests`	`Boolean`	Also add custom `headers` to same-origin subrequests and subrequests matching `additional_header_origins`.
`jumbo_max_height`	`Integer`	Maximum output height in jumbo mode, up to `80,000` pixels. Must be set with `jumbo_max_width` and consumes additional image credits.
`jumbo_max_width`	`Integer`	Maximum output width in jumbo mode, up to `80,000` pixels. Must be set with `jumbo_max_height` and consumes additional image credits.
`max_wait_ms`	`Integer`	Set a maximum time limit from `500` to `10000` milliseconds for waiting before taking the screenshot.
`media_type`	`String`	Set Chrome to render using `screen` or `print` CSS media styles.
`ms_delay`	`Integer`	Delay before generating the image. Useful when waiting for JavaScript; start with `500` milliseconds.
`pdf_options`	`Object`	Customize PDF output with page size, margins, scale, and background printing.
`proxy_id`	`String`	Route outbound traffic through one of your organization's configured HTTP proxies. Available on the 10,000 images/month plan or higher.
`render_when_ready`	`Boolean`	Wait to generate the image until JavaScript calls `ScreenshotReady()`.
`selector`	`String`	Crop the image to an element matching this CSS selector, such as `section#complete-toolkit.container-lg`.
`storage_destination_id`	`String`	Save rendered files to one of your organization's configured storage destinations. Available on the 10,000 images/month plan or higher.
`timezone`	`String`	Set Chrome's timezone with an IANA identifier such as `America/New_York`.
`transparent_background`	`Boolean`	Set to `true` to render with a transparent background.
`viewport_height`	`Integer`	Set the height of Chrome's viewport. Both dimensions must be set when using either.
`viewport_landscape`	`Boolean`	Set Chrome's viewport to landscape mode.
`viewport_mobile`	`Boolean`	Set Chrome's viewport to emulate a mobile device.
`viewport_touch`	`Boolean`	Set Chrome's viewport to support touch events.
`viewport_width`	`Integer`	Set the width of Chrome's viewport. Both dimensions must be set when using either.

Troubleshooting

Authentication Errors

If you receive authentication errors:

Try disconnecting and reconnecting the MCP server to trigger a new OAuth flow
Ensure you’re logged into the correct HTML/CSS to Image account in your browser
Check that pop-ups are not blocked when the OAuth window tries to open

Permission Errors

A listed tool may require permissions your connection does not have. Disconnect and reconnect HCTI, then approve the required access for the intended organization. Refreshing an existing token does not add permissions. Do not retry a denied operation until access changes. See MCP authorization.

Rate Limit Errors

Management tool limits are shared with REST requests for your organization. Wait 60 seconds before retrying a rate-limited tool; see rate limits.

Connection Issues

If the MCP server is not connecting:

Ensure your network allows outbound HTTPS connections
Check that the URL is exactly https://mcp.hcti.io
Restart your AI assistant after updating the configuration

Image Generation Errors

If images fail to generate:

Check that your account has available image credits on the dashboard
Ensure HTML content is valid
For URL screenshots, verify the URL is publicly accessible

Automation Platforms

You can also use the MCP server with automation platforms:

Zapier

Zapier has a dedicated MCP Client that connects to MCP servers. This lets you use the HTML/CSS to Image MCP server within Zapier workflows without writing code.

Zapier MCP client

Pipedream

Pipedream supports MCP servers for building serverless workflows. Connect the HTML/CSS to Image MCP server to automate image generation in your Pipedream workflows.

Pipedream MCP integration

The MCP server is also listed on Smithery.

Need help?

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