Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

3/3 Prüfungen bestanden · Läuft auf deinem Computer

Zuerst: Welche KI nutzt du?

ClaudeWeb · App · HandyChatGPTWebClaude CodeTerminalCursorCode-EditorVS CodeCode-EditorAndereAndere Apps

Wähle deine App, dann erscheinen die Schritte unten.

Klappt mit Claude, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Codetoimage MCP Server registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Preise und Gratis-Tarife siehst du auf seiner Seite.
Seite von Codetoimage MCP Server öffnen ↗
Erledigt
Einstellungsdatei der Claude-Desktop-App öffnen
SettingsDeveloperEdit Config
Erledigt
Diese Einstellungen einfügen und speichern
Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
Claude beenden und neu öffnen
Erledigt
Ausprobieren
Nutze Codetoimage MCP Server und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude sagt, dass es Codetoimage MCP Server nutzt, oder ein Werkzeug von Codetoimage MCP Server in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

ChatGPT kann Codetoimage MCP Server noch nicht verbinden

Codetoimage MCP Server läuft auf deinem Computer, aber ChatGPT verbindet nur Server, die im Web laufen

Das kannst du stattdessen tun

A · Eine App nutzen, die Codetoimage MCP Server verbinden kann

Schritte für Claude →Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal) · Nur in der Claude-App für den Computer (Windows oder Mac), nicht im Web oder auf dem Handy
Schritte für Claude Code →Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für Cursor →Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)
Schritte für VS Code →Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

B · Andere in Design, Bilder & Audio, die mit ChatGPT funktionieren

Aus den meistgenutzten derselben Kategorie, nur solche, die per Adresse ohne Schlüssel verbinden

Pascal 3D Editor✓ ChatGPT
Semiotic✓ ChatGPT
TypeUI✓ ChatGPT

Klappt mit Claude Code, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Codetoimage MCP Server registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Preise und Gratis-Tarife siehst du auf seiner Seite.
Seite von Codetoimage MCP Server öffnen ↗
Erledigt
Terminal öffnen
Mac: Command+Leertaste drücken und Terminal tippen · Windows: PowerShell öffnen
Erledigt
Diesen Befehl einfügen und Enter drücken
Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind
Ersetze „your-value“ vor dem Enter durch deinen Schlüssel
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
/mcp in Claude Code eingeben
Codetoimage MCP Server sollte in der Liste als verbunden erscheinen
Erledigt
Ausprobieren
Nutze Codetoimage MCP Server und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Claude Code sagt, dass es Codetoimage MCP Server nutzt, oder ein Werkzeug von Codetoimage MCP Server in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Anthropic abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit Cursor, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Codetoimage MCP Server registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Preise und Gratis-Tarife siehst du auf seiner Seite.
Seite von Codetoimage MCP Server öffnen ↗
Erledigt
Mit diesem Button Cursor öffnen
Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind
Erledigt
Schlüssel eintragen
In den Einstellungen von Codetoimage MCP Server ist CODETOIMAGE_API_KEY, CODETOIMAGE_API_URL leer; trag deinen Schlüssel ein und speichere
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
KI-Chat in Cursor im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Codetoimage MCP Server und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn Cursor sagt, dass es Codetoimage MCP Server nutzt, oder ein Werkzeug von Codetoimage MCP Server in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von Cursor abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Klappt mit VS Code, aber erst etwas vorbereiten

Du brauchst einen Schlüssel von Codetoimage MCP Server (auf der Seite des Anbieters erstellen) · Installiere zuerst Node.js auf deinem Computer (nur einmal)

Node.js installieren
Nur einmal; gilt für alle Server, die Node.js brauchen
Download-Seite von Node.js öffnen ↗
Erledigt
Bei Codetoimage MCP Server registrieren und Schlüssel erstellen
Öffne die Seite des Anbieters, registriere dich und erstelle einen API-Schlüssel für den nächsten Schritt. Preise und Gratis-Tarife siehst du auf seiner Seite.
Seite von Codetoimage MCP Server öffnen ↗
Erledigt
Mit diesem Button VS Code öffnen
Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind
Erledigt
Schlüssel eintragen
In den Einstellungen von Codetoimage MCP Server ist CODETOIMAGE_API_KEY, CODETOIMAGE_API_URL leer; trag deinen Schlüssel ein und speichere
Füge den Schlüssel nur in das Feld der App ein, nie in einen Chat und schick ihn niemandem
Erledigt
KI-Chat in VS Code im Agent-Modus öffnen
Erledigt
Ausprobieren
Nutze Codetoimage MCP Server und sag mir, was du für mich tun kannst; zeig mir dann eine Sache
✓ Wenn VS Code sagt, dass es Codetoimage MCP Server nutzt, oder ein Werkzeug von Codetoimage MCP Server in der Antwort zeigt, bist du verbunden

