HTML/CSS to Image

Integração com Servidor MCP

Gere imagens com assistentes de IA usando o Model Context Protocol.

Novo recurso

O servidor MCP é um novo recurso. Adoraríamos ouvir seu feedback! Envie-nos um e-mail para support@htmlcsstoimage.com.

---

O que é MCP?

O Model Context Protocol (MCP) é um padrão aberto que permite que assistentes de IA se conectem a ferramentas e serviços externos. Com nosso servidor MCP, você pode gerar imagens diretamente do seu assistente de codificação com IA sem escrever nenhum código.

Basta descrever o que você deseja, e a IA usará a API HTML/CSS to Image para criar para você.

URL do Servidor MCP: mcp.hcti.io

Ferramentas Disponíveis

O servidor MCP fornece as seguintes ferramentas:

Criação de Imagens

Ferramenta	Descrição
create_image	Gere uma imagem a partir de HTML e CSS. Suporta todos os parâmetros padrão como device_scale, viewport_width, viewport_height, ms_delay e mais.
create_url_image	Tire uma captura de tela de qualquer URL pública. Inclui opções para seletores, configurações de viewport e bloqueio de banners de cookies.
create_templated_image	Gere uma imagem usando um modelo salvo. Passe template_id e template_values para substituir variáveis no seu modelo.
create_batch_images	Crie até 25 imagens em uma única solicitação. Defina default_options e forneça variations para cada imagem.
get_max_batch_size	Verifique o número máximo de imagens que você pode criar em um único lote com base no seu plano.

Gerenciamento de Modelos

Ferramenta	Descrição
create_template	Salve um modelo HTML/CSS reutilizável para gerar imagens com substituição de variáveis.
update_template	Modifique um modelo existente fornecendo o template_id e o novo conteúdo.
list_templates	Veja todos os modelos salvos na sua conta. Retorna até 100 modelos por solicitação.
list_template_versions	Veja o histórico de versões de um modelo específico.

Autenticação

O servidor MCP usa OAuth para autenticação. Quando você se conectar pela primeira vez, seu navegador abrirá automaticamente para autorizar o acesso à sua conta HTML/CSS to Image. Nenhuma configuração manual de credenciais é necessária.

Configuração para Cursor

Clique no botão abaixo para instalar automaticamente o servidor MCP HTML/CSS to Image no Cursor:

Ou adicione manualmente a seguinte configuração ao seu arquivo .cursor/mcp.json:

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

Reinicie o Cursor após salvar a configuração. Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para Claude Code

Para usar o servidor MCP com o Claude Code, execute o seguinte comando:

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

Para verificar se o servidor foi adicionado:

claude mcp list

Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para Claude Desktop

O Claude Desktop (o aplicativo independente) também suporta servidores MCP. Edite seu arquivo de configuração do Claude Desktop:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Adicione a seguinte configuração:

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

Reinicie o Claude Desktop após salvar a configuração. Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para Windsurf

O Windsurf (da Codeium) suporta servidores MCP. Adicione o seguinte ao seu arquivo ~/.codeium/windsurf/mcp_config.json:

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

Reinicie o Windsurf após atualizar a configuração. Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para Cline (VS Code)

O Cline é um agente de codificação autônomo popular para VS Code. Para adicionar o servidor MCP:

1. Abra o VS Code e vá para Configurações do Cline
2. Navegue até Servidores MCP
3. Clique em Adicionar Servidor e configure:

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

Alternativamente, edite seu arquivo de configurações MCP do Cline diretamente em ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para Zed

O Zed é um editor de código de alto desempenho com recursos de IA. Adicione o servidor MCP às suas configurações do Zed (~/.config/zed/settings.json):

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

Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

Configuração para OpenCode

O OpenCode é um assistente de codificação com IA de código aberto. Adicione o servidor MCP ao seu arquivo de configuração opencode.json:

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

Alternativamente, adicione-o via linha de comando:

opencode mcp add

