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 with image credits. Sign in through your browser when connecting—no API key to copy.

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

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

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

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

{
  "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.

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.

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.

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

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. Ask your assistant to use HCTI by name.

Account usage

Screenshots and rendering

Template management

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.

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

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.

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.