Login Get started
Get started
Login Get started
Home / Docs / MCP Server | HTML to Image Docs

MCP Server

The HTML to Image MCP server lets an AI assistant generate images by writing HTML and CSS, then seeing the rendered result. It speaks the Model Context Protocol, so any MCP-compatible client (Claude Code, Claude Desktop, Cursor, VS Code, Windsurf, Gemini CLI, Codex and more) can call it directly inside a conversation.

It is the same render engine and the same credits as the REST API. The only difference is who calls it: instead of your code, your AI agent does.

At a glance

Endpointhttps://app.html2img.com/mcp
TransportStreamable HTTP
AuthenticationAuthorization: Bearer YOUR_API_KEY
Toolsgenerate-image-from-html, screenshot-url
Cost1 credit per generated image
PlanPaid plans only

The MCP server is available on paid plans. The free tier does not include MCP access. See pricing to pick a plan, then create a key on the API keys page.

How it works

  1. You connect the server to your AI client once, using an API key as a bearer token.
  2. In any conversation, you ask the assistant for an image (“make me a launch announcement card”, “screenshot this page”).
  3. The assistant writes the HTML/CSS (or picks a URL) and calls a tool.
  4. We render it in real Chrome and return a CDN URL plus a downscaled preview, so the model can review its own output and refine it.

Two tools

  • generate-image-from-html turns HTML and CSS into a PNG or PDF. Best for cards, invoices, OG images, certificates, anything the model can design.
  • screenshot-url captures a screenshot of a live web page by URL.

See the tools reference for every parameter, or jump straight to install and setup for your client.

Quick start (Claude Code)

claude mcp add --transport http html2img https://app.html2img.com/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

Then ask Claude to “generate an image from this HTML” and it will use the tool. For every other client, see install and setup.

Writing HTML that renders correctly

The renderer does not load remote images. Any <img src="https://..."> is skipped. Embed images as base64 data URIs (data:image/png;base64,...) instead. Tell your assistant this once and it will follow it.

A few tips to pass along to your AI:

  • Send complete, self-contained HTML with styles in an inline <style> block.
  • Use the width and height arguments to control the canvas; use fullpage for tall content.
  • Google Fonts load server-side, so @import in your CSS works.

Where to get help in the app

Signed-in users get a ready-to-paste setup page at app.html2img.com/mcp-setup, with your endpoint and a key picker that fills in the config for Claude Code, Claude Desktop and Cursor.

Next steps