Set up HCTI in OpenCode

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.

Merge this entry into your project’s opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "hcti": {
      "type": "remote",
      "url": "https://mcp.hcti.io",
      "enabled": true
    }
  }
}

Authenticate and check the server from that project directory:

opencode mcp auth hcti
opencode mcp list

Complete authorization in your browser, then open OpenCode and ask “Use HCTI to check my image usage and account limits”. OpenCode also prompts for OAuth when a remote server needs authentication on first use. See OpenCode’s MCP documentation.

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.

After connecting HCTI, ask OpenCode:

Use HCTI to list my templates. Find the social-card template, check its variables, and render it with the headline "Shipping today". Return the image URL.

Replace social-card with a template in your account. If you do not have one yet, ask OpenCode to save the HTML/CSS card from the previous step as a reusable template.

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.

Run opencode mcp list from the project directory and confirm hcti is enabled. Use opencode mcp auth hcti to authenticate. Check that your agent configuration has not disabled HCTI tools.

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.