HTML/CSS to Image

Integration des MCP-Servers „HTML/CSS to Image“

Erstellen Sie Website-Screenshots, rendern Sie Bilder oder PDFs und verwalten Sie die Ressourcen Ihrer Organisation direkt über Ihren KI-Assistenten.

Einführung

Unabhängig davon, welches KI-Tool oder welchen Agenten Sie verwenden, können Sie es über MCP mit HTML/CSS to Image verbinden. Geben Sie einem kompatiblen Assistenten eine öffentliche URL oder HTML/CSS und bitten Sie ihn, einen Screenshot zu erstellen, ein PDF zu rendern oder Bilder aus Ihren gespeicherten Vorlagen zu erzeugen.

• Kostenlos starten. Ein kostenloses HCTI-Konto funktioniert mit jeder Integration. Das Erstellen von Bildern verbraucht die verfügbaren Bildguthaben Ihrer Organisation, genau wie bei der API.
• Sicher anmelden. Autorisieren Sie Ihr Konto über OAuth in Ihrem Browser, ohne API-Schlüssel in Ihren Assistenten zu kopieren.
• Keine Browser-Infrastruktur zu verwalten. HCTI übernimmt das Rendering und gibt eine gehostete URL zurück, die Sie öffnen, herunterladen oder teilen können.

Sie können Ihren Assistenten auch bitten, Proxys, Speicherziele und automatische Open-Graph-Bilder über die Management-API-Funktionen zu konfigurieren. Diese Vorgänge erfordern zusätzliche OAuth-Berechtigungen; die API-Schlüsselverwaltung ist nur über REST möglich.

Wählen Sie Ihren Client

Wählen Sie Ihren Assistenten für Einrichtungsanweisungen und kopierbare Beispiele.

Client	So verbinden Sie
ChatGPT & Codex	Installieren Sie das offizielle Plugin; verwenden Sie es in einem Gespräch oder einer Codierungsaufgabe.
Claude & Claude Code	Installieren Sie es aus dem Claude Connectors Directory oder verbinden Sie Claude Code.
Cline	Verbinden Sie einen Streamable-HTTP-Server aus der Cline-Erweiterung.
Cursor	Fügen Sie HCTI zu Cursor Agent mit der Installationsschaltfläche oder der MCP-Konfiguration hinzu.
Gemini CLI	Verbinden Sie Gemini CLI mit einem entfernten HTTP-Server und Browser-Anmeldung.
GitHub Copilot	Verbinden Sie Copilot CLI von Ihrem Terminal aus.
Grok	Verwenden Sie das HCTI-Plugin oder eine direkte MCP-Verbindung in Grok Build.
JetBrains IDEs	Verbinden Sie AI Assistant über eine OAuth-fähige MCP-Brücke.
OpenCode	Konfigurieren Sie einen entfernten MCP-Server und autorisieren Sie ihn über die CLI.
VS Code	Fügen Sie einen entfernten HTTP-Server hinzu und verwenden Sie seine Tools im Copilot-Agent-Modus.
Windsurf	Verbinden Sie HCTI mit Cascade für Screenshots und Rendering.
Zed	Fügen Sie einen entfernten MCP-Server zum Agent Panel hinzu.

Was ist MCP?

Das Model Context Protocol ermöglicht Assistenten den Aufruf externer Tools. Der gehostete MCP-Server von HCTI rendert das von Ihrem Assistenten bereitgestellte HTML/CSS oder die öffentliche URL und gibt das Ergebnis zurück. Sie müssen keinen Rendering-Browser selbst ausführen.

MCP-Server-URL: https://mcp.hcti.io

Transport: Streamable HTTP

Authentifizierung: OAuth

Unser Agent-Plugin bündelt auch Workflow-Anleitungen für die Verwendung von HCTI. Wenn ein Client dieses Plugin unterstützt, bietet die Installation sowohl die Verbindung als auch Anweisungen für den Assistenten. Eine direkte MCP-Verbindung bietet Zugriff auf die unten aufgeführten Tools.

