ChatGPT & Codex 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 ChatGPT or Codex to HCTI
How to set up ChatGPT
- Open the official HTML/CSS to Image plugin, or find HTML/CSS to Image in the Plugins Directory.
- Install it and connect your HCTI account when prompted.
- 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:
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 and Codex MCP guide 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:
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 create an Open Graph card from your project
In Codex, open the repository containing your site and ask:
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
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 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 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.