HTML/CSS to Image

MCP-Server-Integration

Generieren Sie Bilder mit KI-Assistenten über das Model Context Protocol.

Neue Funktion

Der MCP-Server ist eine neue Funktion. Wir freuen uns über Ihr Feedback! Schreiben Sie uns eine E-Mail an support@htmlcsstoimage.com.

---

Was ist MCP?

Das Model Context Protocol (MCP) ist ein offener Standard, der es KI-Assistenten ermöglicht, eine Verbindung zu externen Tools und Diensten herzustellen. Mit unserem MCP-Server können Sie direkt aus Ihrem KI-Codierungsassistenten Bilder generieren, ohne Code zu schreiben.

Beschreiben Sie einfach, was Sie möchten, und die KI verwendet die HTML/CSS to Image API, um es für Sie zu erstellen.

MCP-Server-URL: mcp.hcti.io

Verfügbare Tools

Der MCP-Server bietet die folgenden Tools:

Bilderstellung

Tool	Beschreibung
create_image	Generieren Sie ein Bild aus HTML und CSS. Unterstützt alle Standardparameter wie device_scale, viewport_width, viewport_height, ms_delay und mehr.
create_url_image	Machen Sie einen Screenshot von jeder öffentlichen URL. Enthält Optionen für Selektoren, Viewport-Einstellungen und Cookie-Banner-Blockierung.
create_templated_image	Generieren Sie ein Bild mit einer gespeicherten Vorlage. Übergeben Sie template_id und template_values, um Variablen in Ihrer Vorlage zu ersetzen.
create_batch_images	Erstellen Sie bis zu 25 Bilder in einer einzigen Anfrage. Setzen Sie default_options und geben Sie variations für jedes Bild an.
get_max_batch_size	Überprüfen Sie die maximale Anzahl von Bildern, die Sie in einem einzelnen Batch basierend auf Ihrem Plan erstellen können.

Vorlagenverwaltung

Tool	Beschreibung
create_template	Speichern Sie eine wiederverwendbare HTML/CSS-Vorlage zum Generieren von Bildern mit Variablenersetzung.
update_template	Ändern Sie eine vorhandene Vorlage, indem Sie die template_id und neue Inhalte angeben.
list_templates	Zeigen Sie alle gespeicherten Vorlagen in Ihrem Konto an. Gibt bis zu 100 Vorlagen pro Anfrage zurück.
list_template_versions	Zeigen Sie den Versionsverlauf einer bestimmten Vorlage an.

Authentifizierung

Der MCP-Server verwendet OAuth zur Authentifizierung. Wenn Sie sich zum ersten Mal verbinden, öffnet sich Ihr Browser automatisch, um den Zugriff auf Ihr HTML/CSS to Image-Konto zu autorisieren. Keine manuelle Konfiguration von Anmeldeinformationen erforderlich.

Einrichtung für Cursor

Klicken Sie auf die Schaltfläche unten, um den HTML/CSS to Image MCP-Server automatisch in Cursor zu installieren:

Oder fügen Sie manuell die folgende Konfiguration zu Ihrer .cursor/mcp.json-Datei hinzu:

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

Starten Sie Cursor nach dem Speichern der Konfiguration neu. Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für Claude Code

Um den MCP-Server mit Claude Code zu verwenden, führen Sie den folgenden Befehl aus:

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

Um zu überprüfen, ob der Server hinzugefügt wurde:

claude mcp list

Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für Claude Desktop

Claude Desktop (die eigenständige App) unterstützt ebenfalls MCP-Server. Bearbeiten Sie Ihre Claude Desktop-Konfigurationsdatei:

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

Windows: %APPDATA%\Claude\claude_desktop_config.json

Fügen Sie die folgende Konfiguration hinzu:

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

Starten Sie Claude Desktop nach dem Speichern der Konfiguration neu. Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für Windsurf

Windsurf (von Codeium) unterstützt MCP-Server. Fügen Sie Folgendes zu Ihrer ~/.codeium/windsurf/mcp_config.json-Datei hinzu:

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

Starten Sie Windsurf nach dem Aktualisieren der Konfiguration neu. Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für Cline (VS Code)

Cline ist ein beliebter autonomer Codierungsagent für VS Code. So fügen Sie den MCP-Server hinzu:

1. Öffnen Sie VS Code und gehen Sie zu Cline-Einstellungen
2. Navigieren Sie zu MCP-Server
3. Klicken Sie auf Server hinzufügen und konfigurieren Sie:

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

Alternativ können Sie Ihre Cline-MCP-Einstellungsdatei direkt unter ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json bearbeiten.

Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für Zed

Zed ist ein leistungsstarker Code-Editor mit KI-Funktionen. Fügen Sie den MCP-Server zu Ihren Zed-Einstellungen hinzu (~/.config/zed/settings.json):

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

Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Einrichtung für OpenCode

