HTML/CSS to Image

Integrando o Servidor MCP HTML/CSS to Image

Capture screenshots de sites, renderize imagens ou PDFs e gerencie os recursos da sua organização diretamente do seu assistente de IA.

Introdução

Não importa qual ferramenta ou agente de IA você use, você pode conectá-lo ao HTML/CSS to Image através do MCP. Dê a qualquer assistente compatível uma URL pública ou HTML/CSS, e peça para ele capturar um screenshot, renderizar um PDF ou criar imagens a partir dos seus templates salvos.

• Comece gratuitamente. Uma conta HCTI gratuita funciona com qualquer integração. Criar imagens usa os créditos de imagem disponíveis da sua organização, assim como na API.
• Entre com segurança. Autorize sua conta através do OAuth no seu navegador, sem copiar chaves de API para o seu assistente.
• Sem infraestrutura de navegador para gerenciar. O HCTI cuida da renderização e retorna uma URL hospedada que você pode abrir, baixar ou compartilhar.

Você também pode pedir ao seu assistente para configurar proxies, destinos de armazenamento e imagens automáticas de Open Graph através dos recursos da Management API. Essas operações exigem permissões adicionais de OAuth; o gerenciamento de chaves de API é somente via REST.

Escolha seu cliente

Escolha seu assistente para instruções de configuração e exemplos copiáveis.

Cliente	Como conectar
ChatGPT & Codex	Instale o plugin oficial; use-o em uma conversa ou tarefa de codificação.
Claude & Claude Code	Instale pelo Diretório de Conectores do Claude, ou conecte o Claude Code.
Cline	Conecte um servidor HTTP Streamable pela extensão Cline.
Cursor	Adicione o HCTI ao Cursor Agent com o botão de instalação ou configuração MCP.
Gemini CLI	Conecte o Gemini CLI com um servidor HTTP remoto e login pelo navegador.
GitHub Copilot	Conecte o Copilot CLI pelo seu terminal.
Grok	Use o plugin HCTI ou uma conexão MCP direta no Grok Build.
JetBrains IDEs	Conecte o AI Assistant através de uma ponte MCP com suporte a OAuth.
OpenCode	Configure um servidor MCP remoto e autorize-o pelo CLI.
VS Code	Adicione um servidor HTTP remoto e use suas ferramentas no modo Copilot Agent.
Windsurf	Conecte o HCTI ao Cascade para screenshots e renderização.
Zed	Adicione um servidor MCP remoto ao Agent Panel.

O que é MCP?

O Model Context Protocol permite que assistentes chamem ferramentas externas. O servidor MCP hospedado do HCTI renderiza o HTML/CSS ou a URL pública fornecida pelo seu assistente e retorna o resultado. Você não precisa executar um navegador de renderização.

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

Transporte: HTTP Streamable

Autenticação: OAuth

Nosso plugin de agente também empacota orientações de fluxo de trabalho para usar o HCTI. Onde um cliente suporta esse plugin, instalá-lo fornece tanto a conexão quanto as instruções para o assistente. Uma conexão MCP direta dá acesso às ferramentas abaixo.

Ferramentas disponíveis

Estas ferramentas principais funcionam em todos os clientes MCP. O acesso depende das permissões aprovadas para sua conexão. Peça ao seu assistente para usar o HCTI pelo nome.

Uso da conta

Ferramenta	O que faz
check_usage	Verifica imagens usadas, cota de imagens, próximo reset e configurações de excedente sem renderizar uma imagem.

Screenshots e renderização

Ferramenta	O que faz
create_image	Renderiza HTML/CSS como PNG, JPG, WebP ou PDF. Suporta device_scale, viewport_width, viewport_height e ms_delay.
create_url_image	Captura uma página pública ou seletor CSS, com configurações de viewport e bloqueio de banners de cookies.
create_templated_image	Renderiza um template salvo com template_id e template_values.
create_batch_images	Renderiza variações com default_options compartilhados e variações por imagem.
get_max_batch_size	Verifica o limite de lote da conta antes de preparar um lote.

Feedback

Ferramenta	O que faz
submit_feedback	Reporte bugs, solicite recursos e sugira melhorias para a equipe HCTI. Veja a referência da ferramenta de feedback.

Gerenciamento de templates

Ferramenta	O que faz
create_template	Salva HTML/CSS como um template reutilizável com variáveis.
update_template	Atualiza um template existente por ID.
list_templates	Encontra templates na conta conectada.
list_template_versions	Inspeciona o histórico de versões de um template.

