Skip to content
MCP ThesaurusMCP Thesaurus

codetoimage mcp server

CommunityIncomplete39/100Claim

npm @codetoimage/mcp-serverstdioupdated 1mo ago

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.

SourceWebsite

What can you do with codetoimage mcp server?

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

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

Related

License

MIT