io.github.beznazwiska/codetoimage-mcp-server
Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.
Open source Open in the app JSON README (API)
About
Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.
Details
- Kind
- MCP servers
- Topic
- No topic detected
- Publisher
- beznazwiska
- Origin
- official
- Category
- ferramentas
- Transport
- local
- Version
- 0.2.0
- Last push
- 2026-07-11T09:18:04Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-08-29 03:02:30
- Updated
- 2026-08-29 03:02:30
- Origin id
io.github.beznazwiska/codetoimage-mcp-server
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: `<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](https://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](https://codetoimage.app/#pricing)
## Related
- [Web dashboard + REST API](https://codetoimage.app)
- [`@codetoimage/cli`](https://www.npmjs.com/package/@codetoimage/cli) – terminal/CI usage
## License
MIT