Codetoimage MCP Server

Name: Codetoimage MCP Server
Author: beznazwiska

von beznazwiskaVersion 0.2.0i★ –iLäuft auf deinem Computer

Name in der Registryio.github.beznazwiska/codetoimage-mcp-server

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

Pixel-perfect HTML/CSS to PNG/JPG/WebP for AI agents — inline image or 24h hosted URL.

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
NutzungiNoch nicht gemessen★ –

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Läuft auf deinem Computer
Transport: stdio
Kategorie: Design, Bilder & Audio
Das musst du eintragen: CODETOIMAGE_API_KEY

Installation

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

Bevor du installierst

Basischecks: 1 von 1 bestanden
Läuft auf deinem Computer mit den Rechten deines Benutzerkontos (Dateien, Netzwerk, Apps).
Das trägst du selbst ein: CODETOIMAGE_API_KEY, CODETOIMAGE_API_URL

Als geheim markierte Werte sind Schlüssel zu deinem Konto. Gib sie nie weiter und füge sie nie in einen Chat ein.

Du brauchst

npmNode.js installiert (für den Befehl npx)

Welche App nutzt du?

ClaudeClaude CodeCursorVS CodeChatGPT

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein

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

Führe das in deinem Terminal aus

claude mcp add codetoimage --env CODETOIMAGE_API_KEY=your-value --env CODETOIMAGE_API_URL=your-value -- npx -y @codetoimage/mcp-server

Trag die leeren Werte ein, bevor du ihn startest.

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

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

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "codetoimage": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@codetoimage/mcp-server"
      ],
      "env": {
        "CODETOIMAGE_API_KEY": "your-value",
        "CODETOIMAGE_API_URL": "your-value"
      }
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

Dieser Server läuft auf deinem Computer, und ChatGPT kann sich nur mit Servern im Internet verbinden. Wähle eine andere App.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

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.

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 7. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto beznazwiska bestätigt, dem das Repo gehört
… Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
– 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

Im Vergleich mit anderen in Design, Bilder & Audioi

Mehr Sterne als 0 % der anderen 2184 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 16 % der anderen 2184 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 2184 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 1 von 1 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 – 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, Claude Real Video, Figma MCP Server

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

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

Figma Context MCP

von GLips

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

Läuft auf deinem Computer★ 16.165MITAktualisiert vor 5 Monaten

Installieren

Claude Real Video

von HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Läuft auf deinem Computer★ 2.284MITAktualisiert vor 2 Monaten

Installieren

Figma MCP Server

von figma

The Figma MCP server brings Figma design context directly into your AI workflow.

Läuft in der Cloud★ 2.152Aktualisiert vor 13 Monaten

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

Web dashboard + REST API
@codetoimage/cli – terminal/CI usage

License

MIT

Codetoimage MCP Server

Überblick

Die drei Säulen von PopNx MCP

Was du damit machen kannst

Installation

Bevor du installierst

Werte, die du selbst einträgst

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

Im Vergleich mit anderen in Design, Bilder & Audioi

Häufige Fragen

Alternativen

Figma Context MCP

Claude Real Video

Figma MCP Server

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`