Verfügbare Tools

Diese Kern-Tools funktionieren über alle MCP-Clients hinweg. Der Zugriff hängt von den für Ihre Verbindung genehmigten Berechtigungen ab. Bitten Sie Ihren Assistenten, HCTI beim Namen zu verwenden.

Kontonutzung

Tool	Funktion
check_usage	Prüft verwendete Bilder, Bildkontingent, nächsten Reset und Überschreitungseinstellungen, ohne ein Bild zu rendern.

Screenshots und Rendering

Tool	Funktion
create_image	Rendert HTML/CSS als PNG, JPG, WebP oder PDF. Unterstützt device_scale, viewport_width, viewport_height und ms_delay.
create_url_image	Erfasst eine öffentliche Seite oder einen CSS-Selektor, mit Viewport-Einstellungen und Cookie-Banner-Blockierung.
create_templated_image	Rendert eine gespeicherte Vorlage mit template_id und template_values.
create_batch_images	Rendert Variationen mit gemeinsamen default_options und bildspezifischen Variationen.
get_max_batch_size	Prüft das Batch-Limit des Kontos, bevor ein Batch vorbereitet wird.

Feedback

Tool	Funktion
submit_feedback	Melden Sie Fehler, fordern Sie Funktionen an und schlagen Sie Verbesserungen für das HCTI-Team vor. Siehe die Feedback-Tool-Referenz.

Vorlagenverwaltung

Tool	Funktion
create_template	Speichert HTML/CSS als wiederverwendbare Vorlage mit Variablen.
update_template	Aktualisiert eine vorhandene Vorlage nach ID.
list_templates	Findet Vorlagen im verbundenen Konto.
list_template_versions	Untersucht den Versionsverlauf einer Vorlage.

Siehe Rendering-Parameter und den Template Editor für Bildoptionen und wiederverwendbare Designs. Die vollständige Tools-Referenz behandelt auch Proxys, Speicherziele, Open-Graph-Konfigurationen und erforderliche Berechtigungen.

Authentifizierung

Nach dem Hinzufügen von HCTI verwenden Sie die Verbinden- oder Anmeldeaktion Ihres Clients und schließen die Autorisierung in Ihrem Browser ab. Melden Sie sich beim HCTI-Konto an, dessen Vorlagen und Guthaben Sie verwenden möchten, überprüfen Sie die ausgewählte Organisation und die Berechtigungen und kehren Sie dann zum Assistenten zurück. Öffnen Sie Weitere Berechtigungen, um bei Bedarf zusätzlichen Verwaltungszugriff auszuwählen. Einige Clients fordern bei der ersten Verwendung automatisch dazu auf; die einzelnen Anleitungen zeigen, wie Sie explizit verbinden.

Um die Verbindung zu prüfen, ohne ein Bild zu rendern, fragen Sie: „Verwende HCTI, um meine Bildnutzung und Kontolimits zu prüfen.“ Das Tool check_usage erfordert usage:read und gibt Nutzung und Limits zurück, ohne ein Bild zu rendern. get_max_batch_size erfordert ebenfalls usage:read. Rendering-Anfragen verwenden das Bildkontingent Ihres HCTI-Kontos; Ihr Assistenten-Abonnement ist separat.

Beispielaufforderungen

So erstellen Sie einen Website-Screenshot

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.

Öffnen Sie die zurückgegebene URL, um die Aufnahme zu prüfen. Um nur einen Teil Ihrer eigenen Website zu erfassen, geben Sie einen CSS-Selektor wie .pricing-grid an, der auf dieser Seite tatsächlich vorhanden ist. HCTI muss die URL von seinem gehosteten Dienst aus erreichen können; localhost ist nicht erreichbar.

So rendern Sie HTML und CSS als 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.

