Codetoimage Mcp Server

io.github.beznazwiskaPublished by GitHub account beznazwiskav0.2.0Updated Oct 24, 2026

Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

Renders HTML/CSS into PNG, JPEG or WebP images, returning them inline or as a temporary hosted URL.

What you can do
This local MCP server exposes two tools for turning HTML and CSS into images. render_html_to_image returns the rendered image inline so the assistant or user can see it immediately, while render_html_to_url returns a temporary hosted URL valid for 24 hours. Both accept full HTML, optional CSS, named social-media presets or explicit dimensions up to 2048x2048, and PNG, JPEG or WebP output. Saved dashboard templates can be used instead of raw HTML, with placeholder variables.
When to use it
Useful when an assistant needs to produce visual output such as Open Graph previews, social cards, badges, charts or mockups, and either show the image in chat or hand back a link for embedding in meta tags, posts or messaging unfurls.
Requirements
Runs locally over stdio, typically launched with npx, so Node.js is needed. Requires a CODETOIMAGE_API_KEY from the provider's dashboard; the optional CODETOIMAGE_API_URL overrides the API base URL. Network access to the rendering API is required. Desktop MCP clients only.
Before you install
The API key is a secret passed via the CODETOIMAGE_API_KEY environment variable and should not be committed to shared config files. Rendered HTML and any template variables are sent to a third-party rendering service. Hosted URLs expire after 24 hours. Free tier is limited to 50 renders per month; paid plans and prepaid credit packs cost money, and transparent output requires a paid plan.

Installation

In SourceWeft

  1. Open Codetoimage Mcp Server in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

@codetoimage/mcp-server

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):

json
{  "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

bash
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:

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

FieldTypeRequiredNotes
htmlstring✓*Full HTML (typically with <body>). *Not needed with template_id
cssstring–Optional CSS injected as <style>
template_iduuid✓*Saved template from the dashboard (Templates page); alternative to html
variablesobject–Values for {{placeholders}} in the template (HTML-escaped)
presetenum–Named size: og, twitter-card, facebook-post, linkedin-post, instagram-square, instagram-portrait, instagram-story, youtube-thumbnail, pinterest-pin
widthinteger 1-2048–Default 800; overrides preset
heightinteger 1-2048–Default 600; overrides preset
formatpng | jpeg | webp–Default png
qualityinteger 1-100–JPEG/WebP only
transparentboolean–PNG/WebP, paid plans
backgroundstring–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

VariableDefaultPurpose
CODETOIMAGE_API_KEY–Required. Get one at codetoimage.app/dashboard/keys
CODETOIMAGE_API_URLhttps://api.codetoimage.appAPI 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

Related

License

MIT

Source: README.md at commit ea00517

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v0.2.0LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts