# Set up HCTI in Cursor

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\. Install the Cursor plugin

Install the official **HTML/CSS to Image API** plugin from the Cursor Marketplace:

[Install from Cursor Marketplace](https://cursor.com/marketplace/html-css-to-image)

The plugin adds the hosted HCTI MCP server and workflow guidance for image generation, screenshots, templates, and Open Graph images.

1.  Open the marketplace listing and install the plugin in Cursor.
2.  Open Cursor’s MCP settings, find `hcti`, and select **Connect**.
3.  Authorize your HCTI account in the browser.
4.  Start a new Agent chat and ask **“Use HCTI to check my image usage and account limits”**.

### Connect the MCP server manually

If you only want the MCP tools without the plugin’s workflow guidance, use this button to add the hosted MCP server:

[Add MCP server to Cursor](cursor://anysphere.cursor-deeplink/mcp/install?name=HCTI&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vbWNwLmhjdGkuaW8ifQ==)

Alternatively, merge this entry into `.cursor/mcp.json` in your project, or `~/.cursor/mcp.json` for all projects:

```json
{
  "mcpServers": {
    "hcti": {
      "url": "https://mcp.hcti.io"
    }
  }
}
```

After adding it, enable the HCTI server in Cursor’s MCP settings, select **Connect**, and authorize your account in the browser. Use either the marketplace plugin or the manual MCP configuration to avoid duplicate tools. See [Cursor’s MCP guide](https://cursor.com/docs/mcp).

## 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 card from your codebase

Open the project containing your card styles and ask Cursor Agent:

```text
Read the card component and its styles in this project. Make a self-contained HTML/CSS version with the text "New release", render it with HCTI, and return the PNG URL.
```

A source component may need to be converted to HTML/CSS first. Ask Cursor to include the relevant styles and replace local asset paths with accessible URLs.

## 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

Check whether the server was added for this project or globally. Enable it in MCP settings, complete authorization, and open an Agent chat. If tools appear twice, keep either the plugin connection or the manual entry.

### 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.