Veja parâmetros de renderização e o Template Editor para opções de imagem e designs reutilizáveis. A referência completa de ferramentas também cobre proxies, destinos de armazenamento, configurações de Open Graph e permissões necessárias.

Autenticação

Após adicionar o HCTI, use a ação de conectar ou fazer login do seu cliente e complete a autorização no seu navegador. Entre na conta HCTI cujos templates e créditos você deseja usar, revise a organização e as permissões selecionadas e depois retorne ao assistente. Abra Mais Permissões para selecionar acesso de gerenciamento adicional, se necessário. Alguns clientes solicitam automaticamente no primeiro uso; os guias individuais mostram como conectar explicitamente.

Para verificar a conexão sem renderizar uma imagem, pergunte: “Use o HCTI para verificar meu uso de imagens e limites da conta.” A ferramenta check_usage requer usage:read e retorna uso e limites sem renderizar uma imagem. get_max_batch_size também requer usage:read. Solicitações de renderização usam a cota de imagens da sua conta HCTI; sua assinatura do assistente é separada.

Exemplos de prompts

Como capturar um screenshot de site

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.

Abra a URL retornada para inspecionar a captura. Para capturar apenas parte do seu próprio site, forneça um seletor CSS como .pricing-grid que realmente exista nessa página. O HCTI deve conseguir acessar a URL a partir do seu serviço hospedado; localhost não é acessível.

Como renderizar HTML e 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.

O resultado deve mostrar texto branco centralizado em um cartão azul escuro. O assistente envia HTML/CSS para o HCTI para renderização. Ao trabalhar a partir de um repositório, peça para ele ler os arquivos relevantes e fornecer marcação e estilos autocontidos; caminhos de assets locais precisam ser substituídos por assets acessíveis.

Como exportar um 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.

Como reutilizar um template e criar variações

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.

Use o Template Editor para criar um template e definir os valores que seu assistente deve passar como template_values.

Como inspecionar recursos da organização

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

Aprove og_configs:read para este exemplo. Para criar ou atualizar configurações, aprove também og_configs:create_update. Veja a referência de ferramentas para operações de proxy, destino de armazenamento e gerenciamento de OG.

Parâmetros de imagem

Ao criar imagens, os principais parâmetros são:

Parâmetro	Tipo	Descrição
html	String	O conteúdo HTML a ser renderizado. Obrigatório para create_image.
css	String	Estilos CSS para seu HTML.
url	String	A URL para capturar. Obrigatório para create_url_image.

Parâmetros adicionais

