# HTML/CSS to Image API

Renders HTML/CSS into images, captures live website screenshots, and fills reusable templates to produce images or PDFs.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 7
- Author: htmlcsstoimage
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/htmlcsstoimage/agent-plugins
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/mcp/htmlcss-to-image-api

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

## Requirements
- Remote server: `https://mcp.hcti.io`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http html-css-to-image https://mcp.hcti.io
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add htmlcss-to-image-api --url https://mcp.hcti.io
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "htmlcss-to-image-api": {
            "url": "https://mcp.hcti.io"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "htmlcss-to-image-api": {
            "type": "http",
            "url": "https://mcp.hcti.io"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http htmlcss-to-image-api https://mcp.hcti.io
```

## When to use it
- 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
- 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

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md