HTML/CSS to Image

Intégration du serveur MCP HTML/CSS to Image

Prenez des captures d'écran de sites web, générez des images ou des PDF, et gérez les ressources de votre organisation directement depuis votre assistant IA.

Introduction

Quel que soit l'outil ou l'agent IA que vous utilisez, vous pouvez le connecter à HTML/CSS to Image via MCP. Donnez à n'importe quel assistant compatible une URL publique ou du HTML/CSS, et demandez-lui de prendre une capture d'écran, de générer un PDF ou de créer des images à partir de vos modèles enregistrés.

• Commencez gratuitement. Un compte HCTI gratuit fonctionne avec toute intégration. La création d'images utilise les crédits d'images disponibles de votre organisation, comme avec l'API.
• Connectez-vous en toute sécurité. Autorisez votre compte via OAuth dans votre navigateur, sans copier de clés API dans votre assistant.
• Aucune infrastructure de navigateur à gérer. HCTI gère le rendu et renvoie une URL hébergée que vous pouvez ouvrir, télécharger ou partager.

Vous pouvez également demander à votre assistant de configurer des proxys, des destinations de stockage et des images Open Graph automatiques via les fonctionnalités de l'API de gestion. Ces opérations nécessitent des autorisations OAuth supplémentaires ; la gestion des clés API est réservée à l'API REST.

Choisissez votre client

Choisissez votre assistant pour obtenir les instructions de configuration et des exemples copiables.

Client	Comment se connecter
ChatGPT & Codex	Installez le plugin officiel ; utilisez-le dans une conversation ou une tâche de codage.
Claude & Claude Code	Installez-le depuis l'annuaire des connecteurs Claude, ou connectez Claude Code.
Cline	Connectez un serveur HTTP Streamable depuis l'extension Cline.
Cursor	Ajoutez HCTI à Cursor Agent avec le bouton d'installation ou la configuration MCP.
Gemini CLI	Connectez Gemini CLI avec un serveur HTTP distant et une connexion via navigateur.
GitHub Copilot	Connectez Copilot CLI depuis votre terminal.
Grok	Utilisez le plugin HCTI ou une connexion MCP directe dans Grok Build.
IDE JetBrains	Connectez AI Assistant via un pont MCP compatible OAuth.
OpenCode	Configurez un serveur MCP distant et autorisez-le depuis la CLI.
VS Code	Ajoutez un serveur HTTP distant et utilisez ses outils en mode Copilot Agent.
Windsurf	Connectez HCTI à Cascade pour les captures d'écran et le rendu.
Zed	Ajoutez un serveur MCP distant au panneau Agent.

Qu'est-ce que MCP ?

Le Model Context Protocol permet aux assistants d'appeler des outils externes. Le serveur MCP hébergé de HCTI génère le rendu du HTML/CSS ou de l'URL publique fournie par votre assistant et renvoie le résultat. Vous n'avez pas besoin d'exécuter un navigateur de rendu vous-même.

URL du serveur MCP : https://mcp.hcti.io

Transport : HTTP Streamable

Authentification : OAuth

Notre plugin agent inclut également des conseils d'utilisation pour HCTI. Lorsqu'un client prend en charge ce plugin, son installation fournit à la fois la connexion et les instructions pour l'assistant. Une connexion MCP directe donne accès aux outils ci-dessous.

Outils disponibles

Ces outils principaux fonctionnent avec tous les clients MCP. L'accès dépend des autorisations approuvées pour votre connexion. Demandez à votre assistant d'utiliser HCTI par son nom.

Utilisation du compte

Outil	Fonction
check_usage	Vérifiez les images utilisées, le quota d'images, la prochaine réinitialisation et les paramètres de dépassement sans générer d'image.

Captures d'écran et rendu

Outil	Fonction
create_image	Génère le rendu HTML/CSS en PNG, JPG, WebP ou PDF. Prend en charge device_scale, viewport_width, viewport_height et ms_delay.
create_url_image	Capture une page publique ou un sélecteur CSS, avec paramètres de viewport et blocage des bannières de cookies.
create_templated_image	Génère le rendu d'un modèle enregistré avec template_id et template_values.
create_batch_images	Génère des variantes avec des default_options partagées et des variations par image.
get_max_batch_size	Vérifiez la limite de lot du compte avant de préparer un lot.

Retour d'information

Outil	Fonction
submit_feedback	Signalez des bugs, demandez des fonctionnalités et suggérez des améliorations à l'équipe HCTI. Voir la référence de l'outil de retour d'information.

Gestion des modèles

Outil	Fonction
create_template	Enregistrez du HTML/CSS comme modèle réutilisable avec des variables.
update_template	Mettez à jour un modèle existant par ID.
list_templates	Recherchez des modèles dans le compte connecté.
list_template_versions	Inspectez l'historique des versions d'un modèle.