OpenCode ist ein Open-Source-KI-Codierungsassistent. Fügen Sie den MCP-Server zu Ihrer opencode.json-Konfigurationsdatei hinzu:

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

Alternativ können Sie ihn über die Befehlszeile hinzufügen:

opencode mcp add

Beim ersten Verwenden des Servers werden Sie aufgefordert, den Zugriff über Ihren Browser zu autorisieren.

Automatisierungsplattformen

Sie können den MCP-Server auch mit Automatisierungsplattformen verwenden:

Zapier

Zapier verfügt über einen dedizierten MCP-Client, der eine Verbindung zu MCP-Servern herstellt. Dadurch können Sie den HTML/CSS to Image MCP-Server in Zapier-Workflows verwenden, ohne Code zu schreiben.

Zapier MCP-Client-Integration

Pipedream

Pipedream unterstützt MCP-Server zum Erstellen serverloser Workflows. Verbinden Sie den HTML/CSS to Image MCP-Server, um die Bildgenerierung in Ihren Pipedream-Workflows zu automatisieren.

Pipedream MCP-Integration

Der MCP-Server ist auch auf Smithery gelistet.

Beispiel-Prompts

Nach der Konfiguration können Sie Ihren KI-Assistenten bitten, Bilder auf natürliche Weise zu generieren. Hier sind einige Beispiele:

Ein Bild aus HTML erstellen:

• „Erstellen Sie ein Bild eines blauen Buttons mit der Aufschrift ‚Jetzt abonnieren‘ mit abgerundeten Ecken und einem dezenten Schatten“
• „Generieren Sie eine Social Card mit einem Verlaufsverlauf-Hintergrund und dem Titel ‚Hallo Welt‘“

Screenshot einer Website:

• „Machen Sie einen Screenshot von https://stripe.com mit device_scale auf 2 für hohe Auflösung“
• „Screenshot der Preistabelle auf https://example.com/pricing mit dem Selektor ‚.pricing-grid‘“

Social-Media-Bilder generieren:

• „Erstellen Sie ein Twitter/X-Kartenbild mit einem Verlaufsverlauf-Hintergrund, dem Titel ‚Startet bald‘ und unserem Logo“
• „Erstellen Sie ein Open-Graph-Bild für meinen Blogbeitrag über Python“

Bilder in Stapeln erstellen:

• „Erstellen Sie 10 Variationen eines Produktkartenbilds, jeweils mit einer anderen Hintergrundfarbe“

Mit Vorlagen arbeiten:

• „Listen Sie meine gespeicherten Vorlagen auf“
• „Erstellen Sie ein Bild mit meiner ‚social-card‘-Vorlage mit dem Titel ‚Neue Funktionsveröffentlichung‘“
• „Speichern Sie dieses HTML/CSS als Vorlage mit dem Namen ‚blog-header‘, damit ich es wiederverwenden kann“

Wenn Sie zuerst Vorlagen im Dashboard entwerfen, können Ihnen die Template-Editor-Dokumente bei der Auswahl von Blöcken, der Einrichtung von Variablen und der Entscheidung helfen, welche Werte der MCP-Server als template_values übergeben soll.

Bildparameter

Beim Erstellen von Bildern sind die Hauptparameter:

Parameter	Typ	Beschreibung
html	String	Der zu rendernde HTML-Inhalt. Erforderlich für create_image.
css	String	CSS-Stile für Ihr HTML.
url	String	Die URL für den Screenshot. Erforderlich für create_url_image.

Zusätzliche Parameter

