---
title: "MCP Server"
description: "Connect HTML to Image to your AI assistant over the Model Context Protocol. Let Claude, Cursor and other agents generate images from HTML they write."
url: "https://html2img.com/docs/mcp/"
---

# 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](https://modelcontextprotocol.io/), 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

| | |
|---|---|
| **Endpoint** | `https://app.html2img.com/mcp` |
| **Transport** | Streamable HTTP |
| **Authentication** | `Authorization: Bearer YOUR_API_KEY` |
| **Tools** | `generate-image-from-html`, `screenshot-url` |
| **Cost** | 1 credit per generated image |
| **Plan** | Paid plans only |

> **Important**
>
> The MCP server is available on paid plans. The free tier does not include MCP access. See [pricing](https://html2img.com/pricing/) to pick a plan, then create a key on the [API keys page](https://app.html2img.com/api-keys).

## 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](https://html2img.com/docs/mcp/tools/) for every parameter, or jump straight to [install and setup](https://html2img.com/docs/mcp/installation/) for your client.

## Quick start (Claude Code)

```bash
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](https://html2img.com/docs/mcp/installation/).

## Writing HTML that renders correctly

> **Note**
>
> Remote images load fine - `<img src="https://...">` works as long as the URL is publicly accessible, and base64 data URIs (`data:image/png;base64,...`) work too when the asset is not hosted anywhere. Data URIs are the more reliable choice for AI-generated pages, since the model cannot invent a URL that 404s.

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](https://app.html2img.com/mcp-setup), with your endpoint and a key picker that fills in the config for Claude Code, Claude Desktop and Cursor.

To check your credit balance mid-session, call [`GET /api/me`](https://html2img.com/docs/account/) with your API key - it reports the plan, balance and renewal date without spending a credit.

## Next steps

- [Tools reference](https://html2img.com/docs/mcp/tools/) - parameters, output and credits.
- [Install and setup](https://html2img.com/docs/mcp/installation/) - per-client configuration.
- [The MCP page](https://html2img.com/mcp/) - what you can build, with examples.