Das Ergebnis sollte weißen Text zeigen, der auf einer dunkelblauen Karte zentriert ist. Der Assistent sendet HTML/CSS an HCTI zum Rendern. Wenn Sie aus einem Repository arbeiten, bitten Sie ihn, die relevanten Dateien zu lesen und eigenständige Markup- und Stilangaben bereitzustellen; lokale Asset-Pfade müssen durch zugängliche Assets ersetzt werden.

So exportieren Sie ein 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.

So verwenden Sie eine Vorlage wieder und erstellen Variationen

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.

Verwenden Sie den Template Editor, um eine Vorlage zu entwerfen und die Werte zu definieren, die Ihr Assistent als template_values übergeben soll.

So prüfen Sie Organisationsressourcen

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

Genehmigen Sie og_configs:read für dieses Beispiel. Um Konfigurationen zu erstellen oder zu aktualisieren, genehmigen Sie auch og_configs:create_update. Siehe die Tools-Referenz für Proxy-, Speicherziel- und OG-Verwaltungsvorgänge.

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	Ermöglicht benutzerdefinierte headers bei Anfragen an bestimmte zusätzliche HTTP- oder HTTPS-Ursprünge.
block_consent_banners	Boolean	Wenn auf true gesetzt, blockiert automatisch Cookie-Zustimmungsbanner und Popups auf Websites. Am nützlichsten für URL-Screenshots.
color_scheme	String	Setzt Chrome auf den light- oder dark-Modus. Beeinflusst Websites, die prefers-color-scheme verwenden.
dedupe_duration_s	Integer	Wiederverwendung eines identischen kürzlichen Bildes ohne Verbrauch von Bildguthaben. Legt das Rückblickfenster in Sekunden fest; Standardwerte und zulässige Werte variieren je nach Bildtyp und Plan.
device_scale	Double	Steuert die Auflösung durch Anpassen des Pixelverhältnisses von 0.1 bis 3. Höhere Werte erhöhen die Bildqualität und Dateigröße.
disable_twemoji	Boolean	HTML/CSS- und Vorlagenbilder verwenden standardmäßig Twemoji; setzen Sie true, um es zu deaktivieren. URL-Bilder injizieren Twemoji nur, wenn es explizit auf false gesetzt ist.
format	String	Wählen Sie die Dateierweiterung in der anfänglich zurückgegebenen Bild-URL: png, jpg, webp oder pdf.
full_screen	Boolean	Erzeugt ein Bild der gesamten Höhe einer URL-Seite.
google_fonts	String	Lädt eine oder mehrere Google-Schriftarten, wie z. B. Roboto|Open Sans.
headers	Object	Fügt benutzerdefinierte HTTP-Header hinzu, wenn ein URL-Screenshot erstellt wird. Header sind auf den Ursprung der angeforderten URL und alle additional_header_origins beschränkt.
identify_as_hcti	Boolean	Fügt X-HCTI-SCREENSHOT: 1 zur Top-Level-Anfrage hinzu, wenn ein URL-Screenshot erstellt wird.
include_headers_on_subrequests	Boolean	Fügt außerdem benutzerdefinierte headers zu Subanfragen mit gleichem Ursprung und Subanfragen 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	Legt ein maximales Zeitlimit von 500 bis 10000 Millisekunden für das Warten vor dem Aufnehmen des Screenshots fest.
media_type	String	Setzt Chrome auf die Verwendung von screen- oder print-CSS-Medienstilen.
ms_delay	Integer	Verzögerung vor der Bilderzeugung. Nützlich beim Warten auf JavaScript; beginnen Sie mit 500 Millisekunden.
pdf_options	Object	Passt die PDF-Ausgabe mit Seitengröße, Rändern, Skalierung und Hintergrunddruck an.
proxy_id	String	Leitet ausgehenden Datenverkehr über einen der konfigurierten HTTP-Proxys Ihrer Organisation. Verfügbar im Plan mit 10.000 Bildern/Monat oder höher.
render_when_ready	Boolean	Wartet mit der Bilderzeugung, bis JavaScript ScreenshotReady() aufruft.
request_overrides	Array	Blockiert Browser-Netzwerkanfragen, die einem URL-Wildcard-Muster und/oder Ressourcentypen entsprechen. Erfordert einen kostenpflichtigen Plan.
selector	String	Beschneidet das Bild auf ein Element, das diesem CSS-Selektor entspricht, wie z. B. section#complete-toolkit.container-lg.
storage_destination_id	String	Speichert gerenderte Dateien an einem der konfigurierten Speicherziele Ihrer Organisation. Verfügbar im Plan mit 10.000 Bildern/Monat oder höher.
timezone	String	Setzt die Zeitzone von Chrome mit einer IANA-Kennung wie America/New_York.
transparent_background	Boolean	Setzen Sie auf true, um mit transparentem Hintergrund zu rendern.
viewport_height	Integer	Legt die Höhe des Chrome-Viewports fest. Beide Dimensionen müssen gesetzt werden, wenn eine davon verwendet wird.
viewport_landscape	Boolean	Setzt den Chrome-Viewport in den Querformatmodus.
viewport_mobile	Boolean	Setzt den Chrome-Viewport, um ein mobiles Gerät zu emulieren.
viewport_touch	Boolean	Setzt den Chrome-Viewport, um Touch-Ereignisse zu unterstützen.
viewport_width	Integer	Legt die Breite des Chrome-Viewports fest. Beide Dimensionen müssen gesetzt 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 im 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 werden soll