Menünamen am 11. Nov. 2026 mit der Hilfe von VS Code abgeglichen · dein Bildschirm kann je nach App-Version leicht abweichen

Andere Apps mit MCP, etwa Windsurf, Zed oder Gemini CLI, fügen Server unterschiedlich hinzu. Sieh in der App-Liste nach

Alle Apps mit MCP ansehen →

JSON-Einstellungen stehen unten unter „Für Entwickler“

Hängst du fest? Frag Leute, die Codetoimage MCP Server nutzen💬 Diskussion →

Für Entwickler: Terminal-Befehle und JSON-Einstellungen

Auf deinem Computer installiert

Claude Code

Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind

Claude Desktop (claude_desktop_config.json)

Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind

Cursor (~/.cursor/mcp.json)

Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind

VS Code (mcp.json)

Befehle werden geprüft · Kopier-Buttons erscheinen, sobald sie bestanden sind

Werte, die du selbst einträgst

CODETOIMAGE_API_KEY geheim erforderlich env
API key from https://codetoimage.app/dashboard/keys (starts with cti_live_…). Sandbox tier is free.
CODETOIMAGE_API_URL env
Override the API base URL. Defaults to https://api.codetoimage.app.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Welche Apps ihn nutzen können

Basierend darauf, wie sich dieser Server verbindet, und auf der eigenen Doku jeder App, geprüft am 10. Nov. 2026.

Laufen auf deinem Computer in

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

Alle Apps, mit Vor- und Nachteilen →

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 13. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto beznazwiska bestätigt, dem das Repo gehört
✓ Bestanden
Wird noch gepflegt
Code zuletzt geändert: vor 4 Monaten
✓ Bestanden
Hat eine Lizenz
Nutzt MIT
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Diskussion

Fragen, Tipps teilen oder melden, dass etwas nicht geht. Sortiert nach „hilfreich“.

Noch keine Beiträge. Stell die erste Frage oder teile einen Tipp.

Beiträge hier stammen von Nutzern, nicht vom PopNx-Team.

Mit Google anmelden, um zu posten

Nutzerbewertungen

Noch keine Bewertungen

Mit Google anmelden, um zu bewerten

Im Vergleich mit anderen in Design, Bilder & Audioi

Mehr Sterne als 0 % der anderen 2996 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 14 % der anderen 2996 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 2996 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Codetoimage MCP Server sicher?

Er hat 3 von 3 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Das musst du eintragen: CODETOIMAGE_API_KEY

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt vor 4 Monaten geändert, und die neueste Version (0.2.0) kam vor 4 Monaten in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Figma Context MCP, AutoClip, Next AI Draw.io

Andere in derselben Kategorie

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Figma Context MCP

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

von GLipsWeit verbreitet↓ 152.142/Wo.★ 16.197Aktualisiert vor 5 Monaten

Läuft auf deinem Computer

Installieren

AutoClip

Clip long videos into short clips with covers and captions. Local CLI and MCP.

von zhouxiaokaWeit verbreitet↓ 205/Wo.★ 10.357Aktualisiert vor 16 Tagen

Läuft auf deinem Computer

Installieren

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

von DayuanJiangWeit verbreitet↓ 21.676/Wo.★ 36.912 Sterne des ganzen ReposAktualisiert heute

Läuft auf deinem Computer

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

@codetoimage/mcp-server

Official Model Context Protocol server for codetoimage.app – render HTML/CSS to PNG/JPG/WebP directly from Claude Desktop, Claude Code, Cursor, or any MCP-compatible client.

What you get

Two tools, no setup beyond an API key:

`render_html_to_image` – returns the image inline so your agent (or you, in chat) can see it immediately. Best for "show me the rendered card", OG preview iteration, chart generation, badge mockups.
`render_html_to_url` – returns a temporary hosted URL (24h TTL). Best when the image needs to live somewhere external – Instagram Graph API, OpenGraph meta tags, Slack unfurls, docs/posts embeds.

Install

You don't need to install anything globally – MCP clients can run it via npx. Get an API key at codetoimage.app/dashboard/keys, then add the config below.

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

"mcpServers": { "codetoimage": { "command": "npx", "args": ["-y", "@codetoimage/mcp-server"], "env": { "CODETOIMAGE_API_KEY": "cti_live_..." } } } }

Restart Claude Desktop. The two tools appear in the tool picker.