Nome	Tipo	Descrição
additional_header_origins	Array	Permite headers personalizados em solicitações para origens HTTP ou HTTPS adicionais específicas.
block_consent_banners	Boolean	Quando definido como true, bloqueia automaticamente banners de consentimento de cookies e pop-ups em sites. Mais útil para capturas de tela de URLs.
color_scheme	String	Define o Chrome para renderizar no modo light ou dark. Afeta sites que usam prefers-color-scheme.
dedupe_duration_s	Integer	Reutiliza uma imagem recente idêntica sem consumir créditos de imagem. Define a janela de retrospectiva em segundos; os padrões e valores permitidos variam por tipo de imagem e plano.
device_scale	Double	Controla a resolução ajustando a proporção de pixels de 0.1 a 3. Valores mais altos aumentam a qualidade da imagem e o tamanho do arquivo.
disable_twemoji	Boolean	Imagens HTML/CSS e de modelo usam Twemoji por padrão; defina true para desativá-lo. Imagens de URL injetam Twemoji apenas quando definido explicitamente como false.
format	String	Escolha a extensão do arquivo na URL da imagem retornada inicialmente: png, jpg, webp ou pdf.
full_screen	Boolean	Gera uma imagem de toda a altura de uma página de URL.
google_fonts	String	Carrega uma ou mais fontes do Google, como Roboto|Open Sans.
headers	Object	Adiciona cabeçalhos HTTP personalizados ao capturar uma URL. Os cabeçalhos são restritos à origem da URL solicitada e a qualquer additional_header_origins.
identify_as_hcti	Boolean	Adiciona X-HCTI-SCREENSHOT: 1 à solicitação de nível superior ao capturar uma URL.
include_headers_on_subrequests	Boolean	Também adiciona headers personalizados a sub-solicitações de mesma origem e sub-solicitações que correspondem a additional_header_origins.
jumbo_max_height	Integer	Altura máxima de saída no modo jumbo, até 80,000 pixels. Deve ser definido com jumbo_max_width e consome créditos de imagem adicionais.
jumbo_max_width	Integer	Largura máxima de saída no modo jumbo, até 80,000 pixels. Deve ser definido com jumbo_max_height e consome créditos de imagem adicionais.
max_wait_ms	Integer	Define um limite de tempo máximo de 500 a 10000 milissegundos para aguardar antes de tirar a captura de tela.
media_type	String	Define o Chrome para renderizar usando estilos de mídia CSS screen ou print.
ms_delay	Integer	Atraso antes de gerar a imagem. Útil ao aguardar JavaScript; comece com 500 milissegundos.
pdf_options	Object	Personaliza a saída de PDF com tamanho de página, margens, escala e impressão de fundo.
proxy_id	String	Roteia o tráfego de saída por um dos proxies HTTP configurados da sua organização. Disponível no plano de 10.000 imagens/mês ou superior.
render_when_ready	Boolean	Aguarda para gerar a imagem até que o JavaScript chame ScreenshotReady().
request_overrides	Array	Bloqueia solicitações de rede do navegador que correspondem a um padrão curinga de URL e/ou tipos de recurso. Requer um plano pago.
selector	String	Recorta a imagem para um elemento que corresponda a este seletor CSS, como section#complete-toolkit.container-lg.
storage_destination_id	String	Salva arquivos renderizados em um dos destinos de armazenamento configurados da sua organização. Disponível no plano de 10.000 imagens/mês ou superior.
timezone	String	Define o fuso horário do Chrome com um identificador IANA, como America/New_York.
transparent_background	Boolean	Defina como true para renderizar com fundo transparente.
viewport_height	Integer	Define a altura do viewport do Chrome. Ambas as dimensões devem ser definidas ao usar qualquer uma delas.
viewport_landscape	Boolean	Define o viewport do Chrome para o modo paisagem.
viewport_mobile	Boolean	Define o viewport do Chrome para emular um dispositivo móvel.
viewport_touch	Boolean	Define o viewport do Chrome para suportar eventos de toque.
viewport_width	Integer	Define a largura do viewport do Chrome. Ambas as dimensões devem ser definidas ao usar qualquer uma delas.

Solução de problemas

Erros de autenticação

Se você receber erros de autenticação:

• Tente desconectar e reconectar o servidor MCP para acionar um novo fluxo OAuth
• Certifique-se de estar conectado à conta correta do HTML/CSS to Image no seu navegador
• Verifique se os pop-ups não estão bloqueados quando a janela OAuth tenta abrir

Erros de permissão

Uma ferramenta listada pode exigir permissões que sua conexão não possui. Desconecte e reconecte o HCTI e aprove o acesso necessário para a organização pretendida. Atualizar um token existente não adiciona permissões. Não tente novamente uma operação negada até que o acesso mude. Consulte autorização MCP.

Erros de limite de taxa

Os limites das ferramentas de gerenciamento são compartilhados com solicitações REST da sua organização. Aguarde 60 segundos antes de tentar novamente uma ferramenta com limite de taxa; consulte limites de taxa.

Problemas de conexão

Se o servidor MCP não estiver conectando:

• Certifique-se de que sua rede permita conexões HTTPS de saída
• Verifique se a URL é exatamente https://mcp.hcti.io
• Reinicie seu assistente de IA após atualizar a configuração

Erros de geração de imagem

Se as imagens falharem ao gerar:

• Verifique se sua conta tem créditos de imagem disponíveis no painel
• Certifique-se de que o conteúdo HTML seja válido
• Para capturas de tela de URL, verifique se a URL é publicamente acessível

Plataformas de automação

Você também pode usar o servidor MCP com plataformas de automação:

Zapier

O Zapier tem um Cliente MCP dedicado que se conecta a servidores MCP. Isso permite que você use o servidor MCP HTML/CSS to Image dentro dos fluxos de trabalho do Zapier sem escrever código.

Cliente MCP do Zapier

Pipedream

O Pipedream suporta servidores MCP para criar fluxos de trabalho sem servidor. Conecte o servidor MCP HTML/CSS to Image para automatizar a geração de imagens nos seus fluxos de trabalho do Pipedream.

Integração MCP do Pipedream

O servidor MCP também está listado no Smithery.

Precisa de ajuda?

Fale com um humano. Envie um e-mail para support@htmlcsstoimage.com e nós ajudaremos você a começar.