Claude & Claude Code 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 Claude or Claude Code to HCTI
Claude web or desktop
HTML/CSS to Image is available in the Claude Connectors Directory.
- Open Customize → Connectors, click +, and choose Browse connectors.
- Search for HTML/CSS to Image and open its listing.
- Select Connect and sign in to your HCTI account.
- Enable the connector in your conversation and ask Claude to use HCTI.
Connect manually instead
In Customize → Connectors, choose Add custom connector and enter https://mcp.hcti.io. Add it, then select Connect to authorize your account.
Custom connector availability depends on your plan. For Team and Enterprise accounts, an owner may need to configure access. See Claude’s remote connector instructions.
How to set up Claude Code
Add the remote server from your terminal:
claude mcp add --transport http hcti https://mcp.hcti.io
claude mcp list
Open Claude Code, run /mcp, select hcti, and complete browser authentication. This adds the server for the current project context. See Claude Code’s MCP guide for user-wide and shared project scopes.
If HTML/CSS to Image is available in your Claude Code plugin marketplace, you can install that package instead; it includes HCTI workflow guidance. Connect its server through /mcp. Use the direct command above if the listing is not available, and avoid adding the same server twice.
In either client, ask “Use HCTI to check my image usage and account limits”. The usage response confirms that Claude can reach your account.
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 turn a report into a PDF
Paste your report into Claude, then ask:
Format this report as HTML/CSS with headings and a table. Use HCTI with format="pdf" to render it and return the PDF URL. Report: January revenue $12,000; February $14,500; March $16,200.
In Claude Code, you can instead point to a report file in the current project and ask Claude to read it before rendering.
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
In Claude web/desktop, check that the connector is connected and available in the current conversation. In Claude Code, inspect /mcp and authenticate hcti. If a shared workspace does not allow adding connectors, its owner needs to configure access.
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.