betterimage

Servidor MCP para tarjetas sociales: una imagen OG desde cualquier URL de página, más de 100 diseños, verificación de vista previa de enlaces para X, Slack y Discord, metaetiquetas. No se necesita clave API.

Ver en betterimage.ioPrueba este MCPPatrocinado

Servidor MCP alojado

npx add-mcp 'https://betterimage.io/mcp'

Se instala en Claude Code, Codex, Cursor y más

Documentación

Añade la URL del servidor

Una línea en la configuración MCP de tu cliente: https://betterimage.io/mcp. Nada que instalar, nada que ejecutar.

Pide con palabras sencillas

«Crea una tarjeta de lanzamiento para nuestra nueva página de precios», «¿por qué este enlace se ve roto en LinkedIn?», «dale a cada publicación del blog una og:image». El asistente elige la herramienta.

Ve la tarjeta en el chat

Las vistas previas vuelven como imágenes en la conversación. Las URLs firmadas y las metaetiquetas vuelven como texto listo para pegar en tu código.

Añádelo a tu cliente

El servidor habla MCP sobre HTTP en https://betterimage.io/mcp. Añádelo sin clave para usar las herramientas gratuitas. Para tus propias plantillas hay dos puertas: https://betterimage.io/mcp/account, que te pide iniciar sesión en betterimage.io en el navegador una vez (Claude.ai, Claude Desktop, Claude Code, Cursor, VS Code y Windsurf lo soportan), o una clave API de Configuración de la cuenta > API enviada como cabecera Authorization: Bearer, para scripts y CI. Cada cliente abajo muestra ambas.

Claude Code

# free tools, no account:
claude mcp add --transport http betterimage https://betterimage.io/mcp

# your own templates: sign in once (run /mcp in a session, pick betterimage, Authenticate)
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp/account

# or, for scripts and CI, an API key instead of signing in:
claude mcp add --scope user --transport http betterimage https://betterimage.io/mcp \
  --header "Authorization: Bearer bi_a1b2c3d4e5_XxYyZz..."

Cursor

Instalar en Cursor con un clic para las herramientas gratuitas. Para tus propias plantillas, usa la URL /mcp/account e inicia sesión cuando Cursor lo pida, o añade esto a ~/.cursor/mcp.json con una clave (el archivo global; un .cursor/mcp.json a nivel de proyecto termina en el repositorio junto con la clave):

{
  "mcpServers": {
    "betterimage": {
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

VS Code (GitHub Copilot)

Instalar en VS Code con un clic para las herramientas gratuitas. Para tus propias plantillas, usa la URL /mcp/account e inicia sesión cuando VS Code lo pida, o añade esto a .vscode/mcp.json con una clave. VS Code pide la clave una vez y la guarda en su almacén de secretos, así que el archivo en sí no contiene ningún secreto:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "betterimage-key",
      "description": "betterimage.io API key (leave empty for the free tools)",
      "password": true
    }
  ],
  "servers": {
    "betterimage": {
      "type": "http",
      "url": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer ${input:betterimage-key}" }
    }
  }
}

Claude.ai y Claude Desktop

En un plan de pago de Claude, abre Configuración > Conectores, elige «Añadir conector personalizado» y pega la URL de la cuenta. Claude abre un inicio de sesión en betterimage.io, haces clic en Permitir, y tus plantillas guardadas, renders limpios y URLs firmadas de og:image están disponibles en el chat. Sin necesidad de copiar claves en ningún sitio.

Settings > Connectors > Add custom connector
Name: betterimage
URL:  https://betterimage.io/mcp/account

¿Prefieres no tener cuenta? Añade https://betterimage.io/mcp en su lugar: el navegador de diseños, las vistas previas, el comprobador de enlaces y el generador de metaetiquetas funcionan sin iniciar sesión. La URL de la cuenta también funciona en Claude Code, Cursor y VS Code, que ejecutan el mismo inicio de sesión en tu navegador. Puedes desconectar una aplicación en cualquier momento en Configuración de la cuenta > API.

Windsurf y otros clientes

Cualquier cliente que soporte servidores MCP remotos sobre Streamable HTTP funciona. El mcp_config.json de Windsurf toma el servidor como serverUrl:

