Codetoimage MCP Server

Name: Codetoimage MCP Server
Author: beznazwiska

de beznazwiskaversión 0.2.0i★ 0iSe ejecuta en tu computadora

Nombre en el registroio.github.beznazwiska/codetoimage-mcp-server

Cómo instalar

What it does

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

Connects Se ejecuta en tu computadora
Account or key Needs CODETOIMAGE_API_KEY
Category Diseño, imágenes y audio

Instalación

Elige la app de IA que usas y copia la configuración.

Pasó 3/3 revisiones · Funciona en tu computadora · ✓ Comandos revisados el 14 nov 2026

Primero: ¿qué IA usas?

ClaudeWeb · app · móvilChatGPTWebClaude CodeTerminalCursorEditor de códigoVS CodeEditor de códigoOtrasOtras apps

Elige tu app y los pasos aparecen abajo.

Funciona con Claude, pero hay que preparar algo antes

Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de Codetoimage MCP Server
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Abrir el sitio de Codetoimage MCP Server ↗
Hecho
Abre el archivo de configuración de la app de Claude de escritorio
SettingsDeveloperEdit Config
Hecho

Pega esta configuración y guarda el archivo

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

Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie

Hecho

Cierra Claude y vuelve a abrirlo
Hecho
Pruébalo
Usa Codetoimage MCP Server y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude dice que está usando Codetoimage MCP Server o muestra una herramienta de Codetoimage MCP Server en la respuesta, ya está conectado

1 ajuste(s) opcional(es) (funciona sin ellos)

El comando de arriba funciona sin estos valores. Añádelos solo si quieres cambiar algo, según la descripción del autor.

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · valor por defecto https://api.codetoimage.app

Las descripciones siguen en el inglés original.

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

ChatGPT todavía no puede conectar Codetoimage MCP Server

Codetoimage MCP Server se instala en tu computadora, pero ChatGPT solo conecta servidores que funcionan en la web

Lo que puedes hacer en su lugar

A · Usa una app que pueda conectar Codetoimage MCP Server

Pasos para Claude →Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez) · Solo en la app de Claude para computadora (Windows o Mac), no en la web ni en el móvil
Pasos para Claude Code →Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Pasos para Cursor →Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)
Pasos para VS Code →Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

B · Otros en Diseño, imágenes y audio que funcionan con ChatGPT

Elegidos entre los más usados de la misma categoría, solo los que se conectan con una dirección y sin clave

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

Funciona con Claude Code, pero hay que preparar algo antes

Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de Codetoimage MCP Server
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Abrir el sitio de Codetoimage MCP Server ↗
Hecho
Abre la Terminal
Mac: pulsa Command+Espacio y escribe Terminal · Windows: abre PowerShell
Hecho
4
Pega este comando y pulsa Enter
```
claude mcp add --scope user codetoimage --env CODETOIMAGE_API_KEY=your-value -- npx -y @codetoimage/mcp-server
```
Cambia “your-value” por tu clave antes de pulsar Enter
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Escribe /mcp en Claude Code
Deberías ver Codetoimage MCP Server en la lista como conectado
Hecho
Pruébalo
Usa Codetoimage MCP Server y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Claude Code dice que está usando Codetoimage MCP Server o muestra una herramienta de Codetoimage MCP Server en la respuesta, ya está conectado

1 ajuste(s) opcional(es) (funciona sin ellos)

El comando de arriba funciona sin estos valores. Añádelos solo si quieres cambiar algo, según la descripción del autor.

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · valor por defecto https://api.codetoimage.app

Las descripciones siguen en el inglés original.

Nombres de menú comprobados con la ayuda de Anthropic el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con Cursor, pero hay que preparar algo antes

Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de Codetoimage MCP Server
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Abrir el sitio de Codetoimage MCP Server ↗
Hecho
Pulsa este botón para abrir Cursor
Abrir en Cursor
Cursor te pedirá confirmar; pulsa Install
Hecho
Escribe tu clave
En la configuración de Codetoimage MCP Server, CODETOIMAGE_API_KEY está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Abre el chat de IA de Cursor en modo Agent
Hecho
Pruébalo
Usa Codetoimage MCP Server y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si Cursor dice que está usando Codetoimage MCP Server o muestra una herramienta de Codetoimage MCP Server en la respuesta, ya está conectado

1 ajuste(s) opcional(es) (funciona sin ellos)

El comando de arriba funciona sin estos valores. Añádelos solo si quieres cambiar algo, según la descripción del autor.

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · valor por defecto https://api.codetoimage.app