Claude Code

claude mcp add codetoimage -s user -- npx -y @codetoimage/mcp-server

Then set the env var in your shell profile (or pass -e CODETOIMAGE_API_KEY=cti_live_… in the claude mcp add call).

Cursor

Edit ~/.cursor/mcp.json:

"mcpServers": { "codetoimage": { "command": "npx", "args": ["-y", "@codetoimage/mcp-server"], "env": { "CODETOIMAGE_API_KEY": "cti_live_..." } } } }

Usage from an agent

The tools are self-documenting – your agent will pick the right one based on intent. Example prompts that just work:

"Render this card as a PNG: Hello at 800×400."

"Generate an Open Graph image for the blog post 'Why agents need pixel-perfect rendering' and give me a URL I can paste into the og:image meta tag."

"Take this CSS card and render it as a transparent PNG so I can use it on a dark background."

"Render my saved template 3f2a91d0-... with title 'Launch day' as an Instagram story."

Tool schemas

`render_html_to_image`

Field	Type	Required	Notes
`html`	string	✓*	Full HTML (typically with ). *Not needed with `template_id`
`css`	string	–	Optional CSS injected as
`template_id`	uuid	✓*	Saved template from the dashboard (Templates page); alternative to `html`
`variables`	object	–	Values for `{{placeholders}}` in the template (HTML-escaped)
`preset`	enum	–	Named size: `og`, `twitter-card`, `facebook-post`, `linkedin-post`, `instagram-square`, `instagram-portrait`, `instagram-story`, `youtube-thumbnail`, `pinterest-pin`
`width`	integer 1-2048	–	Default 800; overrides `preset`
`height`	integer 1-2048	–	Default 600; overrides `preset`
`format`	`png` \	`jpeg` \	`webp`	–	Default `png`
`quality`	integer 1-100	–	JPEG/WebP only
`transparent`	boolean	–	PNG/WebP, paid plans
`background`	string	–	e.g. `#ffffff` or `rgb(…)`

Returns: image content (base64 inline), rendered in the chat.

`render_html_to_url`

Same input schema as render_html_to_image. Returns a text block with:

url – temporary hosted image URL
format – final output format
expires_at – ISO timestamp (24h from render)
credits_remaining – your plan's quota state

Configuration

Variable	Default	Purpose
`CODETOIMAGE_API_KEY`	–	Required. Get one at codetoimage.app/dashboard/keys
`CODETOIMAGE_API_URL`	`https://api.codetoimage.app`	API base URL (override for dev/proxy)

Plans + limits

Free – 50 renders/month, no watermark, full features (up to 2048×2048, all formats).
Paid (Starter / Hobby / Pro / Scale) – from $9/mo for 1,000 renders up to 50,000/month, higher rate limits.
Pay as you go – prepaid credit packs from $5, valid 12 months, no subscription.

Pricing: codetoimage.app/#pricing

License

MIT

Codetoimage MCP Server

What it does

Installation

Node.js installieren

Bei Codetoimage MCP Server registrieren und Schlüssel erstellen

Einstellungsdatei der Claude-Desktop-App öffnen

Diese Einstellungen einfügen und speichern

Claude beenden und neu öffnen

Ausprobieren

Das kannst du stattdessen tun

Node.js installieren

Bei Codetoimage MCP Server registrieren und Schlüssel erstellen

Terminal öffnen

Diesen Befehl einfügen und Enter drücken

/mcp in Claude Code eingeben

Ausprobieren

Node.js installieren

Bei Codetoimage MCP Server registrieren und Schlüssel erstellen

Mit diesem Button Cursor öffnen

Schlüssel eintragen

KI-Chat in Cursor im Agent-Modus öffnen

Ausprobieren

Node.js installieren

Bei Codetoimage MCP Server registrieren und Schlüssel erstellen

Mit diesem Button VS Code öffnen

Schlüssel eintragen

KI-Chat in VS Code im Agent-Modus öffnen

Ausprobieren

Auf deinem Computer installiert

Werte, die du selbst einträgst

Auf einen Blick

Welche Apps ihn nutzen können

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Diskussion

Nutzerbewertungen

Im Vergleich mit anderen in Design, Bilder & Audioi

Häufige Fragen

Andere in derselben Kategorie

Figma Context MCP

AutoClip

Next AI Draw.io

README vom Entwickler

@codetoimage/mcp-server

What you get

Install

Claude Desktop

Claude Code

Cursor

Usage from an agent

Tool schemas

render_html_to_image

render_html_to_url

Configuration

Plans + limits

Related

License

`render_html_to_image`

`render_html_to_url`