{
  "mcpServers": {
    "betterimage": {
      "serverUrl": "https://betterimage.io/mcp",
      "headers": { "Authorization": "Bearer bi_a1b2c3d4e5_XxYyZz..." }
    }
  }
}

Si usas una clave, vive en el archivo de configuración del cliente. Trata ese archivo como cualquier otro secreto: mantenlo fuera de repositorios compartidos y revoca la clave en Configuración de la cuenta > API si se filtra. Iniciar sesión en su lugar no almacena ningún secreto en tu máquina más allá del propio token del cliente, y la conexión aparece en Aplicaciones conectadas, donde un clic la desconecta. De cualquier manera, el acceso puede renderizar tus plantillas contra tu cuota y guardar nuevas desde presets; no puede editar ni eliminar plantillas, tocar la facturación ni cambiar nada más en la cuenta.

Las herramientas

10 herramientas, listadas aquí directamente desde el servidor. 5 funcionan sin clave; el resto necesitan una. Tu asistente lee las mismas descripciones y decide cuándo llamar a qué, así que rara vez nombras una herramienta tú mismo.

Herramienta	Qué hace	Necesita clave
`card_from_url`	Tarjeta desde una URL de página. Crea una tarjeta social para una página que ya existe, en una sola llamada: obtiene la página como un rastreador, toma su título, descripción, autor, dominio e icono del sitio, elige el diseño inicial que encaja con la página (una decisión Jev sobre cada preset, unos 100 ms) y devuelve la imagen (mostrada en línea, con marca de agua, gratis). Úsala primero cuando el usuario dé una URL: «haz una imagen OG para mi última publicación». Cualquier campo que pases anula lo que dice la página. Pasa preset (ver list_presets) para elegir el diseño tú mismo, o un tamaño. No se necesita clave API; una obtención de página más un render por llamada.	No
`list_presets`	Lista de diseños iniciales. Explora los diseños listos (presets) desde los que puede empezar una tarjeta: clave, nombre, tipo de plantilla, tamaño nativo, categorías de caso de uso, una descripción visual de una línea y una URL de imagen de vista previa. Empieza aquí cuando el usuario quiera una tarjeta social y no tenga plantilla guardada. Luego llama a preview_card con la clave elegida. No se necesita clave API.	No
`preview_card`	Vista previa de una tarjeta desde un preset. Renderiza un preset con el texto del usuario y devuelve la imagen (mostrada en línea). Gratis, sin clave API; la vista previa lleva una pequeña marca de agua de betterimage.io y no toca ninguna cuota. Úsala para mostrar al usuario cómo se verá su tarjeta antes de comprometerse. Para una imagen limpia: save_template + render_card en un plan API de pago, o la descarga limpia única en el editor.	No
`check_link_preview`	Comprueba cómo se previsualiza un enlace. Obtiene una página pública como lo hacen los rastreadores de X, Facebook, LinkedIn, Slack y Discord e informa de lo que mostrarán: el título efectivo, la descripción y la imagen por plataforma, el formato real de la og:image, dimensiones y peso, y una lista de problemas concretos con soluciones. Úsala cuando un usuario pregunte por qué su enlace se ve mal al compartirlo, o antes de publicar. Solo URLs http(s) en internet público; una obtención de página más hasta dos obtenciones de imagen por llamada. No se necesita clave API.	No
`generate_meta_tags`	Genera metaetiquetas. Construye el bloque <head> completo para una página: <title>, meta descripción, canónica, etiquetas Open Graph y Twitter card, con ancho/alto de og:image. Devuelve HTML para pegar más notas sobre cualquier cosa que valga la pena arreglar (título demasiado largo, imagen sobre http). Úsala después de check_link_preview, o cuando un usuario necesite las etiquetas para una página nueva. No se necesita clave API; no se obtiene nada.	No
`list_templates`	Lista de plantillas guardadas. Las plantillas guardadas del usuario (sus propios diseños, hechos en el editor o con save_template): slug, nombre, tipo, los campos que render_card y og_image_url pueden anular, y cuándo se editó por última vez. Necesita una clave API. Llámala antes de render_card u og_image_url cuando no sepas el slug.	Sí
`save_template`	Guarda un preset como plantilla. Copia un preset (opcionalmente con el texto del usuario como nuevos valores predeterminados) en la cuenta del usuario como plantilla guardada, para que render_card y og_image_url puedan usarla. Necesita una clave API. Hazlo una vez por diseño, no por imagen: después, cada render solo pasa el texto que cambia. Devuelve el slug a usar a continuación y un enlace para ajustar el diseño en el editor.	Sí
`render_card`	Renderiza una plantilla guardada. Renderiza una de las plantillas guardadas del usuario con el texto dado y devuelve el PNG (mostrado en línea, a 1x). Necesita una clave API. En un plan de pago la imagen es limpia (sin marca de agua); en el nivel gratuito lleva marca de agua. Cada llamada gasta una imagen de la cuota mensual. Úsala cuando el usuario quiera el archivo real, p. ej., para alojarlo él mismo. Para una etiqueta og:image que no necesita alojamiento, o para un archivo retina 2x, prefiere og_image_url.	Sí
`og_image_url`	URL firmada de og:image. Construye una URL de imagen firmada para una plantilla guardada con el texto dado, lista para poner en la etiqueta <meta property="og:image"> de una página. No se renderiza nada ahora: la imagen se genera cuando un rastreador obtiene la URL, se cachea en el borde durante un día, y cada obtención no cacheada gasta una imagen de la cuota mensual. Necesita una clave API. Esta es la forma de infraestructura cero de dar a cada página su propia tarjeta; úsala en plantillas de página, hooks de CMS y generadores de sitios estáticos. Devuelve la URL y la metaetiqueta lista.	Sí
`get_usage`	Cuota y plan. El plan de la clave API, si los renders llevan marca de agua, y la cuota de imágenes de este mes: usada, restante y fecha de reinicio. Necesita una clave API. Compruébala antes de renders por lotes, o cuando un render vuelva con marca de agua inesperadamente.	Sí

