@codetoimage/mcp-server

README.md

# @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

Deploy Server

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A4.6/5.0

Scored 2026-07-30 02:20 across 2 tools

Disambiguation5/5

The two tools have clearly distinct purposes: one returns inline image data, the other a temporary URL. Their descriptions explicitly contrast when to use each, leaving no ambiguity.

Naming Consistency5/5

Both tool names follow the exact pattern 'render_html_to_X', where X is the output type (image vs url). The naming is perfectly consistent and descriptive.

Tool Count5/5

With only two tools, the server is tightly scoped to its single purpose of rendering HTML to images. Each tool covers a necessary output format, so the count is ideal.

Completeness5/5

For a server focused solely on rendering HTML to images, offering both inline and URL outputs covers all common use cases. There are no missing features or dead ends.

Maintenance

ActivityInactive

ResponsivenessNo issues

Resources

Need Help?

Related Servers