Na primeira vez que usar o servidor, você será solicitado a autorizar o acesso pelo navegador.

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.

Integração com Cliente MCP do Zapier

Pipedream

O Pipedream suporta servidores MCP para construir fluxos de trabalho serverless. 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.

Exemplos de Prompts

Uma vez configurado, você pode pedir ao seu assistente de IA para gerar imagens naturalmente. Aqui estão alguns exemplos:

Criar uma imagem a partir de HTML:

• "Crie uma imagem de um botão azul que diz 'Inscreva-se' com cantos arredondados e uma sombra sutil"
• "Gere um cartão social com fundo gradiente e o título 'Olá Mundo'"

Capturar tela de um site:

• "Tire uma captura de tela de https://stripe.com com device_scale definido como 2 para alta resolução"
• "Capture a tabela de preços em https://example.com/pricing usando o seletor '.pricing-grid'"

Gerar imagens para redes sociais:

• "Crie uma imagem de cartão para Twitter/X com fundo gradiente, o título 'Lançamento em Breve' e nosso logotipo"
• "Faça uma imagem Open Graph para minha postagem de blog sobre Python"

Criar imagens em lote:

• "Crie 10 variações de uma imagem de cartão de produto, cada uma com uma cor de fundo diferente"

Trabalhar com modelos:

• "Liste meus modelos salvos"
• "Crie uma imagem usando meu modelo 'social-card' com o título definido como 'Lançamento de Novo Recurso'"
• "Salve este HTML/CSS como um modelo chamado 'blog-header' para que eu possa reutilizá-lo"

Se você criar modelos no painel primeiro, a documentação do Editor de Modelos pode ajudar você a escolher blocos, configurar variáveis e decidir quais valores o servidor MCP deve passar como template_values.

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	Controle 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	Defina como true para usar fontes de emoji nativas em vez de Twemoji.
format	String	Escolha a extensão do arquivo na URL da imagem retornada inicialmente: png, jpg, webp ou pdf.
full_screen	Boolean	Gere uma imagem de toda a altura de uma página de URL.
google_fonts	String	Carregue uma ou mais fontes do Google, como Roboto|Open Sans.
headers	Object	Adicione 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	Adicione X-HCTI-SCREENSHOT: 1 à solicitação de nível superior ao capturar uma URL.
include_headers_on_subrequests	Boolean	Também adicione headers personalizados a sub-solicitações de mesma origem e sub-solicitações que correspondam 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	Defina um limite máximo de tempo de 500 a 10000 milissegundos para esperar 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 esperar por JavaScript; comece com 500 milissegundos.
pdf_options	Object	Personalize a saída de PDF com tamanho de página, margens, escala e impressão de fundo.
proxy_id	String	Roteie o tráfego de saída através de 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	Espere para gerar a imagem até que o JavaScript chame ScreenshotReady().
selector	String	Recorte a imagem para um elemento que corresponda a este seletor CSS, como section#complete-toolkit.container-lg.
storage_destination_id	String	Salve 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	Defina 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	Defina a altura do viewport do Chrome. Ambas as dimensões devem ser definidas ao usar qualquer uma delas.
viewport_landscape	Boolean	Defina o viewport do Chrome para o modo paisagem.
viewport_mobile	Boolean	Defina o viewport do Chrome para emular um dispositivo móvel.
viewport_touch	Boolean	Defina o viewport do Chrome para suportar eventos de toque.
viewport_width	Integer	Defina 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 HTML/CSS to Image correta no seu navegador
• Verifique se os pop-ups não estão bloqueados quando a janela OAuth tenta abrir

Problemas de Conexão

Se o servidor MCP não estiver conectando:

• Garanta 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
• Garanta que o conteúdo HTML seja válido
• Para capturas de tela de URL, verifique se a URL é publicamente acessível

---

Precisa de ajuda?

Fale com um humano. Envie um e-mail para support@htmlcsstoimage.com com qualquer dúvida e teremos prazer em ajudá-lo a começar.