# Render MCP

> HTML-to-image API and MCP server. Send HTML/CSS or a template name with JSON data, get back a hosted PNG or SVG URL in under a second. Built for AI agents: deterministic output, compact JSON responses. Free beta; an API key (free, created with just an email) is required, sent ONLY as an Authorization: Bearer header, never in the request body or a tool argument.

Base URL: https://rendermcp.com
MCP endpoint (Streamable HTTP): https://rendermcp.com/mcp
OpenAPI spec: https://rendermcp.com/openapi.json

## Quick start (agents)

1. Create a key once: POST https://rendermcp.com/v1/keys with {"email": "you@example.com"} -> {"api_key": "rmcp_...", "key_id": "..."} (via MCP use the rendermcp_create_key tool; 300 free renders/month, shared across every key on the account). Only works for a brand-new email; it errors on purpose if the email is already registered.
2. Render: POST https://rendermcp.com/v1/render with header "Authorization: Bearer rmcp_..." and body {"template": "og-image", "data": {"title": "Hello"}} -> {"url": "...", "width": 1200, "height": 630, "format": "png", "render_ms": 95}
3. Raw HTML instead of a template: same header, body {"html": "<div style=\"display:flex\">...</div>", "css": "...", "width": 1200, "height": 630}
4. Add "response": "image" to receive raw bytes instead of JSON.
5. Hosted images live at https://rendermcp.com/r/{id}.{ext} for 24 hours, then expire. Re-render whenever you need a fresh URL.
6. Usage stats: GET https://rendermcp.com/v1/usage with Authorization: Bearer <key> -> renders this month, total, account creation date, and the account's active key list.
7. An account can hold multiple named keys (e.g. "laptop", "CI"), each individually revocable, up to 10 active at a time. Adding, listing, or revoking keys is REST/UI-only (POST/GET/DELETE https://rendermcp.com/v1/keys, and https://rendermcp.com/account, https://rendermcp.com/start), not exposed as an MCP tool: agents should never mutate a person's credentials on their own. If a render call fails with an unknown/revoked key, tell the person to get a new one at https://rendermcp.com/start or https://rendermcp.com/account rather than trying to fix it yourself.
8. Lost every key? POST https://rendermcp.com/v1/magic-link {"email": "..."} emails a 15-minute link to https://rendermcp.com/account (only if that email has an account; the response is identical either way). From there, view usage, add a new key, or revoke any key without holding one. The link stays valid for repeat actions within the 15 minutes, so several keys can be managed in one visit.

## Templates (27)

- og-image (1200x630): Open Graph / social share image: big title, optional subtitle, brand bar. 1200x630.
- metric-card (1200x630): KPI / metric card: label, big value, change vs previous period with up or down color. 1200x630.
- tweet-card (1200x675): Social post screenshot card (X/Twitter style): avatar, name, handle, post text, engagement row. The classic repost-to-LinkedIn/Instagram format. 1200x675.
- quote-card (1080x1080): Square quote card for feeds and carousels: oversized quotation, author, role. Evergreen viral format. 1080x1080.
- code-card (1200x630): Carbon-style code snippet card: editor window with traffic lights, filename, monospace code. The shareable dev format. 1200x630 default.
- carousel-slide (1080x1080): Square slide for LinkedIn document posts / Instagram carousels (the highest-engagement organic format): kicker, slide number, big statement, footer handle. Make one per point. 1080x1080.
- testimonial-card (1200x630): Social-proof testimonial: star rating, quote, avatar, name, role/company. Landing pages, case-study posts, review roundups. 1200x630.
- case-study-card (1200x630): Dark case-study hook card: kicker, byline, two-line punch headline (second line in the brand color), author photo, and a bottom badge with description. Newsletter promos, 'I did X, here's how' posts, case-study threads. 1200x630.
- announcement-card (1200x630): Product launch / changelog / feature announcement: badge, headline, description, site. Product Hunt launches, release notes, feature drops. 1200x630.
- bar-chart (1200x630): Clean bar chart card from labels and values: title, bars with value labels, footer. All math computed in code, deterministic. 1200x630.
- blog-header (1200x630): Blog post header / featured image: category tag, title, author and read time. Doubles as the link-share image. 1200x630.
- story-card (1080x1920): Portrait story for Instagram/TikTok/WhatsApp (9:16): kicker, big statement, CTA pill, handle. Stories are daily-volume content for every brand. 1080x1920.
- youtube-thumbnail (1280x720): YouTube thumbnail (16:9): 3-5 huge words, accent underline, optional episode tag. Built for legibility at feed size. 1280x720.
- sale-promo (1080x1080): Sale / discount promo square: giant offer, product line, promo code chip, urgency. The ecommerce workhorse. 1080x1080.
- event-card (1200x630): Event / webinar invite: title, date, time, host, CTA. Launch weeks, webinars, meetups, spaces. 1200x630.
- hiring-card (1080x1080): We're hiring announcement: role, location/remote, comp line, apply CTA. LinkedIn's most reshared company post type. 1080x1080.
- tips-list (1080x1080): Numbered tips / listicle square: title plus up to 5 tips. The classic save-worthy educational format. 1080x1080.
- before-after (1080x1080): Before / after comparison square: two labeled columns of points. Transformation proof, process improvements, product pitches. 1080x1080.
- stat-callout (1080x1080): One huge statistic with context, square. Data-led hooks outperform generic claims in feeds. 1080x1080.
- product-card (1200x630): Product feature card: name, tagline, price, up to 3 feature bullets. Launches, marketplaces, comparison posts. 1200x630.
- cta-slide (1080x1080): Carousel end-slide: follow/subscribe CTA with avatar and handle. Every carousel needs one; huge repeat volume. 1080x1080.
- social-post (1080x1080): Single-image social statement post: kicker, one big statement, optional footer handle. For a standalone post, not a slide in a series. 1080x1080.
- meme-card (1080x1080): Classic meme caption format: bold top/bottom caption bars over a solid brand-color background. High organic reach, no design skill required. 1080x1080.
- poll-card (1080x1080): Poll / this-or-that engagement post: a question and 2-4 styled answer options. Polls consistently outperform plain posts for reach. 1080x1080.
- feed-ad (1080x1080): Paid social feed ad: badge, headline, subhead, one prominent CTA button. Built for cold-audience attention, not organic reach. 1080x1080.
- display-banner (300x250): Compact display ad: badge, short headline, small CTA. Sized for the IAB medium rectangle (300x250); pass width/height to render other standard sizes like the 728x90 leaderboard.
- urgency-promo (1080x1080): Limited-time urgency promo: countdown-style deadline as the hero, offer and CTA secondary. Leads with time pressure, not the discount number. 1080x1080.

GET https://rendermcp.com/v1/templates returns full field docs and copy-paste examples.

## MCP tools

Connect via Streamable HTTP: https://rendermcp.com/mcp with an Authorization: Bearer <api_key> header (required). The key is visible once, in rendermcp_create_key's issuance response; after that it is never accepted in tool arguments and does not need to be repeated on render or usage calls.
- rendermcp_create_key: email -> free api_key (shown once; 300 renders/month). Only for a brand-new email; errors if that email is already registered (no rotation/add-key path via MCP, by design).
- rendermcp_render_html: html, css?, width?, height?, format? -> hosted image URL
- rendermcp_render_template: template, data, brand?, width?, height?, format? -> hosted image URL
- rendermcp_list_templates: no args -> template catalog (no key needed)
- rendermcp_usage: no args -> renders this month, lifetime total, remaining quota, and the account's active key list
There is deliberately no MCP tool to add, list, or revoke keys on an existing account: that's REST/UI-only, at https://rendermcp.com/account or https://rendermcp.com/start.

Claude Code (terminal): claude mcp add --transport http rendermcp https://rendermcp.com/mcp --header "Authorization: Bearer <api_key>"
Cursor (edit a file, no terminal command): add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project only): {"mcpServers": {"rendermcp": {"url": "https://rendermcp.com/mcp", "headers": {"Authorization": "Bearer <api_key>"}}}}
Codex CLI (edit a file, no terminal command): add to ~/.codex/config.toml: [mcp_servers.rendermcp] with url = "https://rendermcp.com/mcp", then a [mcp_servers.rendermcp.http_headers] table with Authorization = "Bearer <api_key>"
Claude, no terminal (claude.ai, Claude Desktop, Cowork): Customize -> Connectors -> Add custom connector -> server URL https://rendermcp.com/mcp -> Authentication "None" -> add a Request header named authorization with value "Bearer <api_key>". That Request headers field is a limited Anthropic-side beta; if a user doesn't see it, they need Claude Code (terminal) instead.
Grok (grok.com/connectors): New Connector -> Custom -> paste server URL https://rendermcp.com/mcp -> add an Authorization header with value "Bearer <api_key>". Requires a paid Grok tier; Bring Your Own MCP isn't on the free plan.
None of these can be applied by this MCP connection itself (it has no access to the user's terminal, settings dialogs, or other tools' config files); a human, or a separate coding agent with its own file/shell access, has to apply whichever one matches their tool. Create the key first via rendermcp_create_key or POST /v1/keys if you don't have one yet, then hand the user whichever of these five matches their tool, not just the Claude Code command by default.

