Render MCP

Convierte datos estructurados o HTML en imágenes PNG o SVG pulidas y alojadas en menos de un segundo.

Ver en rendermcp.com

Documentación

Render MCP

API de HTML a imagen y servidor MCP. Envía HTML/CSS o un nombre de plantilla con datos JSON, recibe una URL de PNG o SVG alojado en menos de un segundo. Diseñado para agentes de IA: salida determinista, respuestas JSON compactas. Beta gratuita; se requiere una clave API (gratuita, creada solo con un correo electrónico), enviada ÚNICAMENTE como encabezado Authorization: Bearer, nunca en el cuerpo de la solicitud ni como argumento de herramienta.

URL base: https://rendermcp.com Endpoint MCP (HTTP Streamable): https://rendermcp.com/mcp Especificación OpenAPI: https://rendermcp.com/openapi.json

Inicio rápido (agentes)

  1. Crea una clave una vez: POST https://rendermcp.com/v1/keys con {"email": "you@example.com"} -> {"api_key": "rmcp_...", "key_id": "..."} (a través de MCP usa la herramienta rendermcp_create_key; 300 renders gratuitos al mes, compartidos entre todas las claves de la cuenta). Solo funciona con un correo electrónico nuevo; da error a propósito si el correo ya está registrado.
  2. Renderiza: POST https://rendermcp.com/v1/render con el encabezado "Authorization: Bearer rmcp_..." y el cuerpo {"template": "og-image", "data": {"title": "Hello"}} -> {"url": "...", "width": 1200, "height": 630, "format": "png", "render_ms": 95}
  3. HTML crudo en lugar de una plantilla: mismo encabezado, cuerpo {"html": "<div style="display:flex">...", "css": "...", "width": 1200, "height": 630}
  4. Añade "response": "image" para recibir bytes crudos en lugar de JSON.
  5. Las imágenes alojadas viven en https://rendermcp.com/r/{id}.{ext} durante 24 horas y luego caducan. Vuelve a renderizar cuando necesites una URL nueva.
  6. Estadísticas de uso: GET https://rendermcp.com/v1/usage con Authorization: Bearer -> renders de este mes, total, fecha de creación de la cuenta y lista de claves activas de la cuenta.
  7. Una cuenta puede tener varias claves con nombre (por ejemplo, "laptop", "CI"), cada una revocable individualmente, hasta 10 activas a la vez. Añadir, listar o revocar claves es solo REST/UI (POST/GET/DELETE https://rendermcp.com/v1/keys, y https://rendermcp.com/account, https://rendermcp.com/start), no está expuesto como herramienta MCP: los agentes nunca deben modificar las credenciales de una persona por su cuenta. Si una llamada de renderizado falla con una clave desconocida o revocada, dile a la persona que obtenga una nueva en https://rendermcp.com/start o https://rendermcp.com/account en lugar de intentar arreglarlo tú.
  8. ¿Perdiste todas las claves? POST https://rendermcp.com/v1/magic-link {"email": "..."} envía por correo un enlace válido por 15 minutos a https://rendermcp.com/account (solo si ese correo tiene una cuenta; la respuesta es idéntica en ambos casos). Desde allí, consulta el uso, añade una clave nueva o revoca cualquier clave sin tener una. El enlace sigue siendo válido para acciones repetidas dentro de los 15 minutos, por lo que se pueden gestionar varias claves en una sola visita.

Plantillas (27)

  • og-image (1200x630): Imagen de Open Graph / uso compartido en redes sociales: título grande, subtítulo opcional, barra de marca. 1200x630.
  • metric-card (1200x630): Tarjeta de KPI / métrica: etiqueta, valor grande, cambio respecto al período anterior con color de subida o bajada. 1200x630.
  • tweet-card (1200x675): Captura de publicación social (estilo X/Twitter): avatar, nombre, usuario, texto de la publicación, fila de interacción. El formato clásico de republicación a LinkedIn/Instagram. 1200x675.
  • quote-card (1080x1080): Tarjeta de cita cuadrada para feeds y carruseles: cita sobredimensionada, autor, rol. Formato viral atemporal. 1080x1080.
  • code-card (1200x630): Tarjeta de fragmento de código estilo Carbon: ventana de editor con luces de tráfico, nombre de archivo, código monoespaciado. El formato de desarrollador para compartir. 1200x630 por defecto.
  • carousel-slide (1080x1080): Diapositiva cuadrada para publicaciones de documento de LinkedIn / carruseles de Instagram (el formato orgánico de mayor interacción): titular, número de diapositiva, declaración grande, usuario en el pie. Haz una por punto. 1080x1080.
  • testimonial-card (1200x630): Testimonio de prueba social: calificación de estrellas, cita, avatar, nombre, rol/empresa. Páginas de destino, publicaciones de casos de estudio, resúmenes de reseñas. 1200x630.
  • case-study-card (1200x630): Tarjeta oscura de gancho de caso de estudio: titular, firma, titular contundente de dos líneas (segunda línea en el color de la marca), foto del autor y una insignia inferior con descripción. Promociones de boletines, publicaciones de "hice X, así es como", hilos de casos de estudio. 1200x630.
  • announcement-card (1200x630): Lanzamiento de producto / registro de cambios / anuncio de función: insignia, titular, descripción, sitio. Lanzamientos en Product Hunt, notas de versión, lanzamientos de funciones. 1200x630.
  • bar-chart (1200x630): Tarjeta de gráfico de barras limpia a partir de etiquetas y valores: título, barras con etiquetas de valor, pie. Toda la matemática se calcula en código, determinista. 1200x630.
  • blog-header (1200x630): Encabezado de publicación de blog / imagen destacada: etiqueta de categoría, título, autor y tiempo de lectura. También sirve como imagen de uso compartido de enlaces. 1200x630.
  • story-card (1080x1920): Historia vertical para Instagram/TikTok/WhatsApp (9:16): titular, declaración grande, píldora de CTA, usuario. Las historias son contenido de volumen diario para cada marca. 1080x1920.
  • youtube-thumbnail (1280x720): Miniatura de YouTube (16:9): 3-5 palabras enormes, subrayado de acento, etiqueta de episodio opcional. Diseñado para legibilidad en tamaño de feed. 1280x720.
  • sale-promo (1080x1080): Cuadrado de promoción de venta / descuento: oferta gigante, línea de producto, chip de código promocional, urgencia. El caballo de batalla del comercio electrónico. 1080x1080.
  • event-card (1200x630): Invitación a evento / seminario web: título, fecha, hora, anfitrión, CTA. Semanas de lanzamiento, seminarios web, reuniones, espacios. 1200x630.
  • hiring-card (1080x1080): Anuncio de "estamos contratando": rol, ubicación/remoto, línea de compensación, CTA de postulación. El tipo de publicación de empresa más compartido en LinkedIn. 1080x1080.
  • tips-list (1080x1080): Cuadrado de consejos numerados / lista: título más hasta 5 consejos. El formato educativo clásico digno de guardar. 1080x1080.
  • before-after (1080x1080): Cuadrado de comparación antes / después: dos columnas etiquetadas de puntos. Prueba de transformación, mejoras de procesos, propuestas de producto. 1080x1080.
  • stat-callout (1080x1080): Una estadística enorme con contexto, cuadrado. Los ganchos basados en datos superan a las afirmaciones genéricas en los feeds. 1080x1080.
  • product-card (1200x630): Tarjeta de función de producto: nombre, eslogan, precio, hasta 3 viñetas de funciones. Lanzamientos, mercados, publicaciones de comparación. 1200x630.
  • cta-slide (1080x1080): Diapositiva final de carrusel: CTA de seguir/suscribirse con avatar y usuario. Todo carrusel necesita una; enorme volumen de repetición. 1080x1080.
  • social-post (1080x1080): Publicación de declaración social de imagen única: titular, una declaración grande, usuario opcional en el pie. Para una publicación independiente, no una diapositiva en una serie. 1080x1080.
  • meme-card (1080x1080): Formato clásico de subtítulos de meme: barras de subtítulos en negrita arriba/abajo sobre un fondo de color de marca sólido. Alto alcance orgánico, sin necesidad de habilidades de diseño. 1080x1080.
  • poll-card (1080x1080): Publicación de interacción de encuesta / esto-o-aquello: una pregunta y 2-4 opciones de respuesta estilizadas. Las encuestas superan consistentemente a las publicaciones simples en alcance. 1080x1080.
  • feed-ad (1080x1080): Anuncio de feed social pagado: insignia, titular, subtítulo, un botón de CTA prominente. Diseñado para atención de audiencia fría, no alcance orgánico. 1080x1080.
  • display-banner (300x250): Anuncio de display compacto: insignia, titular corto, CTA pequeño. Dimensionado para el rectángulo mediano de IAB (300x250); pasa ancho/alto para renderizar otros tamaños estándar como el leaderboard de 728x90.
  • urgency-promo (1080x1080): Promoción de urgencia por tiempo limitado: fecha límite estilo cuenta regresiva como protagonista, oferta y CTA secundarios. Lidera con presión de tiempo, no con el número de descuento. 1080x1080.

GET https://rendermcp.com/v1/templates devuelve documentación completa de campos y ejemplos de copiar y pegar.

Herramientas MCP

Conéctate vía HTTP Streamable: https://rendermcp.com/mcp con un encabezado Authorization: Bearer <api_key> (requerido). La clave se ve una vez, en la respuesta de emisión de rendermcp_create_key; después de eso nunca se acepta en argumentos de herramientas y no necesita repetirse en llamadas de renderizado o uso.

  • rendermcp_create_key: email -> api_key gratuita (se muestra una vez; 300 renders al mes). Solo para un correo electrónico nuevo; da error si ese correo ya está registrado (sin ruta de rotación/añadir clave vía MCP, por diseño).
  • rendermcp_render_html: html, css?, width?, height?, format? -> URL de imagen alojada
  • rendermcp_render_template: template, data, brand?, width?, height?, format? -> URL de imagen alojada
  • rendermcp_list_templates: sin argumentos -> catálogo de plantillas (no se necesita clave)
  • rendermcp_usage: sin argumentos -> renders de este mes, total de por vida, cuota restante y lista de claves activas de la cuenta Deliberadamente no hay herramienta MCP para añadir, listar o revocar claves en una cuenta existente: eso es solo REST/UI, en https://rendermcp.com/account o https://rendermcp.com/start.

Claude Code (terminal): claude mcp add --transport http rendermcp https://rendermcp.com/mcp --header "Authorization: Bearer <api_key>" Cursor (edita un archivo, sin comando de terminal): añade a ~/.cursor/mcp.json (todos los proyectos) o .cursor/mcp.json (solo este proyecto): {"mcpServers": {"rendermcp": {"url": "https://rendermcp.com/mcp", "headers": {"Authorization": "Bearer <api_key>"}}}} Codex CLI (edita un archivo, sin comando de terminal): añade a ~/.codex/config.toml: [mcp_servers.rendermcp] con url = "https://rendermcp.com/mcp", luego una tabla [mcp_servers.rendermcp.http_headers] con Authorization = "Bearer <api_key>" Claude, sin terminal (claude.ai, Claude Desktop, Cowork): Personalizar -> Conectores -> Añadir conector personalizado -> URL del servidor https://rendermcp.com/mcp -> Autenticación "Ninguna" -> añade un encabezado de solicitud llamado authorization con valor "Bearer <api_key>". Ese campo de encabezados de solicitud es una beta limitada del lado de Anthropic; si un usuario no lo ve, necesita Claude Code (terminal) en su lugar. Grok (grok.com/connectors): Nuevo conector -> Personalizado -> pega la URL del servidor https://rendermcp.com/mcp -> añade un encabezado Authorization con valor "Bearer <api_key>". Requiere un nivel de Grok de pago; Bring Your Own MCP no está en el plan gratuito. Ninguna de estas puede ser aplicada por esta conexión MCP en sí misma (no tiene acceso al terminal del usuario, diálogos de configuración o archivos de configuración de otras herramientas); un humano, o un agente de codificación separado con su propio acceso a archivos/shell, tiene que aplicar la que coincida con su herramienta. Crea la clave primero vía rendermcp_create_key o POST /v1/keys si aún no tienes una, luego entrega al usuario la que coincida con su herramienta entre estas cinco, no solo el comando de Claude Code por defecto.

Notas para agentes

  • El soporte de CSS es el subconjunto de Satori: solo diseño flexbox (sin CSS grid), estilos en línea o un bloque . Cada elemento con hijos necesita display:flex.
  • El espacio en blanco entre etiquetas en HTML crudo se convierte en hijos flex y puede desplazar los diseños; minimiza el HTML crudo para filas precisas.
  • Fuentes disponibles dentro de los renders: Inter (400, 700), JetBrains Mono (400).
  • Marca: brand.primary_color (hex) o brand.theme (indigo|emerald|crimson|amber|ocean|mono); brand.name; brand.logo_url (imagen https pública, obtenida e incrustada, máx. 2MB) o brand.logo_data (URI data:image) para colocar un logotipo real en el espacio de marca de la plantilla.
  • Fuentes por marca: brand.font cambia la tipografía de la plantilla; lista blanca: Inter (predeterminada), Plus Jakarta Sans, Space Grotesk, Poppins, Lora, Playfair Display, Merriweather, Outfit. Cargadas en 400 + 700.
  • Iconos: metric-card, announcement-card y stat-callout aceptan data.icon con uno de 21 nombres integrados: rocket, chart, bolt, check, star, heart, arrow-up, arrow-down, mail, bell, gift, flame, trophy, clock, shield, sparkles, megaphone, code, globe, users, dollar. Los iconos se renderizan en el color de la marca. En HTML crudo, las etiquetas en línea NO son compatibles (se renderizan en blanco); incrusta cualquier icono o vector personalizado como un cuyo src sea una URI de datos SVG (data:image/svg+xml;utf8,...), con ancho y alto explícitos.
  • Salida SVG: pasa "format": "svg" en cualquier render para obtener salida vectorial en lugar de PNG.
  • Tamaño predeterminado 1200x630, renderizado con sobremuestreo 2x por defecto (una solicitud de 1200x630 devuelve un PNG nítido de 2400x1260). Pasa "scale": 1-3 para controlarlo. Tamaño lógico máximo 4096x4096.
  • Beta gratuita: la creación de claves es gratuita e instantánea, y cada cuenta recibe 300 renders al mes (se reinicia el día 1), compartidos entre todas sus claves. Los renders fallidos no se cuentan. Las claves se almacenan solo como hashes; cada secreto se muestra una vez, en la creación, y nunca más. Una cuenta puede tener hasta 10 claves con nombre activas. La propiedad del correo electrónico no se verifica durante la beta. Los planes de pago con precios de crédito simples llegarán más tarde.
  • Los nombres de las herramientas MCP tienen el prefijo rendermcp_ para evitar colisiones con otros servidores instalados.

Páginas