HTML/CSS to Image

Integración del Servidor MCP

Genera imágenes con asistentes de IA utilizando el Protocolo de Contexto de Modelos.

Nueva función

El servidor MCP es una función nueva. ¡Nos encantaría conocer tu opinión! Envíanos un correo a support@htmlcsstoimage.com.

---

¿Qué es MCP?

El Protocolo de Contexto de Modelos (MCP) es un estándar abierto que permite a los asistentes de IA conectarse a herramientas y servicios externos. Con nuestro servidor MCP, puedes generar imágenes directamente desde tu asistente de codificación de IA sin escribir ningún código.

Simplemente describe lo que quieres, y la IA utilizará la API de HTML/CSS to Image para crearlo por ti.

URL del Servidor MCP: mcp.hcti.io

Herramientas Disponibles

El servidor MCP proporciona las siguientes herramientas:

Creación de Imágenes

Herramienta	Descripción
create_image	Genera una imagen a partir de HTML y CSS. Admite todos los parámetros estándar como device_scale, viewport_width, viewport_height, ms_delay y más.
create_url_image	Toma una captura de pantalla de cualquier URL pública. Incluye opciones para selectores, configuración de viewport y bloqueo de banners de cookies.
create_templated_image	Genera una imagen utilizando una plantilla guardada. Pasa template_id y template_values para sustituir variables en tu plantilla.
create_batch_images	Crea hasta 25 imágenes en una sola solicitud. Establece default_options y proporciona variations para cada imagen.
get_max_batch_size	Verifica el número máximo de imágenes que puedes crear en un solo lote según tu plan.

Gestión de Plantillas

Herramienta	Descripción
create_template	Guarda una plantilla HTML/CSS reutilizable para generar imágenes con sustitución de variables.
update_template	Modifica una plantilla existente proporcionando el template_id y el nuevo contenido.
list_templates	Ve todas las plantillas guardadas en tu cuenta. Devuelve hasta 100 plantillas por solicitud.
list_template_versions	Ve el historial de versiones de una plantilla específica.

Autenticación

El servidor MCP utiliza OAuth para la autenticación. Cuando te conectes por primera vez, tu navegador se abrirá automáticamente para autorizar el acceso a tu cuenta de HTML/CSS to Image. No se requiere configuración manual de credenciales.

Configuración para Cursor

Haz clic en el botón de abajo para instalar automáticamente el servidor MCP de HTML/CSS to Image en Cursor:

O agrega manualmente la siguiente configuración a tu archivo .cursor/mcp.json:

{
  "mcpServers": {
    "hcti": {
      "type": "http",
      "url": "https://mcp.hcti.io"
    }
  }
}

Reinicia Cursor después de guardar la configuración. La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para Claude Code

Para usar el servidor MCP con Claude Code, ejecuta el siguiente comando:

claude mcp add hcti --transport http https://mcp.hcti.io

Para verificar que el servidor se agregó:

claude mcp list

La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para Claude Desktop

Claude Desktop (la aplicación independiente) también admite servidores MCP. Edita tu archivo de configuración de Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Agrega la siguiente configuración:

{
  "mcpServers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

Reinicia Claude Desktop después de guardar la configuración. La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para Windsurf

Windsurf (de Codeium) admite servidores MCP. Agrega lo siguiente a tu archivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "hcti": {
      "serverUrl": "https://mcp.hcti.io"
    }
  }
}

Reinicia Windsurf después de actualizar la configuración. La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para Cline (VS Code)

Cline es un agente de codificación autónomo popular para VS Code. Para agregar el servidor MCP:

1. Abre VS Code y ve a Configuración de Cline
2. Navega a Servidores MCP
3. Haz clic en Agregar Servidor y configura:

{
  "hcti": {
    "url": "https://mcp.hcti.io"
  }
}

Alternativamente, edita tu archivo de configuración MCP de Cline directamente en ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para Zed

Zed es un editor de código de alto rendimiento con funciones de IA. Agrega el servidor MCP a tu configuración de Zed (~/.config/zed/settings.json):

{
  "context_servers": {
    "hcti": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.hcti.io"]
    }
  }
}

La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

Configuración para OpenCode

OpenCode es un asistente de codificación de IA de código abierto. Agrega el servidor MCP a tu archivo de configuración opencode.json:

{
  "mcp": {
    "hcti": {
      "type": "remote",
      "url": "https://mcp.hcti.io",
      "enabled": true
    }
  }
}

Alternativamente, agrégalo a través de la línea de comandos:

opencode mcp add

La primera vez que uses el servidor, se te pedirá que autorices el acceso a través de tu navegador.

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.

Integración del Cliente MCP de Zapier

Pipedream

Pipedream admite servidores MCP para construir 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.

Ejemplos de Prompts

Una vez configurado, puedes pedirle a tu asistente de IA que genere imágenes de forma natural. Aquí hay algunos ejemplos:

Crear una imagen desde HTML:

• "Crea una imagen de un botón azul que diga 'Suscríbete Ahora' con esquinas redondeadas y una sombra sutil"
• "Genera una tarjeta social con un fondo degradado y el título 'Hola Mundo'"

Capturar un sitio web:

• "Toma una captura de pantalla de https://stripe.com con device_scale establecido en 2 para alta resolución"
• "Captura la tabla de precios en https://example.com/pricing usando el selector '.pricing-grid'"

Generar imágenes para redes sociales:

• "Crea una imagen de tarjeta para Twitter/X con un fondo degradado, el título 'Próximamente' y nuestro logo"
• "Haz una imagen de Open Graph para mi publicación de blog sobre Python"

Crear imágenes por lotes:

• "Crea 10 variaciones de una imagen de tarjeta de producto, cada una con un color de fondo diferente"

Trabajar con plantillas:

• "Lista mis plantillas guardadas"
• "Crea una imagen usando mi plantilla 'social-card' con el título establecido en 'Nueva Función'"
• "Guarda este HTML/CSS como una plantilla llamada 'blog-header' para poder reutilizarla"

Si diseñas plantillas en el panel de control primero, los docs del Editor de Plantillas pueden ayudarte a elegir bloques, configurar variables y decidir qué valores debe pasar el servidor MCP como template_values.

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	Permite 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 ventanas emergentes en sitios web. Más útil para capturas de URL.
color_scheme	String	Configura Chrome para renderizar en modo light o dark. Afecta a 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 búsqueda 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. Valores más altos aumentan la calidad de imagen y el tamaño del archivo.
disable_twemoji	Boolean	Establece en true para usar fuentes de emoji nativas en lugar de Twemoji.
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 CSS de medios screen o print.
ms_delay	Integer	Retraso antes de generar la imagen. Útil cuando se espera 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().
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 cuando se usa 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 cuando se usa 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 de 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 de OAuth intente abrirse

Problemas de Conexión

Si el servidor MCP no se está conectando:

• 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 de control
• Asegúrate de que el contenido HTML sea válido
• Para capturas de URL, verifica que la URL sea accesible públicamente

---

¿Necesitas ayuda?

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