Las descripciones siguen en el inglés original.

Nombres de menú comprobados con la ayuda de Cursor el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Funciona con VS Code, pero hay que preparar algo antes

Necesitas una clave de Codetoimage MCP Server (créala en el sitio del autor) · Instala Node.js en tu computadora primero (una sola vez)

Instala Node.js
Una sola vez; sirve para todos los servidores que necesitan Node.js
Abrir la página de descarga de Node.js ↗
Hecho
Regístrate y crea una clave de Codetoimage MCP Server
Abre el sitio del autor, crea una cuenta y una clave de API para el siguiente paso. Consulta precios y planes gratis en su sitio.
Abrir el sitio de Codetoimage MCP Server ↗
Hecho
Pulsa este botón para abrir VS Code
Abrir en VS Code
VS Code te pedirá confirmar; pulsa Install
Hecho
Escribe tu clave
En la configuración de Codetoimage MCP Server, CODETOIMAGE_API_KEY está vacío; añade tu clave y guarda
Pega la clave solo en el campo de la app; nunca en un chat ni se la envíes a nadie
Hecho
Abre el chat de IA de VS Code en modo Agent
Hecho
Pruébalo
Usa Codetoimage MCP Server y dime qué puedes hacer por mí; luego muéstrame una cosa
✓ Si VS Code dice que está usando Codetoimage MCP Server o muestra una herramienta de Codetoimage MCP Server en la respuesta, ya está conectado

1 ajuste(s) opcional(es) (funciona sin ellos)

El comando de arriba funciona sin estos valores. Añádelos solo si quieres cambiar algo, según la descripción del autor.

CODETOIMAGE_API_URL Override the API base URL. Defaults to https://api.codetoimage.app. · valor por defecto https://api.codetoimage.app

Las descripciones siguen en el inglés original.

Nombres de menú comprobados con la ayuda de VS Code el 11 nov 2026 · tu pantalla puede variar un poco según la versión

Otras apps que usan MCP, como Windsurf, Zed o Gemini CLI, añaden servidores de forma distinta. Míralo en la lista de apps

Ver todas las apps que usan MCP →

La configuración JSON está en “Para desarrolladores”, abajo

¿Te atascaste? Pregunta a quien usa Codetoimage MCP Server💬 Conversación →

Para desarrolladores: comandos de Terminal y configuración JSON

Instalado en tu computadora

Claude Code

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

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

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

Valores que debes completar

CODETOIMAGE_API_KEY secreto obligatorio 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.

Las descripciones siguen en el inglés original.

Esta configuración se genera a partir de la ficha del creador en el registro. Si el README dice otra cosa, sigue el README.

De un vistazo

Estrellas de GitHub i: 0
Descargas por semanai: 46/sem
Licencia i: MIT
Conexión: Se ejecuta en tu computadora
Transporte: stdio
Última versióni: 0.2.0
Categoríai: Diseño, imágenes y audio
Publicado en el registroi: 11 jul 2026
Último cambio de códigoi: 11 jul 2026
Creador: beznazwiska
Paquetes: npm: @codetoimage/mcp-server
Repo: beznazwiska/codetoimage-mcp-server
Sitio web: codetoimage.app
Estado en el registro: Activo

Qué apps pueden usarlo

Según cómo se conecta este servidor y la documentación de cada app, comprobado el 10 nov 2026.

Se ejecutan en tu computadora en

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

Todas las apps, con ventajas y desventajas →

Qué puede hacer

Se ejecuta en tu computadora; la lista de herramientas aparece en tu app de IA después de instalarlo.

Revisiones básicasi

Revisamos información que cualquiera puede ver; no hemos leído el código. Las revisiones que no aplican no se cuentan. · Revisado el 15 nov 2026

✓ Superada
El creador coincide con el repo
El nombre en el registro se verificó con la cuenta de GitHub beznazwiska, dueña del repo
✓ Superada
Sigue en mantenimiento
Último cambio de código: hace 4 meses
✓ Superada
Tiene licencia
Usa MIT
– No aplica
El endpoint responde
Este se ejecuta en tu computadora; no hay endpoint en internet
– No aplica
Inicio de sesión con OAuth
Se ejecuta en tu computadora y usa ajustes locales en su lugar
… Aún sin revisar
Sin instrucciones ocultas en las descripciones de herramientas
Se ejecuta en tu computadora; solo podemos leer listas de herramientas de endpoints en internet

Conversación

Pregunta, comparte un consejo o avisa de que no funciona. Ordenado por lo que la gente marcó como útil.

