# 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://www.rendermcp.com
MCP endpoint (Streamable HTTP): https://www.rendermcp.com/mcp
OpenAPI spec: https://www.rendermcp.com/openapi.json

## Quick start (agents)

1. Create a key once: POST https://www.rendermcp.com/v1/keys with {"email": "you@example.com"} -> {"api_key": "rmcp_..."} (via MCP use the rendermcp_create_key tool; 50 free renders/month). Rotating an existing account's key requires the current key as the Authorization: Bearer header on that request. Lost keys cannot be recovered during the beta.
2. Render: POST https://www.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://www.rendermcp.com/r/{id}.{ext} for 24 hours, then expire. Re-render whenever you need a fresh URL.
6. Usage stats: GET https://www.rendermcp.com/v1/usage with Authorization: Bearer <key> -> renders this month and total.

## Templates (20)

- 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.
- 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.

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

## MCP tools

Connect via Streamable HTTP: https://www.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; 50 renders/month). Works without a header for a brand-new email; rotating an existing one requires the current key already on the connection's header.
- 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

Claude Code: claude mcp add --transport http rendermcp https://www.rendermcp.com/mcp --header "Authorization: Bearer <api_key>"
(Create the key first via rendermcp_create_key or POST /v1/keys if you don't have one yet, then connect with it.)

## 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 50 renders per month (resets on the 1st). Failed renders are not counted. Keys are stored only as hashes; the secret is shown once; rotation requires the current key. 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://www.rendermcp.com/)
- [OpenAPI](https://www.rendermcp.com/openapi.json)
- [Template catalog](https://www.rendermcp.com/v1/templates)