Code to Image

FreeNot checked

Renders HTML/CSS into pixel-perfect PNG, JPG, or WebP images, returned inline or as a 24-hour hosted URL.

About

Renders HTML/CSS into pixel-perfect PNG, JPG, or WebP images, returned inline or as a 24-hour hosted URL.

README

Official Model Context Protocol server for codetoimage.app – render HTML/CSS to PNG/JPG/WebP directly from Claude Desktop, Claude Code, Cursor, or any MCP-compatible client.

What you get

Two tools, no setup beyond an API key:

render_html_to_image – returns the image inline so your agent (or you, in chat) can see it immediately. Best for "show me the rendered card", OG preview iteration, chart generation, badge mockups.
render_html_to_url – returns a temporary hosted URL (24h TTL). Best when the image needs to live somewhere external – Instagram Graph API, OpenGraph meta tags, Slack unfurls, docs/posts embeds.

Install

You don't need to install anything globally – MCP clients can run it via npx. Get an API key at codetoimage.app/dashboard/keys, then add the config below.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

Restart Claude Desktop. The two tools appear in the tool picker.

Claude Code

claude mcp add codetoimage -s user -- npx -y @codetoimage/mcp-server

Then set the env var in your shell profile (or pass -e CODETOIMAGE_API_KEY=cti_live_… in the claude mcp add call).

Cursor

Edit ~/.cursor/mcp.json:

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

Usage from an agent

The tools are self-documenting – your agent will pick the right one based on intent. Example prompts that just work:

"Render this card as a PNG: <div style='padding:40px;background:#6366f1;color:white;border-radius:16px'>Hello</div> at 800×400."

"Generate an Open Graph image for the blog post 'Why agents need pixel-perfect rendering' and give me a URL I can paste into the og:image meta tag."

"Take this CSS card and render it as a transparent PNG so I can use it on a dark background."

"Render my saved template 3f2a91d0-... with title 'Launch day' as an Instagram story."

Tool schemas

`render_html_to_image`

Field	Type	Required	Notes
`html`	string	✓*	Full HTML (typically with `<body>`). *Not needed with `template_id`
`css`	string	–	Optional CSS injected as `<style>`
`template_id`	uuid	✓*	Saved template from the dashboard (Templates page); alternative to `html`
`variables`	object	–	Values for `{{placeholders}}` in the template (HTML-escaped)
`preset`	enum	–	Named size: `og`, `twitter-card`, `facebook-post`, `linkedin-post`, `instagram-square`, `instagram-portrait`, `instagram-story`, `youtube-thumbnail`, `pinterest-pin`
`width`	integer 1-2048	–	Default 800; overrides `preset`
`height`	integer 1-2048	–	Default 600; overrides `preset`
`format`	`png` \| `jpeg` \| `webp`	–	Default `png`
`quality`	integer 1-100	–	JPEG/WebP only
`transparent`	boolean	–	PNG/WebP, paid plans
`background`	string	–	e.g. `#ffffff` or `rgb(…)`

Returns: image content (base64 inline), rendered in the chat.

`render_html_to_url`

Same input schema as render_html_to_image. Returns a text block with:

url – temporary hosted image URL
format – final output format
expires_at – ISO timestamp (24h from render)
credits_remaining – your plan's quota state

Configuration

Variable	Default	Purpose
`CODETOIMAGE_API_KEY`	–	Required. Get one at codetoimage.app/dashboard/keys
`CODETOIMAGE_API_URL`	`https://api.codetoimage.app`	API base URL (override for dev/proxy)

Plans + limits

Free – 50 renders/month, no watermark, full features (up to 2048×2048, all formats).
Paid (Starter / Hobby / Pro / Scale) – from $9/mo for 1,000 renders up to 50,000/month, higher rate limits.
Pay as you go – prepaid credit packs from $5, valid 12 months, no subscription.

Pricing: codetoimage.app/#pricing

Web dashboard + REST API
@codetoimage/cli – terminal/CI usage

License

MIT

from github.com/beznazwiska/codetoimage-mcp-server

Install Code to Image in Claude Desktop, Claude Code & Cursor

Recommended · one command, every IDE

unyly install code-to-image

Installs into Claude Desktop, Claude Code, Cursor & VS Code — handles npx, uvx and build-from-source repos for you.

First time? Get the CLI: curl -fsSL https://unyly.org/install | sh

Or configure manually

Run in your terminal:

claude mcp add code-to-image -- npx -y @codetoimage/mcp-server

Step-by-step: how to install Code to Image

Install Code to Image in Claude Desktop Install Code to Image in Claude Code Install Code to Image in Cursor Install Code to Image in VS Code

FAQ

Is Code to Image MCP free?

Yes, Code to Image MCP is free — one-click install via Unyly at no cost.

Does Code to Image need an API key?

No, Code to Image runs without API keys or environment variables.

Is Code to Image hosted or self-hosted?

Self-hosted: the server runs locally on your machine via the install command above.

How do I install Code to Image in Claude Desktop, Claude Code or Cursor?

Open Code to Image on unyly.org, pick your client tab (Claude Desktop, Claude Code, Cursor) and press Install — the config is generated automatically, no JSON editing.

Related MCPs

GitHub

PRs, issues, code search, CI status

by GitHub

Filesystem

Secure file operations with configurable access controls.

by Community

Memory

Knowledge graph-based persistent memory system.

by Community

Template MCP Server

A CLI tool to create a new Model Context Protocol server project with TypeScript support, dual transport options, and an extensible structure

by mcpdotdirect

Compare Code to Image with

Code to ImagevsGitHub Code to ImagevsFilesystem Code to ImagevsMemory Code to ImagevsTemplate MCP Server

Not sure what to pick?

Find your stack in 60 seconds

Author?

Embed badge for your README

Browse similar

All development MCPs