# Set up HCTI in ChatGPT & Codex

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 ChatGPT or Codex to HCTI

### How to set up ChatGPT

1.  Open the official [HTML/CSS to Image plugin](https://chatgpt.com/plugins/plugin_asdk_app_6a4d168031448191abcd6540497efb7b), or find **HTML/CSS to Image** in the Plugins Directory.
2.  Install it and connect your HCTI account when prompted.
3.  Complete browser authorization, then start a new conversation and ask ChatGPT to use HTML/CSS to Image.

### How to set up Codex

Install the same plugin from the Plugins Directory in the app. In Codex CLI, open `/plugins` to browse available plugins. Connect HCTI and start a new task after installation.

For a direct MCP connection in Codex CLI, run:

```bash
codex mcp add hcti --url https://mcp.hcti.io
codex mcp login hcti
codex mcp list
```

Complete OAuth in your browser. Use one installation method to avoid duplicate HCTI connections. The IDE extension uses MCP configuration rather than plugin installation. See the [OpenAI plugin guide](https://learn.chatgpt.com/docs/plugins) and [Codex MCP guide](https://developers.openai.com/codex/mcp) for supported surfaces and configuration.

In either product, ask **“Use HCTI to check my image usage and account limits”** to check the connection. The response shows your image usage and account limits.

## 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 create an Open Graph card from your project

In Codex, open the repository containing your site and ask:

```text
Read the brand colors and typography in this project. Create self-contained HTML/CSS for a 1200×630 Open Graph card titled "New release". Render it with HCTI at device_scale 1 and return the image URL.
```

In ChatGPT, provide the brand colors, fonts, and title in the conversation instead of referring to local files.

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

If the plugin is installed but its tools are missing, check that its HCTI connection is authorized and start a new conversation or task. For the CLI connection, check `codex mcp list` and rerun `codex mcp login hcti` if authentication is needed.

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