JetBrains IDEs 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.

1. Connect HCTI to JetBrains AI Assistant

This guide uses the JetBrains AI Assistant plugin in your IDE, such as IntelliJ IDEA, PyCharm, WebStorm, or Rider. Install and activate AI Assistant before adding HCTI. You also need Node.js and npx available to the IDE.

Use the mcp-remote bridge to handle HCTI’s browser-based OAuth login. The bridge runs locally and forwards tool calls to the hosted HCTI server.

Open Settings → Tools → AI Assistant → Model Context Protocol (MCP).
Click Add and choose the STDIO connection option.
Paste the following JSON configuration and choose whether to make the server available globally or only in the current project.

{
  "mcpServers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

Click OK, enable the server, and click Apply to start it.
Complete HCTI authorization in the browser window opened by the bridge.
Check the Status column, then ask AI Assistant: “Use HCTI to check my image usage and account limits.” The usage response confirms the connection.

These settings connect AI Assistant to HCTI. The separate Tools → MCP Server settings expose your IDE’s own tools to external agents. See JetBrains’ MCP client instructions.

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.

How to export a report template from your project

Attach the relevant template and styles to AI Assistant, then ask:

Read this report template and its CSS. Fill it with sample data and make
self-contained HTML/CSS. Render it through HCTI with format="pdf"
and return the PDF URL.

The assistant needs to resolve server-side template expressions before rendering. Ask it to use accessible image and font URLs instead of local asset paths.

Available tools

HTML/CSS to Image (HCTI) exposes the same MCP tools in every supported client. 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.

Troubleshooting

Missing tools or connection errors

If the bridge cannot start, check that Node.js and npx are available to the IDE. If needed, replace npx in the configuration with its absolute executable path. On Windows, use npx.cmd if npx cannot be launched.

Use the Reconnect action in MCP settings after correcting the configuration. For bridge or login errors, open Help → Show Log in Finder/Explorer and inspect the mcp folder. An organization administrator may control which MCP servers you can add.

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.