HTML/CSS to Image

Intégration du serveur MCP

Générez des images avec des assistants IA en utilisant le Model Context Protocol.

Nouvelle fonctionnalité

Le serveur MCP est une nouvelle fonctionnalité. Nous serions ravis de recevoir vos retours ! Envoyez-nous un e-mail à support@htmlcsstoimage.com.

---

Qu'est-ce que MCP ?

Le Model Context Protocol (MCP) est un standard ouvert qui permet aux assistants IA de se connecter à des outils et services externes. Avec notre serveur MCP, vous pouvez générer des images directement depuis votre assistant de codage IA sans écrire de code.

Décrivez simplement ce que vous voulez, et l'IA utilisera l'API HTML/CSS to Image pour le créer pour vous.

URL du serveur MCP : mcp.hcti.io

Outils disponibles

Le serveur MCP fournit les outils suivants :

Création d'images

Outil	Description
create_image	Génère une image à partir de HTML et CSS. Prend en charge tous les paramètres standard comme device_scale, viewport_width, viewport_height, ms_delay, et plus encore.
create_url_image	Prend une capture d'écran de n'importe quelle URL publique. Inclut des options pour les sélecteurs, les paramètres de fenêtre d'affichage et le blocage des bannières de cookies.
create_templated_image	Génère une image à l'aide d'un modèle enregistré. Passez template_id et template_values pour substituer des variables dans votre modèle.
create_batch_images	Crée jusqu'à 25 images en une seule requête. Définissez default_options et fournissez variations pour chaque image.
get_max_batch_size	Vérifie le nombre maximal d'images que vous pouvez créer en un seul lot en fonction de votre forfait.

Gestion des modèles

Outil	Description
create_template	Enregistre un modèle HTML/CSS réutilisable pour générer des images avec substitution de variables.
update_template	Modifie un modèle existant en fournissant le template_id et le nouveau contenu.
list_templates	Affiche tous les modèles enregistrés dans votre compte. Renvoie jusqu'à 100 modèles par requête.
list_template_versions	Affiche l'historique des versions d'un modèle spécifique.

Authentification

Le serveur MCP utilise OAuth pour l'authentification. Lors de votre première connexion, votre navigateur s'ouvrira automatiquement pour autoriser l'accès à votre compte HTML/CSS to Image. Aucune configuration manuelle d'identifiants n'est requise.

Configuration pour Cursor

Cliquez sur le bouton ci-dessous pour installer automatiquement le serveur MCP HTML/CSS to Image dans Cursor :

Ou ajoutez manuellement la configuration suivante à votre fichier .cursor/mcp.json :

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

Redémarrez Cursor après avoir enregistré la configuration. La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour Claude Code

Pour utiliser le serveur MCP avec Claude Code, exécutez la commande suivante :

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

Pour vérifier que le serveur a été ajouté :

claude mcp list

La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour Claude Desktop

Claude Desktop (l'application autonome) prend également en charge les serveurs MCP. Modifiez votre fichier de configuration Claude Desktop :

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

Windows : %APPDATA%\Claude\claude_desktop_config.json

Ajoutez la configuration suivante :

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

Redémarrez Claude Desktop après avoir enregistré la configuration. La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour Windsurf

Windsurf (par Codeium) prend en charge les serveurs MCP. Ajoutez ce qui suit à votre fichier ~/.codeium/windsurf/mcp_config.json :

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

Redémarrez Windsurf après avoir mis à jour la configuration. La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour Cline (VS Code)

Cline est un agent de codage autonome populaire pour VS Code. Pour ajouter le serveur MCP :

1. Ouvrez VS Code et allez dans Cline Settings
2. Naviguez vers MCP Servers
3. Cliquez sur Add Server et configurez :

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

Alternativement, modifiez directement votre fichier de paramètres MCP Cline à ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json.

La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour Zed

Zed est un éditeur de code haute performance avec des fonctionnalités IA. Ajoutez le serveur MCP à vos paramètres Zed (~/.config/zed/settings.json) :

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

La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

Configuration pour OpenCode

OpenCode est un assistant de codage IA open source. Ajoutez le serveur MCP à votre fichier de configuration opencode.json :

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

Alternativement, ajoutez-le via la ligne de commande :

opencode mcp add

La première fois que vous utiliserez le serveur, vous serez invité à autoriser l'accès via votre navigateur.

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.

Intégration du 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.

Exemples de prompts

Une fois configuré, vous pouvez demander à votre assistant IA de générer des images naturellement. Voici quelques exemples :

Créer une image à partir de HTML :

• « Crée une image d'un bouton bleu qui dit « Subscribe Now » avec des coins arrondis et une ombre subtile »
• « Génère une carte sociale avec un fond en dégradé et le titre « Hello World » »

Capturer un site web :

• « Prends une capture d'écran de https://stripe.com avec device_scale défini sur 2 pour une haute résolution »
• « Capture la table des prix sur https://example.com/pricing en utilisant le sélecteur « .pricing-grid » »

Générer des images pour les réseaux sociaux :

• « Crée une image de carte Twitter/X avec un fond en dégradé, le titre « Launching Soon » et notre logo »
• « Fais une image Open Graph pour mon article de blog sur Python »

Créer des images par lots :

• « Crée 10 variantes d'une image de carte produit, chacune avec une couleur de fond différente »

Travailler avec des modèles :

• « Liste mes modèles enregistrés »
• « Crée une image en utilisant mon modèle « social-card » avec le titre défini sur « New Feature Release » »
• « Enregistre ce HTML/CSS comme modèle appelé « blog-header » pour pouvoir le réutiliser »

Si vous concevez des modèles dans le tableau de bord d'abord, la documentation de l'éditeur de modèles peut vous aider à choisir des blocs, configurer des variables et décider quelles valeurs le serveur MCP doit passer comme template_values.

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 à rendre. Requis pour create_image.
css	String	Les styles CSS pour votre HTML.
url	String	L'URL à capturer. Requis pour create_url_image.

Paramètres supplémentaires

Nom	Type	Description
additional_header_origins	Array	Autorise 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. Plus utile pour les captures d'écran d'URL.
color_scheme	String	Configure Chrome pour rendre 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 forfait.
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	Définissez sur true pour utiliser les polices d'emoji natives au lieu de Twemoji.
full_screen	Boolean	Génère une image de la hauteur totale d'une page URL.
google_fonts	String	Charge une ou plusieurs polices Google, comme Roboto|Open Sans.
headers	Object	Ajoute des en-têtes HTTP personnalisés lors de la capture 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'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éfini 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éfini 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 attendre avant de prendre la capture d'écran.
media_type	String	Configure Chrome pour rendre en utilisant les styles CSS média screen ou print.
ms_delay	Integer	Délai avant de générer l'image. Utile lors de l'attente de JavaScript ; commencez avec 500 millisecondes.
pdf_options	Object	Personnalise la sortie PDF avec la taille de page, les marges, l'échelle et l'impression d'arrière-plan.
proxy_id	String	Achemine le trafic sortant via l'un des proxys HTTP configurés de votre organisation. Disponible sur le forfait 10 000 images/mois ou supérieur.
render_when_ready	Boolean	Attend de générer l'image jusqu'à ce que JavaScript appelle ScreenshotReady().
selector	String	Recadre l'image sur un élément correspondant à ce sélecteur CSS, comme 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 forfait 10 000 images/mois ou supérieur.
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

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’images 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

---

Besoin d’aide ?

Parlez à un humain. Veuillez nous envoyer un e-mail à support@htmlcsstoimage.com pour toute question, et nous serons ravis de vous aider à démarrer.