Automatizando og:images con un agente

Las herramientas están hechas para encadenarse, así que un agente puede llevar un sitio de «sin imágenes de vista previa» a «una tarjeta de marca por página» en una sola tarea. Esta es la secuencia que seguirá; cada paso es una llamada de herramienta, y todo funciona desde Claude Code, Cursor o un agente de codificación en CI.

Elige un diseño una vez. list_presets con una categoría como blog-post, luego preview_card con un titular real del sitio para que apruebes el aspecto. Di «más oscuro», «el serif», «con nuestro dominio en la esquina» y renderiza de nuevo.
Guárdalo como tu plantilla. save_template copia el preset en tu cuenta con tu texto como valores predeterminados y devuelve un slug. Desde aquí el diseño está bloqueado; el texto y las imágenes cambian.
Dale a cada página su URL. Para cada página, el agente llama a og_image_url con el título de esa página y coloca el resultado en el head, o en generateMetadata, un parcial de Hugo, un hook de CMS. Sin archivos, sin almacenamiento, nada que ejecutar: la imagen se renderiza en el primer rastreo y se cachea en el borde durante un día.
O aloja los archivos tú mismo. render_card devuelve el PNG; el agente lo escribe junto a la página y apunta og:image a tu propia URL. Cuota predecible (un render por página, siempre) y el mismo diseño.
Pon una imagen diferente en cada tarjeta. Cada herramienta de render toma image_url en sus campos: una URL https absoluta que se obtiene del lado del servidor y se dibuja en el espacio que el diseño ya dispone. Eso es lo que convierte una plantilla guardada en todo un catálogo de tienda, una tarjeta por producto, con el encuadre, marco y colores idénticos en todas. logo_url y background_url funcionan igual.
Verifica la página en vivo. check_link_preview en una URL publicada confirma lo que X, LinkedIn, Slack y Discord mostrarán realmente, y get_usage mantiene el lote dentro de la cuota mensual.

Las URLs firmadas son las mismas que documenta la API REST, así que lo que el agente conecta hoy sigue funcionando sin cliente MCP en el bucle mañana. Código de firma listo para Node, Python, Ruby, Go y PHP está en esa página.

Cosas para pedir

