# Set up HCTI in Cline

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

**You’ll need:** an [HCTI account](https://htmlcsstoimage.com) with image credits. Sign in through your browser when connecting—no API key to copy.

## 1\. Connect a remote server in Cline

1.  Open the **MCP Servers** panel in the Cline extension.
2.  Choose **Remote Servers** and enter `hcti` as the server name.
3.  Enter `https://mcp.hcti.io` as the URL and select **Streamable HTTP**.
4.  Add the server and complete the HCTI authorization prompt in your browser.

To edit the configuration instead, open **Configure → Configure MCP Servers** in that panel and merge this entry under `mcpServers`:

```json
{
  "mcpServers": {
    "hcti": {
      "type": "streamableHttp",
      "url": "https://mcp.hcti.io",
      "disabled": false,
      "autoApprove": []
    }
  }
}
```

Keep `type` explicit: Cline defaults to legacy SSE when it is omitted. Check that HCTI’s tools appear, then ask **“Use HCTI to check my image usage and account limits”** and approve the tool call when prompted. See [Cline’s MCP guide](https://docs.cline.bot/mcp/mcp-overview).

## 2\. Take a screenshot

Send this prompt after connecting:

```text
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:

```text
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 export a table as an image

Provide the data in your Cline conversation and ask:

```text
Create an HTML/CSS table showing Starter: $9, Pro: $29, and Team: $99 per month. Use readable text and consistent column widths. Render it as a PNG with HCTI and return the image URL.
```

Review the rendered table at the returned URL. Ask Cline to adjust column widths or text sizes and render again if needed.

## Available tools

These core tools work across MCP clients. Access depends on the [permissions approved for your connection](/integrations/mcp/permissions/). 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](/integrations/mcp/#image-parameters) and the [Template Editor](/template-editor/) for image options and reusable designs. The [complete tools reference](/integrations/mcp/tools/) also covers proxies, storage destinations, Open Graph configurations, and required permissions.

## Troubleshooting

For a permission-denied error, [reconnect and approve the required access](/integrations/mcp/permissions/#add-permissions-to-an-existing-connection) before retrying. Usage checks and maximum batch-size checks require `usage:read`.

### Missing tools or connection errors

Confirm the transport is Streamable HTTP, the server is enabled, and browser authorization completed. Restart the server from MCP settings if necessary. Cline may wait for tool-call approval before sending the rendering request.

### 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](https://htmlcsstoimage.com/dashboard) for available image credits.

See [shared MCP troubleshooting](/integrations/mcp/#troubleshooting) for authentication and rendering errors, or [choose another client](/integrations/mcp/#choose-your-client).

## Need help?

Talk to a human. Email [support@htmlcsstoimage.com](mailto:support@htmlcsstoimage.com) and we’ll help you get started.