{
"markdown": "# @codetoimage/mcp-server\n\nOfficial [Model Context Protocol](https://modelcontextprotocol.io) server for [codetoimage.app](https://codetoimage.app) – render HTML/CSS to PNG/JPG/WebP directly from Claude Desktop, Claude Code, Cursor, or any MCP-compatible client.\n\n## What you get\n\nTwo tools, no setup beyond an API key:\n\n- **`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.\n- **`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.\n\n## Install\n\nYou don't need to install anything globally – MCP clients can run it via `npx`. Get an API key at [codetoimage.app/dashboard/keys](https://codetoimage.app/dashboard/keys), then add the config below.\n\n### Claude Desktop\n\nEdit `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\\Claude\\claude_desktop_config.json` (Windows):\n\n```json\n{\n \"mcpServers\": {\n \"codetoimage\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@codetoimage/mcp-server\"],\n \"env\": {\n \"CODETOIMAGE_API_KEY\": \"cti_live_...\"\n }\n }\n }\n}\n```\n\nRestart Claude Desktop. The two tools appear in the tool picker.\n\n### Claude Code\n\n```bash\nclaude mcp add codetoimage -s user -- npx -y @codetoimage/mcp-server\n```\n\nThen set the env var in your shell profile (or pass `-e CODETOIMAGE_API_KEY=cti_live_…` in the `claude mcp add` call).\n\n### Cursor\n\nEdit `~/.cursor/mcp.json`:\n\n```json\n{\n \"mcpServers\": {\n \"codetoimage\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@codetoimage/mcp-server\"],\n \"env\": {\n \"CODETOIMAGE_API_KEY\": \"cti_live_...\"\n }\n }\n }\n}\n```\n\n## Usage from an agent\n\nThe tools are self-documenting – your agent will pick the right one based on intent. Example prompts that just work:\n\n> \"Render this card as a PNG: `Hello
` at 800×400.\"\n\n> \"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.\"\n\n> \"Take this CSS card and render it as a transparent PNG so I can use it on a dark background.\"\n\n> \"Render my saved template 3f2a91d0-... with title 'Launch day' as an Instagram story.\"\n\n## Tool schemas\n\n### `render_html_to_image`\n\n| Field | Type | Required | Notes |\n|---|---|---|---|\n| `html` | string | ✓* | Full HTML (typically with ``). *Not needed with `template_id` |\n| `css` | string | – | Optional CSS injected as `