# HTML/CSS to Image — how to use (mcp.ai)

Connect your HTML/CSS to Image account and use 10 tools for images and design straight from your AI agent. Connect with your own API key. HTML/CSS to Image converts HTML, CSS, public web pages, and reusable templates into images and PDFs through an API.

## Option A — via MCP (recommended)
Remote MCP endpoint (HTTP, streamable): `https://api.mcp.ai/p_htmlcss_to_image?ms=1787293380000`
Add it as a custom/remote MCP connector in your client (Claude, Cursor, VS Code…), then authenticate when prompted. Once connected, ask the agent to use the server's tools (e.g. `htmlcss_to_image_create_image`).

## Option B — via direct REST API
Base URL: `https://api.mcp.ai/api/htmlcss_to_image`
Auth: `Authorization: Bearer sk_live_…` — create a workspace API key at https://mcp.ai/settings/api-keys
Discover endpoints: `GET https://api.mcp.ai/api/htmlcss_to_image/_endpoints`

### Endpoints
- `POST https://api.mcp.ai/api/htmlcss_to_image/create/image` — Create a hosted image from HTML/CSS or an internet-reachable webpage, including authenticated pages using request headers. Use GET_IMAGE afterward to download, resize, crop, or convert it.
  - body: { css?: string, url?: string, html?: string, headers?: object, ms_delay?: integer, selector?: string, timezone?: string, media_type?: string, full_screen?: boolean, max_wait_ms?: integer, color_scheme?: string, device_scale?: number, google_fonts?: string[], viewport_width?: integer, viewport_height?: integer, dedupe_duration_s?: integer, render_when_ready?: boolean, block_consent_banners?: boolean, transparent_background?: boolean, additional_header_origins?: string[], include_headers_on_subrequests?: boolean }
- `POST https://api.mcp.ai/api/htmlcss_to_image/create/image/from/template` — Create an image from a reusable template using the latest version or an explicitly selected version.
  - body: { template_id: string, template_values: object, template_version?: integer }
- `POST https://api.mcp.ai/api/htmlcss_to_image/create/images/batch` — Create 1 to 25 hosted images from HTML/CSS or internet-reachable webpages in one request, including authenticated pages using shared or per-image headers. Requires an account plan that supports batch 
  - body: { variations: object[], default_options?: object }
- `POST https://api.mcp.ai/api/htmlcss_to_image/create/template` — Create a reusable Handlebars HTML/CSS image template. WARNING: the template is persistent because the API exposes no delete operation, and a free account can hold only one template.
  - body: { css?: string, html: string, name?: string, description?: string, render_options?: object }
- `POST https://api.mcp.ai/api/htmlcss_to_image/delete/image` — Permanently delete one generated image and clear its HCTI CDN cache. Copies previously written to external storage are not deleted.
  - body: { image_id: string }
- `POST https://api.mcp.ai/api/htmlcss_to_image/delete/images/batch` — Permanently delete multiple generated images and clear their HCTI CDN caches. Copies previously written to external storage are not deleted.
  - body: { image_ids: string[] }
- `POST https://api.mcp.ai/api/htmlcss_to_image/get/image` — Download a generated image by ID, optionally converting its format, resizing it, or cropping it.
  - body: { dpi?: integer, width?: integer, format?: string, height?: integer, crop_top?: string, image_id: string, x_origin?: string, y_origin?: string, crop_left?: string, crop_right?: string, crop_width?: string, crop_bottom?: string, crop_height?: string, aspect_ratio?: string }
- `POST https://api.mcp.ai/api/htmlcss_to_image/get/usage` — Return recent hourly, daily, monthly, and billing-period image usage for the connected account.
- `POST https://api.mcp.ai/api/htmlcss_to_image/list/templates` — List reusable image templates owned by the connected account, including their current version, source, and render settings.
- `POST https://api.mcp.ai/api/htmlcss_to_image/update/template` — Create a new version of an existing template using replacement Handlebars HTML and optional CSS or render settings.
  - body: { css?: string, html: string, name?: string, description?: string, template_id: string, render_options?: object }

## Example prompts
- "What can I do in HTML/CSS to Image?"
- "Show me a summary of my HTML/CSS to Image account"

## More
- Page: https://mcp.ai/htmlcss_to_image
- Agent spec (llms.txt): https://mcp.ai/htmlcss_to_image/llms.txt
- Postman collection: https://mcp.ai/htmlcss_to_image/postman.json