# codetoimage-mcp-server [Health: Active]
**Category:** 💻 Developer Tools
**Repository:** https://github.com/beznazwiska/codetoimage-mcp-server
**GitHub Stars:** 0
**Views:** 0
**Installs:** 0
**Upvotes:** 0
**Directory Page:** https://allmcps.com/mcp/codetoimage-mcp-server
## Description
Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.
## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):
```json
"mcpServers": {
"codetoimage-mcp-server": {
"command": "npx",
"args": ["-y","@codetoimage/mcp-server"]
}
}
```
## Documentation & README
# @codetoimage/mcp-server
Official [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.
## 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](https://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: `Hello
` 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 ``). *Not needed with `template_id` |
| `css` | string | – | Optional CSS injected as `