HTML/CSS to Image

Integración del servidor MCP de HTML/CSS to Image

Toma capturas de pantalla de sitios web, renderiza imágenes o PDFs, y gestiona los recursos de tu organización directamente desde tu asistente de IA.

Introducción

Sin importar qué herramienta o agente de IA uses, puedes conectarlo a HTML/CSS to Image mediante MCP. Dale a cualquier asistente compatible una URL pública o HTML/CSS, y pídele que tome una captura de pantalla, renderice un PDF o cree imágenes a partir de tus plantillas guardadas.

• Comienza gratis. Una cuenta gratuita de HCTI funciona con cualquier integración. Crear imágenes utiliza los créditos de imagen disponibles de tu organización, igual que con la API.
• Inicia sesión de forma segura. Autoriza tu cuenta mediante OAuth en tu navegador, sin copiar claves de API en tu asistente.
• Sin infraestructura de navegador que gestionar. HCTI se encarga del renderizado y devuelve una URL alojada que puedes abrir, descargar o compartir.

También puedes pedirle a tu asistente que configure proxies, destinos de almacenamiento e imágenes automáticas de Open Graph mediante las capacidades de la API de gestión. Estas operaciones requieren permisos OAuth adicionales; la gestión de claves de API es solo vía REST.

Elige tu cliente

Elige tu asistente para ver instrucciones de configuración y ejemplos copiables.

Cliente	Cómo conectarse
ChatGPT & Codex	Instala el plugin oficial; úsalo en una conversación o en una tarea de codificación.
Claude & Claude Code	Instálalo desde el Directorio de Conectores de Claude, o conecta Claude Code.
Cline	Conecta un servidor HTTP Streamable desde la extensión de Cline.
Cursor	Añade HCTI a Cursor Agent con el botón de instalación o la configuración de MCP.
Gemini CLI	Conecta Gemini CLI con un servidor HTTP remoto e inicio de sesión en el navegador.
GitHub Copilot	Conecta Copilot CLI desde tu terminal.
Grok	Usa el plugin de HCTI o una conexión MCP directa en Grok Build.
IDE de JetBrains	Conecta AI Assistant mediante un puente MCP compatible con OAuth.
OpenCode	Configura un servidor MCP remoto y autorízalo desde la CLI.
VS Code	Añade un servidor HTTP remoto y usa sus herramientas en el modo Copilot Agent.
Windsurf	Conecta HCTI a Cascade para capturas de pantalla y renderizado.
Zed	Añade un servidor MCP remoto al Panel de Agente.

¿Qué es MCP?

El Protocolo de Contexto de Modelo permite que los asistentes llamen a herramientas externas. El servidor MCP alojado de HCTI renderiza el HTML/CSS o la URL pública proporcionada por tu asistente y devuelve el resultado. No necesitas ejecutar un navegador de renderizado tú mismo.

URL del servidor MCP: https://mcp.hcti.io

Transporte: HTTP Streamable

Autenticación: OAuth

Nuestro plugin de agente también incluye guías de flujo de trabajo para usar HCTI. Cuando un cliente es compatible con ese plugin, instalarlo proporciona tanto la conexión como las instrucciones para el asistente. Una conexión MCP directa da acceso a las herramientas que se indican a continuación.

Herramientas disponibles

Estas herramientas principales funcionan en todos los clientes MCP. El acceso depende de los permisos aprobados para tu conexión. Pídele a tu asistente que use HCTI por su nombre.

Uso de la cuenta

Herramienta	Qué hace
check_usage	Comprueba las imágenes usadas, el límite de imágenes, el próximo restablecimiento y la configuración de excedente sin renderizar una imagen.

Capturas de pantalla y renderizado

Herramienta	Qué hace
create_image	Renderiza HTML/CSS como PNG, JPG, WebP o PDF. Admite device_scale, viewport_width, viewport_height y ms_delay.
create_url_image	Captura una página pública o un selector CSS, con configuración de viewport y bloqueo de banners de cookies.
create_templated_image	Renderiza una plantilla guardada con template_id y template_values.
create_batch_images	Renderiza variaciones con default_options compartidas y variaciones por imagen.
get_max_batch_size	Comprueba el límite de lotes de la cuenta antes de preparar un lote.

Comentarios

Herramienta	Qué hace
submit_feedback	Reporta errores, solicita funciones y sugiere mejoras al equipo de HCTI. Consulta la referencia de la herramienta de comentarios.

Gestión de plantillas

Herramienta	Qué hace
create_template	Guarda HTML/CSS como plantilla reutilizable con variables.
update_template	Actualiza una plantilla existente por ID.
list_templates	Busca plantillas en la cuenta conectada.
list_template_versions	Inspecciona el historial de versiones de una plantilla.