Voir les paramètres de rendu et l'éditeur de modèles pour les options d'image et les designs réutilisables. La référence complète des outils couvre également les proxys, les destinations de stockage, les configurations Open Graph et les autorisations requises.

Authentification

Après avoir ajouté HCTI, utilisez l'action de connexion de votre client et terminez l'autorisation dans votre navigateur. Connectez-vous au compte HCTI dont vous souhaitez utiliser les modèles et les crédits, vérifiez l'organisation et les autorisations sélectionnées, puis revenez à l'assistant. Ouvrez Plus d'autorisations pour sélectionner un accès de gestion supplémentaire si nécessaire. Certains clients demandent automatiquement à la première utilisation ; les guides individuels montrent comment se connecter explicitement.

Pour vérifier la connexion sans générer d'image, demandez : « Utilisez HCTI pour vérifier mon utilisation d'images et mes limites de compte. » L'outil check_usage nécessite usage:read et renvoie l'utilisation et les limites sans générer d'image. get_max_batch_size nécessite également usage:read. Les demandes de rendu utilisent le quota d'images de votre compte HCTI ; votre abonnement à l'assistant est distinct.

Exemples de requêtes

Comment prendre une capture d'écran d'un site 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.

Ouvrez l'URL renvoyée pour inspecter la capture. Pour capturer uniquement une partie de votre propre site, fournissez un sélecteur CSS tel que .pricing-grid qui existe réellement sur cette page. HCTI doit pouvoir atteindre l'URL depuis son service hébergé ; localhost n'est pas accessible.

Comment générer du HTML et CSS en 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.

Le résultat doit afficher un texte blanc centré sur une carte bleu foncé. L'assistant envoie le HTML/CSS à HCTI pour le rendu. Lorsque vous travaillez depuis un dépôt, demandez-lui de lire les fichiers pertinents et de fournir un balisage et des styles autonomes ; les chemins d'accès aux ressources locales doivent être remplacés par des ressources accessibles.

Comment exporter 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.

Comment réutiliser un modèle et créer des variantes

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.

Utilisez l'éditeur de modèles pour concevoir un modèle et définir les valeurs que votre assistant doit transmettre comme template_values.

Comment inspecter les ressources de l'organisation

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

Approuvez og_configs:read pour cet exemple. Pour créer ou mettre à jour des configurations, approuvez également og_configs:create_update. Voir la référence des outils pour les opérations de gestion des proxys, des destinations de stockage et des OG.

Paramètres d'image

Lors de la création d'images, les principaux paramètres sont :

Paramètre	Type	Description
html	String	Le contenu HTML à générer. Requis pour create_image.
css	String	Les styles CSS pour votre HTML.
url	String	L'URL à capturer. Requise pour create_url_image.

Paramètres supplémentaires

