HTML/CSS to Image API — MCP server for Claude Code: what it does
Renders HTML/CSS into images, captures live website screenshots, and fills reusable templates to produce images or PDFs.
claude mcp add --transport http html-css-to-image https://mcp.hcti.ioWhat HTML/CSS to Image API does
The server turns HTML/CSS markup into images, grabs screenshots of live websites, and populates saved templates with data to output images or PDFs. Everything runs against the hosted HCTI MCP server at https://mcp.hcti.io, so there's no browser to manage locally.
Connection relies on HCTI's browser-based OAuth flow, so no API key or access token ever gets stored in the setup. The ClawHub distribution notes that rendering needs an HCTI account with available credits.
The package bundles separate skills too: one for image and template generation workflows, another for configuring dynamic Open Graph previews that get wired into a site's metadata.
What it helps with
- capture a live site screenshot without running a browser
- turn an HTML/CSS template into a PNG or PDF
- set up dynamic Open Graph preview images for a site
- fill a saved template with data and get a rendered image back
Example prompts for the agent
- Take a screenshot of example.com and save it as PNG
- Render this report template into a PDF with these values
- Set up a dynamic Open Graph image for the blog page
How to install HTML/CSS to Image API
Platform CLI: remote server
claude mcp add --transport http html-css-to-image https://mcp.hcti.ioPlatform CLI: remote server
codex mcp add htmlcss-to-image-api --url https://mcp.hcti.ioConfig file
{
"mcpServers": {
"htmlcss-to-image-api": {
"url": "https://mcp.hcti.io"
}
}
}Config file
{
"servers": {
"htmlcss-to-image-api": {
"type": "http",
"url": "https://mcp.hcti.io"
}
}
}Platform CLI: remote server
gemini mcp add -t http htmlcss-to-image-api https://mcp.hcti.ioStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about HTML/CSS to Image API
How do I install HTML/CSS to Image API in Claude Code?
Run claude mcp add --transport http html-css-to-image https://mcp.hcti.io, or alternatively claude mcp add --transport http htmlcss-to-image-api https://mcp.hcti.io.
What does HTML/CSS to Image API do?
It renders HTML/CSS into images, takes screenshots of live websites, and generates images or PDFs from reusable templates through the hosted HCTI MCP server.
Do I need an API key to use it?
No, the connection uses HCTI's browser-based OAuth flow, so no API key or access token needs to be stored.
