HTML/CSS to Image
HTML/CSS to Image MCP Server The HTML/CSS to Image MCP server lets AI assistants create production-ready images, website screenshots, and PDFs through…
What it can do
- Update Template: Updates a specified template with the given content
- Create Template: Creates a template from the given content
- Create Batch Images: Create a batch of up to 25 images
What data it sees
Do you need an account
No: the server works without sign-in
HTML/CSS to Image MCP Server
The HTML/CSS to Image MCP server lets AI assistants create production-ready images, website screenshots, and PDFs through natural-language instructions.
Use it to:
- Render HTML and CSS into PNG, JPG, WebP, or PDF
- Capture screenshots of public URLs
- Generate images from reusable templates and variables
- Create batches of up to 25 image variations
- Create, update, list, and version image templates
- Configure viewport size, device scale, selectors, render delays, and other rendering options
Authentication is handled through OAuth, so users can securely connect their HTML/CSS to Image account without manually configuring API credentials.
MCP endpoint: https://mcp.hcti.io
Documentation: docs.htmlcsstoimage.com/integrations/mcp
Website: htmlcsstoimage.com
How to connect
How to connect HTML/CSS to Image to Claude
The server address to paste into Claude settings:
https://htmlcsstoimage.run.tools
- Open Claude (claude.ai or the desktop app).
- Go to Settings → Connectors.
- Click Add custom connector.
- Paste the server address copied below into Remote MCP server URL and click Add.
- In a chat, click + → Connectors and switch the new connector on.
Custom connectors are available on Free, Pro, Max, Team and Enterprise plans (Free is limited to one). On Team and Enterprise an organization Owner adds the connector first under Organization settings → Connectors.
Authorization
After you click Add, a sign-in window for the service opens. Sign in with your own account and approve access. Claude never sees your password.
How to connect HTML/CSS to Image to ChatGPT
The server address to paste into ChatGPT settings:
https://htmlcsstoimage.run.tools
- Open ChatGPT in a browser (chatgpt.com). A Plus, Pro, Business, Enterprise or Edu plan is required.
- Turn on developer mode once: Settings → Apps → Advanced settings → Developer mode.
- Open Settings → Connectors and click Create.
- Fill in the form: Name (anything), Description (one line about what the service does), MCP server URL (copy it below).
- Under Authentication choose OAuth if the service requires sign-in, otherwise None. Click Create.
- In a new chat open + → Apps/Connectors and enable the connector.
OpenAI has renamed this section before (Connectors → Apps/Plugins). If the label differs, search settings for "developer mode". On Business/Enterprise workspaces an admin must allow custom connectors first.
Authorization
On first use ChatGPT opens the service's sign-in window. Sign in and approve access.
How to connect HTML/CSS to Image to Cursor
The server address to paste into Cursor settings:
https://htmlcsstoimage.run.tools
Fastest: click Open in Cursor below and confirm the prompt.
Manually:
- In Cursor open Settings → Cursor Settings → MCP and click Add new global MCP server.
- Paste the JSON copied below into
~/.cursor/mcp.json(per project:.cursor/mcp.jsonin the repo root). - Save the file. The server appears in the MCP list; authorize it there if asked.
Authorization
If the service needs sign-in, an authorize button appears next to the server in the MCP list.
Server tool list (12)
Raw names from tools/list. Only developers need these.
| update_template | Updates a specified template with the given content |
| create_template | Creates a template from the given content |
| create_batch_images | Create a batch of up to 25 images |
| list_storage_destinations | Lists storage destinations available to the current organization. Returns opaque IDs and non-sensitive metadata only; connection details and credentials are never included. |
| create_image | Creates an image from the given content |
| list_proxies | Lists proxies available to the current organization. Returns opaque IDs and non-sensitive metadata only; connection details and credentials are never included. |
| get_max_batch_size | Get the maximum number of images that can be created in a single batch according to the user's plan. |
| list_template_versions | List template versions for a specified template_id |
| check_usage | Checks the current usage of images against the account's usage limits |
| list_templates | List templates |
| create_templated_image | Creates an image using a specified Template |
| create_url_image | Creates an image from the given URL |