Nom	Type	Description
additional_header_origins	Array	Autoriser des headers personnalisés sur les requêtes vers des origines HTTP ou HTTPS supplémentaires spécifiques.
block_consent_banners	Boolean	Lorsqu'il est défini sur true, bloque automatiquement les bannières de consentement aux cookies et les popups sur les sites web. Particulièrement utile pour les captures d'écran d'URL.
color_scheme	String	Configure Chrome pour le rendu en mode light ou dark. Affecte les sites web utilisant prefers-color-scheme.
dedupe_duration_s	Integer	Réutilise une image récente identique sans consommer de crédits d'image. Définit la fenêtre de recherche en secondes ; les valeurs par défaut et autorisées varient selon le type d'image et le plan.
device_scale	Double	Contrôle la résolution en ajustant le ratio de pixels de 0.1 à 3. Des valeurs plus élevées augmentent la qualité de l'image et la taille du fichier.
disable_twemoji	Boolean	Les images HTML/CSS et de modèles utilisent Twemoji par défaut ; définissez true pour le désactiver. Les images d'URL injectent Twemoji uniquement lorsqu'il est explicitement défini sur false.
format	String	Choisissez l'extension de fichier dans l'URL d'image initialement renvoyée : png, jpg, webp ou pdf.
full_screen	Boolean	Génère une image de toute la hauteur d'une page URL.
google_fonts	String	Charge une ou plusieurs polices Google, telles que Roboto|Open Sans.
headers	Object	Ajoute des en-têtes HTTP personnalisés lors de la capture d'écran d'une URL. Les en-têtes sont limités à l'origine de l'URL demandée et à tout additional_header_origins.
identify_as_hcti	Boolean	Ajoute X-HCTI-SCREENSHOT: 1 à la requête de premier niveau lors de la capture d'écran d'une URL.
include_headers_on_subrequests	Boolean	Ajoute également des headers personnalisés aux sous-requêtes de même origine et aux sous-requêtes correspondant à additional_header_origins.
jumbo_max_height	Integer	Hauteur de sortie maximale en mode jumbo, jusqu'à 80,000 pixels. Doit être définie avec jumbo_max_width et consomme des crédits d'image supplémentaires.
jumbo_max_width	Integer	Largeur de sortie maximale en mode jumbo, jusqu'à 80,000 pixels. Doit être définie avec jumbo_max_height et consomme des crédits d'image supplémentaires.
max_wait_ms	Integer	Définit une limite de temps maximale de 500 à 10000 millisecondes pour l'attente avant la prise de la capture d'écran.
media_type	String	Configure Chrome pour le rendu en utilisant les styles de médias CSS screen ou print.
ms_delay	Integer	Délai avant la génération de l'image. Utile lors de l'attente de JavaScript ; commencez par 500 millisecondes.
pdf_options	Object	Personnalise la sortie PDF avec la taille de page, les marges, l'échelle et l'impression de l'arrière-plan.
proxy_id	String	Achemine le trafic sortant via l'un des proxys HTTP configurés de votre organisation. Disponible sur le plan de 10 000 images/mois ou plus.
render_when_ready	Boolean	Attend pour générer l'image jusqu'à ce que JavaScript appelle ScreenshotReady().
request_overrides	Array	Bloque les requêtes réseau du navigateur correspondant à un modèle de wildcard d'URL et/ou à des types de ressources. Nécessite un plan payant.
selector	String	Recadre l'image sur un élément correspondant à ce sélecteur CSS, tel que section#complete-toolkit.container-lg.
storage_destination_id	String	Enregistre les fichiers rendus vers l'une des destinations de stockage configurées de votre organisation. Disponible sur le plan de 10 000 images/mois ou plus.
timezone	String	Définit le fuseau horaire de Chrome avec un identifiant IANA tel que America/New_York.
transparent_background	Boolean	Définissez sur true pour rendre avec un arrière-plan transparent.
viewport_height	Integer	Définit la hauteur de la fenêtre d'affichage de Chrome. Les deux dimensions doivent être définies lors de l'utilisation de l'une ou l'autre.
viewport_landscape	Boolean	Définit la fenêtre d'affichage de Chrome en mode paysage.
viewport_mobile	Boolean	Définit la fenêtre d'affichage de Chrome pour émuler un appareil mobile.
viewport_touch	Boolean	Définit la fenêtre d'affichage de Chrome pour prendre en charge les événements tactiles.
viewport_width	Integer	Définit la largeur de la fenêtre d'affichage de Chrome. Les deux dimensions doivent être définies lors de l'utilisation de l'une ou l'autre.

Dépannage

Erreurs d'authentification

Si vous recevez des erreurs d'authentification :

• Essayez de déconnecter et de reconnecter le serveur MCP pour déclencher un nouveau flux OAuth
• Assurez-vous d'être connecté au bon compte HTML/CSS to Image dans votre navigateur
• Vérifiez que les popups ne sont pas bloqués lorsque la fenêtre OAuth tente de s'ouvrir

Erreurs de permissions

Un outil répertorié peut nécessiter des permissions que votre connexion ne possède pas. Déconnectez et reconnectez HCTI, puis approuvez l'accès requis pour l'organisation prévue. L'actualisation d'un jeton existant n'ajoute pas de permissions. Ne réessayez pas une opération refusée tant que l'accès n'a pas changé. Voir autorisation MCP.

Erreurs de limites de débit

Les limites des outils de gestion sont partagées avec les requêtes REST de votre organisation. Attendez 60 secondes avant de réessayer un outil limité en débit ; voir limites de débit.

Problèmes de connexion

Si le serveur MCP ne se connecte pas :

• Assurez-vous que votre réseau autorise les connexions HTTPS sortantes
• Vérifiez que l'URL est exactement https://mcp.hcti.io
• Redémarrez votre assistant IA après avoir mis à jour la configuration

Erreurs de génération d'images

Si les images ne se génèrent pas :

• Vérifiez que votre compte dispose de crédits d'image disponibles sur le tableau de bord
• Assurez-vous que le contenu HTML est valide
• Pour les captures d'écran d'URL, vérifiez que l'URL est accessible publiquement

Plateformes d'automatisation

Vous pouvez également utiliser le serveur MCP avec des plateformes d'automatisation :

Zapier

Zapier dispose d'un client MCP dédié qui se connecte aux serveurs MCP. Cela vous permet d'utiliser le serveur MCP HTML/CSS to Image dans les workflows Zapier sans écrire de code.

Client MCP Zapier

Pipedream

Pipedream prend en charge les serveurs MCP pour créer des workflows serverless. Connectez le serveur MCP HTML/CSS to Image pour automatiser la génération d'images dans vos workflows Pipedream.

Intégration MCP Pipedream

Le serveur MCP est également répertorié sur Smithery.

Besoin d'aide ?

Parlez à un humain. Envoyez un e-mail à support@htmlcsstoimage.com et nous vous aiderons à démarrer.