Gemini CLI MCP Integration

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.

This guide uses Gemini CLI, Google’s terminal-based agent. Install and sign in to Gemini CLI before connecting HCTI.

1. Connect Gemini CLI

Add HCTI for the current project from your terminal:

gemini mcp add --transport http hcti https://mcp.hcti.io

Start gemini and run /mcp auth hcti.
Sign in to HCTI and review the organization and permissions. Include usage:read to check your account usage.
Run /mcp list to check the connection.

Ask “Use HCTI to check my image usage and account limits” to verify access without rendering an image.

Set up with settings.json instead

Merge this into .gemini/settings.json in your project, or ~/.gemini/settings.json for all projects:

{
  "mcpServers": {
    "hcti": {
      "httpUrl": "https://mcp.hcti.io"
    }
  }
}

Use httpUrl for Streamable HTTP; Gemini CLI’s url field selects the legacy SSE transport. Restart Gemini CLI after editing settings, then run /mcp auth hcti.

To configure all projects from the terminal, add --scope user to the gemini mcp add command. See Gemini CLI’s MCP 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.

Create an Open Graph card

Give Gemini the relevant stylesheet and page title, then ask:

Read the brand colors and typography in this workspace. Create
self-contained HTML/CSS for a 1200×630 Open Graph card titled
"New release". Render it with HCTI at device_scale 1 and return the PNG URL.

Open the result to check the title, spacing, and brand colors. Ask Gemini to update the HTML/CSS and render again for changes. HCTI needs the rendered markup and accessible assets, so source component files may need to be converted first.

Available tools

HTML/CSS to Image (HCTI) supports these core MCP tools across clients. Access depends on the permissions approved for your connection. Ask your assistant to use HCTI by name when you want it to render HTML/CSS or capture a website.

Account usage

Tool	What it does
check_usage	Check images used, the account’s image allowance, the next reset date, and whether overages are enabled. Does not render an image.

Screenshots and rendering

Tool	What it does
create_image	Render HTML and CSS as PNG, JPG, WebP, or PDF. Accepts rendering options such as `device_scale`, `viewport_width`, `viewport_height`, and `ms_delay`.
create_url_image	Capture a public webpage or a specific element using a CSS selector. Supports viewport settings and cookie banner blocking.
create_templated_image	Render a saved template using its `template_id` and a `template_values` object.
create_batch_images	Render multiple variations in one request, with shared `default_options` and per-image `variations`.
get_max_batch_size	Check the authorized account’s current batch limit before preparing a batch.

Template management

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

See the rendering parameters for available options and the Template Editor guide for designing reusable templates.

More management capabilities are available for proxies, storage destinations, and Open Graph configurations. See the complete MCP tools reference for all tools 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 /mcp list inside Gemini CLI or gemini mcp list from your terminal to inspect connection errors. Run /mcp auth hcti to sign in again if needed.

Check that the server uses httpUrl in settings and that HCTI is enabled. If you configured includeTools or excludeTools, make sure they allow the tool you want to use. Approve tool calls when Gemini prompts you.

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. Please email us support@htmlcsstoimage.com with any questions and we’ll gladly help you get started.