Aún no hay publicaciones. Sé la primera persona en preguntar o compartir.

Lo publicado aquí lo escriben usuarios, no el equipo de PopNx.

Inicia sesión con Google para publicar

Reseñas de usuarios

Aún no hay reseñas

Inicia sesión con Google para escribir una reseña

Comparado con otros en Diseño, imágenes y audioi

Más estrellas que el 0% de los otros 3065 servidores de esta categoría
Publicado en el registro más recientemente que el 13% de los otros 3065 servidores de esta categoría
Revisiones básicas iguales o mejores que el 100% de los otros 3065 servidores de esta categoría

Comparado con todos los servidores activos de esta categoría en el registro. Las estrellas solo cuentan cuando quien lo publica es dueño del repo.

Preguntas frecuentes

¿Es seguro Codetoimage MCP Server?

Superó 3 de 3 revisiones básicas aplicables. No hemos leído el código. Antes de agregar una clave o un token, revisa qué acceso pide el servidor y usa una clave que tenga solo los permisos que necesitas.

¿Qué claves o códigos necesita?

Debes completar: CODETOIMAGE_API_KEY

¿Se ejecuta en mi computadora o en la nube?

Se ejecuta en tu computadora. Tu app de IA lo inicia cuando hace falta, y los datos no pasan por los servidores del creador (a menos que el propio servidor llame a un servicio en línea).

¿Sigue en mantenimiento?

El repo de GitHub cambió por última vez hace 4 meses, y la última versión (0.2.0) llegó al registro hace 4 meses.

¿Qué apps pueden usarlo?

Las apps compatibles con MCP, como Claude Desktop, Claude Code, Cursor y VS Code. También necesitas Node.js en tu computadora.

¿Qué puedo usar en su lugar?

En la misma categoría: Figma Context MCP, AutoClip, Next AI Draw.io

Otros de la misma categoría

Servidores de la misma categoría hechos por otros creadores, ordenados por estrellas.

Cómo leer una tarjeta:↓ Descargas por semanai★ Estrellas de GitHubiTres pilares: reseñas · revisiones · usoiActualizado = fecha en que se publicó la última versión en el registroi

Figma Context MCP

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

de GLipsMuy usado↓ 152,1 mil/sem★ 16,2 milActualizado hace 5 meses

Se ejecuta en tu computadora

Instalar

AutoClip

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

de zhouxiaokaMuy usado↓ 205/sem★ 10,4 milActualizado hace 18 días

Se ejecuta en tu computadora

Instalar

Next AI Draw.io

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

de DayuanJiangMuy usado↓ 21,7 mil/sem★ 36,9 mil Estrellas de todo el repositorioActualizado ayer

Se ejecuta en tu computadora

Instalar

README del creador

Abrir el README

Copiado tal cual del repo del creador. PopNx MCP no lo ha revisado ni lo respalda. Se quitaron HTML, imágenes y scripts. Los enlaces llevan fuera de este sitio.

@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

What it does

Instalación

Instala Node.js

Regístrate y crea una clave de Codetoimage MCP Server

Abre el archivo de configuración de la app de Claude de escritorio

Pega esta configuración y guarda el archivo

Cierra Claude y vuelve a abrirlo

Pruébalo

Lo que puedes hacer en su lugar

Instala Node.js

Regístrate y crea una clave de Codetoimage MCP Server

Abre la Terminal

Pega este comando y pulsa Enter

Escribe /mcp en Claude Code

Pruébalo

Instala Node.js

Regístrate y crea una clave de Codetoimage MCP Server

Pulsa este botón para abrir Cursor

Escribe tu clave

Abre el chat de IA de Cursor en modo Agent

Pruébalo

Instala Node.js

Regístrate y crea una clave de Codetoimage MCP Server

Pulsa este botón para abrir VS Code

Escribe tu clave

Abre el chat de IA de VS Code en modo Agent

Pruébalo

Instalado en tu computadora

Valores que debes completar

De un vistazo

Qué apps pueden usarlo

Qué puede hacer

Revisiones básicasi

El creador coincide con el repo

Sigue en mantenimiento

Tiene licencia

El endpoint responde

Inicio de sesión con OAuth

Sin instrucciones ocultas en las descripciones de herramientas

Conversación

Reseñas de usuarios

Comparado con otros en Diseño, imágenes y audioi

Preguntas frecuentes

Otros de la misma categoría

Figma Context MCP

AutoClip

Next AI Draw.io

README del creador

@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`