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."

Tool schemas

`render_html_to_image`

Field	Type	Required	Notes
`html`	string	✓	Full HTML (typically with `<body>`)
`css`	string	–	Optional CSS injected as `<style>`
`width`	integer 1-2048	–	Default 800
`height`	integer 1-2048	–	Default 600
`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

Sandbox (free) — 50 renders/month, watermarked, max 800×800, PNG only. Test integration end-to-end before paying.
Paid (Hobby / Pro / Scale) — clean output, up to 2048×2048, all formats, transparent backgrounds.

Pricing: codetoimage.app/#pricing

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

License

MIT

Keywords

mcp

model-context-protocol

FAQs

What is @codetoimage/mcp-server?

Is @codetoimage/mcp-server popular?

Is @codetoimage/mcp-server well maintained?

Package last updated on 28 May 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@codetoimage/mcp-server