Berechtigungsfehler

Ein aufgelistetes Tool erfordert möglicherweise Berechtigungen, die Ihre Verbindung nicht hat. Trennen und verbinden Sie HCTI erneut, dann genehmigen Sie den erforderlichen Zugriff für die vorgesehene Organisation. Das Aktualisieren eines vorhandenen Tokens fügt keine Berechtigungen hinzu. Wiederholen Sie einen verweigerten Vorgang erst, wenn sich der Zugriff ändert. Siehe MCP-Autorisierung.

Fehler bei Ratenbegrenzung

Die Grenzen für Verwaltungstools werden mit REST-Anfragen für Ihre Organisation geteilt. Warten Sie 60 Sekunden, bevor Sie ein ratenbegrenztes Tool erneut versuchen; siehe Ratenbegrenzungen.

Verbindungsprobleme

Wenn der MCP-Server keine Verbindung herstellt:

• Stellen Sie sicher, dass Ihr Netzwerk ausgehende HTTPS-Verbindungen zulässt
• Überprüfen Sie, dass die URL genau https://mcp.hcti.io ist
• Starten Sie Ihren KI-Assistenten nach der Aktualisierung der Konfiguration neu

Fehler bei der Bilderzeugung

Wenn Bilder nicht erzeugt werden:

• Überprüfen Sie, dass Ihr Konto verfügbares Bildguthaben auf dem Dashboard hat
• Stellen Sie sicher, dass der HTML-Inhalt gültig ist
• Für URL-Screenshots überprüfen Sie, dass die URL öffentlich zugänglich ist

Automatisierungsplattformen

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

Zapier

Zapier hat 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 ohne Code verwenden.

Zapier-MCP-Client

Pipedream

Pipedream unterstützt MCP-Server für den Aufbau serverloser Workflows. Verbinden Sie den HTML/CSS to Image-MCP-Server, um die Bilderzeugung in Ihren Pipedream-Workflows zu automatisieren.

Pipedream-MCP-Integration

Der MCP-Server ist auch auf Smithery gelistet.

Hilfe benötigt?

Sprechen Sie mit einem Menschen. E-Mail an support@htmlcsstoimage.com und wir helfen Ihnen beim Einstieg.