Consulta los parámetros de renderizado y el Editor de Plantillas para opciones de imagen y diseños reutilizables. La referencia completa de herramientas también cubre proxies, destinos de almacenamiento, configuraciones de Open Graph y permisos requeridos.

Autenticación

Después de añadir HCTI, usa la acción de conectar o iniciar sesión de tu cliente y completa la autorización en tu navegador. Inicia sesión en la cuenta de HCTI cuyas plantillas y créditos quieras usar, revisa la organización y los permisos seleccionados, y luego vuelve al asistente. Abre Más Permisos para seleccionar acceso de gestión adicional si es necesario. Algunos clientes solicitan permiso automáticamente en el primer uso; las guías individuales muestran cómo conectar explícitamente.

Para comprobar la conexión sin renderizar una imagen, pregunta: "Usa HCTI para comprobar mi uso de imágenes y los límites de mi cuenta." La herramienta check_usage requiere usage:read y devuelve el uso y los límites sin renderizar una imagen. get_max_batch_size también requiere usage:read. Las solicitudes de renderizado usan el límite de imágenes de tu cuenta de HCTI; tu suscripción al asistente es independiente.

Ejemplos de indicaciones

Cómo tomar una captura de pantalla de un sitio web

Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.

Abre la URL devuelta para inspeccionar la captura. Para capturar solo parte de tu propio sitio, proporciona un selector CSS como .pricing-grid que realmente exista en esa página. HCTI debe poder acceder a la URL desde su servicio alojado; localhost no es accesible.

Cómo renderizar HTML y CSS como PNG

Use HCTI to render this HTML and CSS as a PNG with device_scale set to 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.

El resultado debe mostrar texto blanco centrado en una tarjeta azul oscuro. El asistente envía HTML/CSS a HCTI para su renderizado. Cuando trabajes desde un repositorio, pídele que lea los archivos relevantes y proporcione marcado y estilos autocontenidos; las rutas de recursos locales deben reemplazarse con recursos accesibles.

Cómo exportar un PDF

Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.

Cómo reutilizar una plantilla y crear variaciones

Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".

Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.

Usa el Editor de Plantillas para diseñar una plantilla y definir los valores que tu asistente debe pasar como template_values.

Cómo inspeccionar los recursos de la organización

Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.

Aprueba og_configs:read para este ejemplo. Para crear o actualizar configuraciones, también aprueba og_configs:create_update. Consulta la referencia de herramientas para operaciones de proxy, destino de almacenamiento y gestión de OG.

Parámetros de imagen

Al crear imágenes, los parámetros principales son:

Parámetro	Tipo	Descripción
html	String	El contenido HTML a renderizar. Requerido para create_image.
css	String	Estilos CSS para tu HTML.
url	String	La URL a capturar. Requerida para create_url_image.

Parámetros adicionales