Name	Typ	Beschreibung
additional_header_origins	Array	Erlauben Sie benutzerdefinierte headers bei Anfragen an bestimmte zusätzliche HTTP- oder HTTPS-Ursprünge.
block_consent_banners	Boolean	Wenn auf true gesetzt, blockiert automatisch Cookie-Einwilligungsbanner und Popups auf Websites. Am nützlichsten für URL-Screenshots.
color_scheme	String	Legen Sie fest, dass Chrome im light- oder dark-Modus rendert. Betrifft Websites, die prefers-color-scheme verwenden.
dedupe_duration_s	Integer	Verwenden Sie ein identisches aktuelles Bild erneut, ohne Bildguthaben zu verbrauchen. Legt das Rückschaufenster in Sekunden fest; Standardwerte und zulässige Werte variieren je nach Bildtyp und Plan.
device_scale	Double	Steuern Sie die Auflösung, indem Sie das Pixelverhältnis von 0.1 bis 3 anpassen. Höhere Werte erhöhen die Bildqualität und Dateigröße.
disable_twemoji	Boolean	Setzen Sie auf true, um native Emoji-Schriftarten anstelle von Twemoji zu verwenden.
format	String	Wählen Sie die Dateierweiterung in der ursprünglich zurückgegebenen Bild-URL: png, jpg, webp oder pdf.
full_screen	Boolean	Generieren Sie ein Bild der gesamten Höhe einer URL-Seite.
google_fonts	String	Laden Sie eine oder mehrere Google-Schriftarten, z. B. Roboto|Open Sans.
headers	Object	Fügen Sie beim Screenshot einer URL benutzerdefinierte HTTP-Header hinzu. Header sind auf den Ursprung der angeforderten URL und alle additional_header_origins beschränkt.
identify_as_hcti	Boolean	Fügen Sie X-HCTI-SCREENSHOT: 1 zur Top-Level-Anfrage hinzu, wenn Sie einen Screenshot einer URL erstellen.
include_headers_on_subrequests	Boolean	Fügen Sie auch benutzerdefinierte headers zu Subrequests mit gleichem Ursprung und Subrequests hinzu, die additional_header_origins entsprechen.
jumbo_max_height	Integer	Maximale Ausgabehöhe im Jumbo-Modus, bis zu 80,000 Pixel. Muss mit jumbo_max_width gesetzt werden und verbraucht zusätzliches Bildguthaben.
jumbo_max_width	Integer	Maximale Ausgabebreite im Jumbo-Modus, bis zu 80,000 Pixel. Muss mit jumbo_max_height gesetzt werden und verbraucht zusätzliches Bildguthaben.
max_wait_ms	Integer	Legen Sie ein maximales Zeitlimit von 500 bis 10000 Millisekunden für das Warten vor dem Screenshot fest.
media_type	String	Legen Sie fest, dass Chrome mit screen- oder print-CSS-Medienstilen rendert.
ms_delay	Integer	Verzögerung vor der Bildgenerierung. Nützlich beim Warten auf JavaScript; beginnen Sie mit 500 Millisekunden.
pdf_options	Object	Passen Sie die PDF-Ausgabe mit Seitengröße, Rändern, Skalierung und Hintergrunddruck an.
proxy_id	String	Leiten Sie ausgehenden Datenverkehr über einen der konfigurierten HTTP-Proxys Ihrer Organisation. Verfügbar ab dem Plan mit 10.000 Bildern/Monat.
render_when_ready	Boolean	Warten Sie mit der Bildgenerierung, bis JavaScript ScreenshotReady() aufruft.
selector	String	Beschneiden Sie das Bild auf ein Element, das diesem CSS-Selektor entspricht, z. B. section#complete-toolkit.container-lg.
storage_destination_id	String	Speichern Sie gerenderte Dateien an einem der konfigurierten Speicherziele Ihrer Organisation. Verfügbar ab dem Plan mit 10.000 Bildern/Monat.
timezone	String	Legen Sie die Zeitzone von Chrome mit einer IANA-Kennung wie America/New_York fest.
transparent_background	Boolean	Setzen Sie auf true, um mit transparentem Hintergrund zu rendern.
viewport_height	Integer	Legen Sie die Höhe des Chrome-Viewports fest. Beide Abmessungen müssen festgelegt werden, wenn eine davon verwendet wird.
viewport_landscape	Boolean	Legen Sie den Chrome-Viewport auf den Querformatmodus fest.
viewport_mobile	Boolean	Legen Sie den Chrome-Viewport so fest, dass er ein mobiles Gerät emuliert.
viewport_touch	Boolean	Legen Sie den Chrome-Viewport so fest, dass er Touch-Ereignisse unterstützt.
viewport_width	Integer	Legen Sie die Breite des Chrome-Viewports fest. Beide Abmessungen müssen festgelegt werden, wenn eine davon verwendet wird.

Fehlerbehebung

Authentifizierungsfehler

Wenn Sie Authentifizierungsfehler erhalten:

• Versuchen Sie, den MCP-Server zu trennen und wieder zu verbinden, um einen neuen OAuth-Flow auszulösen
• Stellen Sie sicher, dass Sie in Ihrem Browser beim richtigen HTML/CSS to Image-Konto angemeldet sind
• Überprüfen Sie, dass Pop-ups nicht blockiert werden, wenn das OAuth-Fenster geöffnet wird

Verbindungsprobleme

Wenn der MCP-Server keine Verbindung herstellt:

• Stelle sicher, dass dein Netzwerk ausgehende HTTPS-Verbindungen erlaubt
• Überprüfe, dass die URL exakt https://mcp.hcti.io ist
• Starte deinen KI-Assistenten neu, nachdem du die Konfiguration aktualisiert hast

Fehler bei der Bildgenerierung

Falls Bilder nicht generiert werden können:

• Überprüfe, dass dein Konto über verfügbare Bildguthaben auf dem Dashboard verfügt
• Stelle sicher, dass der HTML-Inhalt gültig ist
• Verifiziere bei URL-Screenshots, dass die URL öffentlich zugänglich ist

---

Hilfe benötigt?

Sprich mit einem Menschen. Sende uns bitte eine E-Mail an support@htmlcsstoimage.com bei Fragen, und wir helfen dir gerne beim Einstieg.