@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-serverThen 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 URLformat– final output formatexpires_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
- Web dashboard + REST API
@codetoimage/cli– terminal/CI usage
License
MIT