Nombre	Tipo	Descripción
additional_header_origins	Array	Permitir headers personalizados en solicitudes a orígenes HTTP o HTTPS adicionales específicos.
block_consent_banners	Boolean	Cuando se establece en true, bloquea automáticamente los banners de consentimiento de cookies y las ventanas emergentes en los sitios web. Más útil para capturas de pantalla de URL.
color_scheme	String	Configura Chrome para renderizar en modo light o dark. Afecta a los sitios web que usan prefers-color-scheme.
dedupe_duration_s	Integer	Reutiliza una imagen reciente idéntica sin consumir créditos de imagen. Establece la ventana de retroceso en segundos; los valores predeterminados y permitidos varían según el tipo de imagen y el plan.
device_scale	Double	Controla la resolución ajustando la proporción de píxeles de 0.1 a 3. Los valores más altos aumentan la calidad de la imagen y el tamaño del archivo.
disable_twemoji	Boolean	Las imágenes HTML/CSS y de plantilla usan Twemoji por defecto; establece true para desactivarlo. Las imágenes de URL inyectan Twemoji solo cuando se establece explícitamente en false.
format	String	Elige la extensión de archivo en la URL de imagen devuelta inicialmente: png, jpg, webp o pdf.
full_screen	Boolean	Genera una imagen de la altura completa de una página de URL.
google_fonts	String	Carga una o más fuentes de Google, como Roboto|Open Sans.
headers	Object	Agrega encabezados HTTP personalizados al capturar una URL. Los encabezados están restringidos al origen de la URL solicitada y a cualquier additional_header_origins.
identify_as_hcti	Boolean	Agrega X-HCTI-SCREENSHOT: 1 a la solicitud de nivel superior al capturar una URL.
include_headers_on_subrequests	Boolean	También agrega headers personalizados a sub-solicitudes del mismo origen y sub-solicitudes que coincidan con additional_header_origins.
jumbo_max_height	Integer	Altura máxima de salida en modo jumbo, hasta 80,000 píxeles. Debe establecerse con jumbo_max_width y consume créditos de imagen adicionales.
jumbo_max_width	Integer	Ancho máximo de salida en modo jumbo, hasta 80,000 píxeles. Debe establecerse con jumbo_max_height y consume créditos de imagen adicionales.
max_wait_ms	Integer	Establece un límite de tiempo máximo de 500 a 10000 milisegundos para esperar antes de tomar la captura de pantalla.
media_type	String	Configura Chrome para renderizar usando estilos de medios CSS screen o print.
ms_delay	Integer	Retraso antes de generar la imagen. Útil al esperar JavaScript; comienza con 500 milisegundos.
pdf_options	Object	Personaliza la salida PDF con tamaño de página, márgenes, escala e impresión de fondo.
proxy_id	String	Enruta el tráfico saliente a través de uno de los proxies HTTP configurados de tu organización. Disponible en el plan de 10,000 imágenes/mes o superior.
render_when_ready	Boolean	Espera para generar la imagen hasta que JavaScript llame a ScreenshotReady().
request_overrides	Array	Bloquea solicitudes de red del navegador que coincidan con un patrón de comodín de URL y/o tipos de recursos. Requiere un plan de pago.
selector	String	Recorta la imagen a un elemento que coincida con este selector CSS, como section#complete-toolkit.container-lg.
storage_destination_id	String	Guarda los archivos renderizados en uno de los destinos de almacenamiento configurados de tu organización. Disponible en el plan de 10,000 imágenes/mes o superior.
timezone	String	Establece la zona horaria de Chrome con un identificador IANA como America/New_York.
transparent_background	Boolean	Establece en true para renderizar con un fondo transparente.
viewport_height	Integer	Establece la altura del viewport de Chrome. Ambas dimensiones deben establecerse al usar cualquiera de ellas.
viewport_landscape	Boolean	Configura el viewport de Chrome en modo horizontal.
viewport_mobile	Boolean	Configura el viewport de Chrome para emular un dispositivo móvil.
viewport_touch	Boolean	Configura el viewport de Chrome para admitir eventos táctiles.
viewport_width	Integer	Establece el ancho del viewport de Chrome. Ambas dimensiones deben establecerse al usar cualquiera de ellas.

Solución de problemas

Errores de autenticación

Si recibes errores de autenticación:

• Intenta desconectar y reconectar el servidor MCP para activar un nuevo flujo OAuth
• Asegúrate de haber iniciado sesión en la cuenta correcta de HTML/CSS to Image en tu navegador
• Verifica que las ventanas emergentes no estén bloqueadas cuando la ventana OAuth intente abrirse

Errores de permisos

Una herramienta listada puede requerir permisos que tu conexión no tiene. Desconecta y reconecta HCTI, luego aprueba el acceso requerido para la organización prevista. Actualizar un token existente no agrega permisos. No reintentes una operación denegada hasta que cambie el acceso. Consulta autorización MCP.

Errores de límite de velocidad

Los límites de las herramientas de gestión se comparten con las solicitudes REST de tu organización. Espera 60 segundos antes de reintentar una herramienta limitada; consulta límites de velocidad.

Problemas de conexión

Si el servidor MCP no se conecta:

• Asegúrate de que tu red permita conexiones HTTPS salientes
• Verifica que la URL sea exactamente https://mcp.hcti.io
• Reinicia tu asistente de IA después de actualizar la configuración

Errores de generación de imágenes

Si las imágenes no se generan:

• Verifica que tu cuenta tenga créditos de imagen disponibles en el panel
• Asegúrate de que el contenido HTML sea válido
• Para capturas de pantalla de URL, verifica que la URL sea accesible públicamente

Plataformas de automatización

También puedes usar el servidor MCP con plataformas de automatización:

Zapier

Zapier tiene un cliente MCP dedicado que se conecta a servidores MCP. Esto te permite usar el servidor MCP de HTML/CSS to Image dentro de los flujos de trabajo de Zapier sin escribir código.

Cliente MCP de Zapier

Pipedream

Pipedream admite servidores MCP para crear flujos de trabajo sin servidor. Conecta el servidor MCP de HTML/CSS to Image para automatizar la generación de imágenes en tus flujos de trabajo de Pipedream.

Integración MCP de Pipedream

El servidor MCP también está listado en Smithery.

¿Necesitas ayuda?

Habla con un humano. Envía un correo a support@htmlcsstoimage.com y te ayudaremos a comenzar.