Give Claude an image rendering tool in 60 seconds.
The official MCP server for codetoimage.app gives any MCP-aware AI client — Claude Desktop, Cursor, Windsurf, Cline, Zed — two tools:render_html_to_image (inline) and render_html_to_url (24h hosted). Your agent picks the right one based on intent.
Two tools, two intents
render_html_to_imageReturns the rendered image inline as base64 image content. The model can see the result in the same conversation turn. Use for preview iteration, "show me the card" flows, chart generation, badge mockups.
render_html_to_urlReturns a temporary public URL (24h TTL, CDN-served). Use when the image needs to live somewhere external — Instagram Graph API, OpenGraph meta tags, Slack unfurls, docs embeds.
Install per client
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 \
-e CODETOIMAGE_API_KEY=cti_live_... \
-- npx -y @codetoimage/mcp-serverCursor
Edit ~/.cursor/mcp.json:
{
"mcpServers": {
"codetoimage": {
"command": "npx",
"args": ["-y", "@codetoimage/mcp-server"],
"env": { "CODETOIMAGE_API_KEY": "cti_live_..." }
}
}
}Prompts that just work
The tool descriptions are intent-aware so the model picks the right one without you telling it which. Try these in any MCP client after install:
“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 this React snippet as a code screenshot for my LinkedIn post, 1200×630.”
Why this beats wiring a hosted MCP
Discovered by name
Listed at registry.modelcontextprotocol.io. Clients that index the official registry install us as a typeahead suggestion.
Local stdio, no OAuth
Runs locally via npx — one env var, no OAuth dance, no redirect URIs. Easier to debug, fewer moving parts.
Two clean tools
Inline image vs hosted URL. Less surface area for the model to misuse. Bigger MCP servers expose 9+ tools — more confusion, more wrong calls.
FAQ
What is MCP and why does codetoimage need one?▾
MCP (Model Context Protocol) is Anthropic's open standard for connecting AI assistants to external tools. With our MCP server installed, Claude Desktop, Cursor, Windsurf, Cline, Zed and other clients can render HTML/CSS to images directly — your agent decides when to invoke it, the rendered image flows back into the conversation.
Which MCP clients support codetoimage?▾
Any client that supports stdio MCP servers. Verified: Claude Desktop, Claude Code, Cursor. Should work without changes: Windsurf, Cline, Zed, OpenCode, and anything else that runs MCP servers via stdio.
How is this different from htmlcsstoimage's MCP?▾
htmlcsstoimage runs a hosted MCP at mcp.hcti.io which requires OAuth setup and exposes 9 tools. Ours runs locally via npx with a single env var (CODETOIMAGE_API_KEY), exposes 2 well-named tools (render_html_to_image, render_html_to_url), and is listed in Anthropic's official MCP Registry — discoverable by name instead of manual URL config.
Will my API key be exposed to the model?▾
No — the key lives in your MCP client's local config (e.g. claude_desktop_config.json `env` field) and is read by the MCP server process when it starts. The model only sees tool inputs and outputs (HTML in, image bytes out), never the key.
Is there a cost difference vs using the REST API?▾
No — both surfaces consume the same credit pool. One render = one credit, regardless of whether it came from REST, the CLI, or MCP. The Sandbox tier (50/mo free) and all paid tiers work identically across all three.
Plug it into your agent
Free Sandbox tier: 50 renders/month, no credit card.