## Notes for agents

- CSS support is the Satori subset: flexbox layout only (no CSS grid), inline styles or a <style> block. Every element with children needs display:flex.
- Whitespace between tags in raw HTML becomes flex children and can shift layouts; minify raw HTML for precise rows.
- Fonts available inside renders: Inter (400, 700), JetBrains Mono (400).
- Branding: brand.primary_color (hex) or brand.theme (indigo|emerald|crimson|amber|ocean|mono); brand.name; brand.logo_url (public https image, fetched and inlined, max 2MB) or brand.logo_data (data:image URI) to place a real logo in the template's brand slot.
- Fonts per brand: brand.font switches template typography; whitelist: Inter (default), Plus Jakarta Sans, Space Grotesk, Poppins, Lora, Playfair Display, Merriweather, Outfit. Loaded at 400 + 700.
- Icons: metric-card, announcement-card, and stat-callout accept data.icon with one of 21 built-in names: rocket, chart, bolt, check, star, heart, arrow-up, arrow-down, mail, bell, gift, flame, trophy, clock, shield, sparkles, megaphone, code, globe, users, dollar. Icons render in the brand color. In raw HTML, inline <svg> tags are NOT supported (they render blank); embed any custom icon or vector as an <img> whose src is an SVG data URI (data:image/svg+xml;utf8,...), with explicit width and height.
- SVG output: pass "format": "svg" on any render to get vector output instead of PNG.
- Default size 1200x630, rendered at 2x supersampling by default (a 1200x630 request returns a crisp 2400x1260 PNG). Pass "scale": 1-3 to control it. Max logical size 4096x4096.
- Free beta: key creation is free and instant, and every account gets 300 renders per month (resets on the 1st), shared across all of its keys. Failed renders are not counted. Keys are stored only as hashes; each secret is shown once, at creation, and never again. An account can hold up to 10 active named keys. Email ownership is not verified during the beta. Paid plans with simple credit pricing arrive later.
- MCP tool names are prefixed rendermcp_ to avoid collisions with other installed servers.

## Pages

- [Landing and docs](https://rendermcp.com/)
- [OpenAPI](https://rendermcp.com/openapi.json)
- [Template catalog](https://rendermcp.com/v1/templates)