Render MCP

Transforme dados estruturados ou HTML em imagens PNG ou SVG polidas e hospedadas em menos de um segundo.

Ver em rendermcp.com

Documentação

Render MCP

API de HTML para imagem e servidor MCP. Envie HTML/CSS ou um nome de template com dados JSON, receba uma URL de PNG ou SVG hospedado em menos de um segundo. Feito para agentes de IA: saída determinística, respostas JSON compactas. Beta gratuito; uma chave de API (gratuita, criada apenas com um e-mail) é necessária, enviada SOMENTE como cabeçalho Authorization: Bearer, nunca no corpo da requisição ou em um argumento de ferramenta.

URL base: https://rendermcp.com Endpoint MCP (HTTP Streamable): https://rendermcp.com/mcp Especificação OpenAPI: https://rendermcp.com/openapi.json

Início rápido (agentes)

  1. Crie uma chave uma vez: POST https://rendermcp.com/v1/keys com {"email": "you@example.com"} -> {"api_key": "rmcp_...", "key_id": "..."} (via MCP use a ferramenta rendermcp_create_key; 300 renders gratuitos/mês, compartilhados entre todas as chaves da conta). Funciona apenas para um e-mail novo; gera erro propositalmente se o e-mail já estiver registrado.
  2. Renderize: POST https://rendermcp.com/v1/render com cabeçalho "Authorization: Bearer rmcp_..." e corpo {"template": "og-image", "data": {"title": "Hello"}} -> {"url": "...", "width": 1200, "height": 630, "format": "png", "render_ms": 95}
  3. HTML bruto em vez de template: mesmo cabeçalho, corpo {"html": "<div style="display:flex">...", "css": "...", "width": 1200, "height": 630}
  4. Adicione "response": "image" para receber bytes brutos em vez de JSON.
  5. Imagens hospedadas ficam em https://rendermcp.com/r/{id}.{ext} por 24 horas e depois expiram. Re-renderize sempre que precisar de uma URL nova.
  6. Estatísticas de uso: GET https://rendermcp.com/v1/usage com Authorization: Bearer -> renders deste mês, total, data de criação da conta e lista de chaves ativas da conta.
  7. Uma conta pode ter várias chaves nomeadas (ex.: "laptop", "CI"), cada uma revogável individualmente, até 10 ativas por vez. Adicionar, listar ou revogar chaves é somente via REST/UI (POST/GET/DELETE https://rendermcp.com/v1/keys, e https://rendermcp.com/account, https://rendermcp.com/start), não exposto como ferramenta MCP: agentes nunca devem alterar credenciais de uma pessoa por conta própria. Se uma chamada de render falhar com chave desconhecida/revogada, diga à pessoa para obter uma nova em https://rendermcp.com/start ou https://rendermcp.com/account em vez de tentar corrigir você mesmo.
  8. Perdeu todas as chaves? POST https://rendermcp.com/v1/magic-link {"email": "..."} envia por e-mail um link válido por 15 minutos para https://rendermcp.com/account (somente se esse e-mail tiver uma conta; a resposta é idêntica em ambos os casos). A partir daí, veja o uso, adicione uma nova chave ou revogue qualquer chave sem precisar ter uma. O link permanece válido para ações repetidas dentro dos 15 minutos, então várias chaves podem ser gerenciadas em uma única visita.

Templates (27)

  • og-image (1200x630): Imagem Open Graph / compartilhamento social: título grande, subtítulo opcional, barra de marca. 1200x630.
  • metric-card (1200x630): Cartão de KPI / métrica: rótulo, valor grande, variação vs. período anterior com cor de alta ou baixa. 1200x630.
  • tweet-card (1200x675): Captura de tela de post social (estilo X/Twitter): avatar, nome, handle, texto do post, linha de engajamento. O formato clássico de repost para LinkedIn/Instagram. 1200x675.
  • quote-card (1080x1080): Cartão de citação quadrado para feeds e carrosséis: aspas grandes, autor, cargo. Formato viral atemporal. 1080x1080.
  • code-card (1200x630): Cartão de snippet de código estilo Carbon: janela de editor com luzes de tráfego, nome do arquivo, código monoespaçado. O formato compartilhável para devs. 1200x630 padrão.
  • carousel-slide (1080x1080): Slide quadrado para posts de documento no LinkedIn / carrosséis do Instagram (o formato orgânico de maior engajamento): chamada, número do slide, declaração grande, handle no rodapé. Faça um por ponto. 1080x1080.
  • testimonial-card (1200x630): Depoimento de prova social: avaliação por estrelas, citação, avatar, nome, cargo/empresa. Landing pages, posts de estudo de caso, resumos de avaliações. 1200x630.
  • case-study-card (1200x630): Cartão escuro de gancho de estudo de caso: chamada, linha de autoria, manchete de duas linhas (segunda linha na cor da marca), foto do autor e um selo inferior com descrição. Promoções de newsletter, posts "fiz X, veja como", threads de estudo de caso. 1200x630.
  • announcement-card (1200x630): Lançamento de produto / changelog / anúncio de recurso: selo, manchete, descrição, site. Lançamentos no Product Hunt, notas de versão, lançamentos de recursos. 1200x630.
  • bar-chart (1200x630): Cartão de gráfico de barras limpo a partir de rótulos e valores: título, barras com rótulos de valor, rodapé. Toda a matemática calculada em código, determinística. 1200x630.
  • blog-header (1200x630): Cabeçalho de post de blog / imagem em destaque: tag de categoria, título, autor e tempo de leitura. Também serve como imagem de compartilhamento de link. 1200x630.
  • story-card (1080x1920): Story vertical para Instagram/TikTok/WhatsApp (9:16): chamada, declaração grande, pílula de CTA, handle. Stories são conteúdo de volume diário para toda marca. 1080x1920.
  • youtube-thumbnail (1280x720): Miniatura do YouTube (16:9): 3-5 palavras enormes, sublinhado de destaque, tag de episódio opcional. Feito para legibilidade no tamanho do feed. 1280x720.
  • sale-promo (1080x1080): Quadrado de promoção de venda/desconto: oferta gigante, linha de produto, chip de código promocional, urgência. O cavalo de batalha do ecommerce. 1080x1080.
  • event-card (1200x630): Convite de evento/webinar: título, data, hora, anfitrião, CTA. Semanas de lançamento, webinars, meetups, espaços. 1200x630.
  • hiring-card (1080x1080): Anúncio "Estamos contratando": cargo, local/remoto, linha de remuneração, CTA de candidatura. O tipo de post de empresa mais compartilhado no LinkedIn. 1080x1080.
  • tips-list (1080x1080): Lista numerada de dicas / quadrado de listicle: título mais até 5 dicas. O formato educacional clássico que vale salvar. 1080x1080.
  • before-after (1080x1080): Quadrado de comparação antes/depois: duas colunas rotuladas de pontos. Prova de transformação, melhorias de processo, pitches de produto. 1080x1080.
  • stat-callout (1080x1080): Uma estatística enorme com contexto, quadrado. Ganchos baseados em dados superam afirmações genéricas nos feeds. 1080x1080.
  • product-card (1200x630): Cartão de recurso de produto: nome, tagline, preço, até 3 bullets de recursos. Lançamentos, marketplaces, posts de comparação. 1200x630.
  • cta-slide (1080x1080): Slide final de carrossel: CTA de seguir/assinar com avatar e handle. Todo carrossel precisa de um; volume enorme de repetição. 1080x1080.
  • social-post (1080x1080): Post de declaração social em imagem única: chamada, uma declaração grande, handle opcional no rodapé. Para um post independente, não um slide em uma série. 1080x1080.
  • meme-card (1080x1080): Formato clássico de legenda de meme: barras de legenda em negrito no topo/base sobre fundo sólido na cor da marca. Alto alcance orgânico, sem necessidade de habilidade de design. 1080x1080.
  • poll-card (1080x1080): Post de enquete / isto-ou-aquilo para engajamento: uma pergunta e 2-4 opções de resposta estilizadas. Enquetes consistentemente superam posts simples em alcance. 1080x1080.
  • feed-ad (1080x1080): Anúncio pago de feed social: selo, manchete, subtítulo, um botão de CTA proeminente. Feito para atenção de audiência fria, não alcance orgânico. 1080x1080.
  • display-banner (300x250): Anúncio display compacto: selo, manchete curta, CTA pequeno. Dimensionado para o retângulo médio IAB (300x250); passe width/height para renderizar outros tamanhos padrão como o leaderboard 728x90.
  • urgency-promo (1080x1080): Promoção de urgência por tempo limitado: prazo estilo contagem regressiva como herói, oferta e CTA secundários. Lidera com pressão de tempo, não com o número do desconto. 1080x1080.

GET https://rendermcp.com/v1/templates retorna documentação completa dos campos e exemplos copiáveis.

Ferramentas MCP

Conecte via HTTP Streamable: https://rendermcp.com/mcp com cabeçalho Authorization: Bearer <api_key> (obrigatório). A chave é visível uma única vez, na resposta de emissão do rendermcp_create_key; depois disso nunca é aceita em argumentos de ferramenta e não precisa ser repetida em chamadas de render ou uso.

  • rendermcp_create_key: email -> api_key gratuita (mostrada uma vez; 300 renders/mês). Somente para e-mail novo; gera erro se esse e-mail já estiver registrado (sem caminho de rotação/adição de chave via MCP, por design).
  • rendermcp_render_html: html, css?, width?, height?, format? -> URL de imagem hospedada
  • rendermcp_render_template: template, data, brand?, width?, height?, format? -> URL de imagem hospedada
  • rendermcp_list_templates: sem argumentos -> catálogo de templates (sem necessidade de chave)
  • rendermcp_usage: sem argumentos -> renders deste mês, total vitalício, cota restante e lista de chaves ativas da conta Propositalmente não há ferramenta MCP para adicionar, listar ou revogar chaves em uma conta existente: isso é somente via REST/UI, em https://rendermcp.com/account ou https://rendermcp.com/start.

Claude Code (terminal): claude mcp add --transport http rendermcp https://rendermcp.com/mcp --header "Authorization: Bearer <api_key>" Cursor (edite um arquivo, sem comando de terminal): adicione a ~/.cursor/mcp.json (todos os projetos) ou .cursor/mcp.json (somente este projeto): {"mcpServers": {"rendermcp": {"url": "https://rendermcp.com/mcp", "headers": {"Authorization": "Bearer <api_key>"}}}} Codex CLI (edite um arquivo, sem comando de terminal): adicione a ~/.codex/config.toml: [mcp_servers.rendermcp] com url = "https://rendermcp.com/mcp", depois uma tabela [mcp_servers.rendermcp.http_headers] com Authorization = "Bearer <api_key>" Claude, sem terminal (claude.ai, Claude Desktop, Cowork): Customize -> Connectors -> Add custom connector -> server URL https://rendermcp.com/mcp -> Authentication "None" -> adicione um Request header chamado authorization com valor "Bearer <api_key>". Esse campo de Request headers é um beta limitado do lado da Anthropic; se um usuário não o vir, ele precisa do Claude Code (terminal). Grok (grok.com/connectors): New Connector -> Custom -> cole a server URL https://rendermcp.com/mcp -> adicione um cabeçalho Authorization com valor "Bearer <api_key>". Requer um nível pago do Grok; Bring Your Own MCP não está no plano gratuito. Nenhuma dessas opções pode ser aplicada por esta própria conexão MCP (ela não tem acesso ao terminal do usuário, diálogos de configuração ou arquivos de configuração de outras ferramentas); um humano, ou um agente de codificação separado com acesso próprio a arquivos/shell, precisa aplicar a que corresponder à sua ferramenta. Crie a chave primeiro via rendermcp_create_key ou POST /v1/keys se você ainda não tiver uma, depois entregue ao usuário a opção que corresponder à ferramenta dele, não apenas o comando do Claude Code por padrão.

Notas para agentes

  • Suporte a CSS é o subconjunto do Satori: apenas layout flexbox (sem CSS grid), estilos inline ou um bloco . Todo elemento com filhos precisa de display:flex.
  • Espaços em branco entre tags em HTML bruto se tornam filhos flex e podem deslocar layouts; minifique HTML bruto para linhas precisas.
  • Fontes disponíveis dentro dos renders: Inter (400, 700), JetBrains Mono (400).
  • Branding: brand.primary_color (hex) ou brand.theme (indigo|emerald|crimson|amber|ocean|mono); brand.name; brand.logo_url (imagem https pública, buscada e embutida, máx. 2MB) ou brand.logo_data (URI data:image) para colocar um logotipo real no slot de marca do template.
  • Fontes por marca: brand.font alterna a tipografia do template; lista de permissão: Inter (padrão), Plus Jakarta Sans, Space Grotesk, Poppins, Lora, Playfair Display, Merriweather, Outfit. Carregadas em 400 + 700.
  • Ícones: metric-card, announcement-card e stat-callout aceitam data.icon com um dos 21 nomes integrados: rocket, chart, bolt, check, star, heart, arrow-up, arrow-down, mail, bell, gift, flame, trophy, clock, shield, sparkles, megaphone, code, globe, users, dollar. Ícones são renderizados na cor da marca. Em HTML bruto, tags inline NÃO são suportadas (renderizam em branco); incorpore qualquer ícone ou vetor personalizado como um cujo src seja uma URI de dados SVG (data:image/svg+xml;utf8,...), com width e height explícitos.
  • Saída SVG: passe "format": "svg" em qualquer render para obter saída vetorial em vez de PNG.
  • Tamanho padrão 1200x630, renderizado com supersampling 2x por padrão (uma solicitação de 1200x630 retorna um PNG nítido de 2400x1260). Passe "scale": 1-3 para controlar. Tamanho lógico máximo 4096x4096.
  • Beta gratuito: a criação de chave é gratuita e instantânea, e toda conta recebe 300 renders por mês (reinicia no dia 1º), compartilhados entre todas as suas chaves. Renders com falha não são contados. Chaves são armazenadas apenas como hashes; cada segredo é mostrado uma vez, na criação, e nunca mais. Uma conta pode ter até 10 chaves nomeadas ativas. A propriedade do e-mail não é verificada durante o beta. Planos pagos com preço simples por crédito chegam depois.
  • Nomes de ferramentas MCP são prefixados com rendermcp_ para evitar colisões com outros servidores instalados.

Páginas