«Hazme una tarjeta social para una publicación llamada Diez lecciones de nuestra migración.» El asistente explora los diseños, elige uno y muestra una vista previa con tu titular. Pide «algo más oscuro» o «el serif» y renderiza de nuevo.
«¿Por qué mi enlace se ve mal en LinkedIn?» Obtiene la página como los rastreadores, lista lo que falta o está mal, luego escribe las metaetiquetas corregidas y una tarjeta para acompañarlas. Los mismos chequeos que el comprobador de vista previa de enlaces y el generador de metaetiquetas, sin salir del chat.
«Añade una og:image a cada publicación de mi blog Next.js.» Con una clave API: guarda un diseño como tu plantilla, luego construye una URL de imagen firmada por página y la conecta en generateMetadata. Sin archivos de imagen que alojar.
«Renderiza nuestra tarjeta de lanzamiento para v2.4 en tamaños de YouTube y cuadrado.» Dos renders desde una plantilla, devueltos como imágenes que puedes guardar.

Gratis, o con clave

Sin clave: explora los diseños, previsualiza cualquiera con tu texto, comprueba vistas previas de enlaces y genera metaetiquetas. Las vistas previas llevan la pequeña marca «Hecho con betterimage.io», igual que el editor gratuito. Una descarga limpia única de cualquier vista previa cuesta $4.99 en el editor.
Con sesión iniciada, o una clave gratuita: tus plantillas guardadas, URLs firmadas y uso, con la misma marca de agua y 25 imágenes al mes para construir. Iniciar sesión (a través de la URL de la cuenta) crea una clave con el nombre de la aplicación en tu cuenta, así que ambas rutas comparten una sola asignación.
Plan de pago (desde $9/mes): imágenes limpias de tus plantillas, 500 al mes, compartidas con la API REST y descargas limpias en el editor. Cada render y cada obtención no cacheada de una URL firmada cuenta como una. Planes y límites están en la página de API.

Preguntas

¿Qué es un servidor MCP?

El Protocolo de Contexto de Modelo es un estándar abierto que permite a los asistentes de IA llamar herramientas externas. Un servidor MCP describe sus herramientas una vez; el asistente lee esas descripciones y llama a una herramienta cuando una conversación lo necesita. Este servidor expone el renderizado de tarjetas, el comprobador de enlaces y el generador de metaetiquetas de betterimage.io de esa manera.

¿Necesito una cuenta?

No. La exploración de diseños, vistas previas, el verificador de enlaces y el generador de metaetiquetas funcionan solo con la URL. Tus propias plantillas guardadas necesitan una cuenta: inicia sesión a través de la URL de la cuenta (Claude.ai, Claude Desktop y cualquier cliente que admita OAuth) o usa una clave de API como encabezado. Un plan de pago elimina la marca de agua.

¿Es lo mismo que la API?

Mismo renderizador, mismas plantillas, misma cuota. La API REST es para tu código; el servidor MCP es para tu asistente. Una clave funciona en ambos, y las renderizaciones de cualquiera de los dos cuentan contra la misma asignación mensual.

¿Puede el asistente cambiar mis plantillas o mi cuenta?

Puede crear una nueva plantilla a partir de un ajuste preestablecido (eso es lo que hace save_template) y renderizar o firmar URLs para las existentes. No puede editar, eliminar ni compartir plantillas, cambiar la facturación ni tocar nada más en la cuenta. Los cambios de diseño se realizan en el editor, y una aplicación con la que hayas iniciado sesión se puede desconectar en la configuración de la cuenta.

¿Por qué una vista previa volvió con una marca de agua?

Las vistas previas de los ajustes preestablecidos siempre la llevan, con o sin clave; son gratuitas y no usan cuota. Las imágenes limpias provienen de render_card en un plan de pago, o de la descarga limpia única en el editor.

¿Qué clientes son compatibles?

Cualquier cliente MCP que se conecte a servidores remotos a través de Streamable HTTP: Claude Code, Claude.ai y Claude Desktop, Cursor, VS Code con GitHub Copilot, Windsurf y otros. El servidor habla la revisión actual del protocolo (2026-07-28, metadatos sin estado por solicitud y server/discover) y las revisiones anteriores basadas en initialize hasta 2024-11-05 en la misma URL, por lo que tanto los clientes antiguos como los nuevos funcionan. No hay paquete local que instalar. Inicia sesión con tu cuenta de betterimage (OAuth) en la URL de la cuenta, o envía una clave de API como encabezado; la URL simple no necesita ninguno.

Dale un diseñador a tu asistente

Agrega la URL una vez. Cada tarjeta, vista previa y metaetiqueta a partir de entonces está a una frase de distancia.