Astro Social AI Component nace de una necesidad muy concreta que cada vez aparece más en blogs técnicos, medios digitales y proyectos de contenido: no basta con permitir que el lector comparta un artículo en redes. También empieza a tener sentido ofrecerle una vía rápida para llevar esa URL a un asistente de IA y pedirle un resumen estructurado, con la fuente ya incluida en el propio prompt.
El componente, publicado en GitHub por David Carrero Fernández-Baillo, está pensado para proyectos desarrollados con Astro.build y combina en una misma barra botones sociales y accesos a asistentes de IA. La idea original surgió en carrero.es, donde se creó primero para el propio sitio y después se extrajo como componente reutilizable. A partir de ahí se puede integrar en otros proyectos Astro, adaptarse a temas existentes y colocarse tanto al inicio como al final de un artículo.
La propuesta es sencilla, pero apunta a un cambio interesante en la forma de diseñar contenidos web: los lectores ya no solo guardan, comparten o copian enlaces. Cada vez más llevan artículos a ChatGPT, Claude, Perplexity, Grok o Mistral para resumirlos, compararlos o incorporarlos a su propio flujo de trabajo. El componente intenta hacer esa acción más limpia, más visible y más controlada desde la propia página.
Qué hace el componente
Astro Social AI Component renderiza una barra compacta con enlaces de compartición social y botones para “resumir con IA”. Según el repositorio, permite compartir en X, LinkedIn, Facebook, WhatsApp, Telegram y email. En la parte de IA incluye accesos a ChatGPT, Claude, Perplexity, Grok, Mistral y Google AI, siempre con un prompt preparado para analizar el artículo y citar la URL como fuente.
La decisión técnica más importante es que no intenta hacer scraping, llamar a una API ni generar el resumen dentro del servidor. El botón abre el asistente correspondiente con una instrucción predefinida y la URL canónica del artículo. Eso reduce complejidad, evita depender de claves API y mantiene el componente como una pieza de interfaz ligera.
También es autocontenido, personalizable y sin dependencias externas. El paquete está descrito como un componente Astro (ShareBar.astro) más una tabla de plataformas (platforms.ts). Todo se configura mediante props, sin necesidad de editar el componente principal para cada proyecto.
| Función | Detalle |
|---|---|
| Framework | Astro |
| Componente principal | ShareBar.astro |
| Configuración de plataformas | platforms.ts |
| Redes sociales | X, LinkedIn, Facebook, WhatsApp, Telegram, email |
| Asistentes IA | ChatGPT, Claude, Perplexity, Grok, Mistral, Google AI |
| Dependencias | Sin dependencias externas |
| Licencia | MIT |
| Astro requerido | >=4.0.0 |
| i18n | 25 idiomas incluidos |
| Estilos | Scoped CSS con variables personalizables |
El componente deja fuera asistentes cuya interfaz web no permite rellenar el prompt desde una URL o parámetro de consulta de forma fiable. En el changelog se explica que DeepSeek, Gemini y Copilot fueron retirados de la tabla por ese motivo: sus botones llegaban vacíos o requerían mecanismos no adecuados para este enfoque.
Cómo instalarlo en un proyecto Astro
Hasta que el paquete esté publicado en npm, el método más directo es copiar dos archivos al proyecto: src/ShareBar.astro y src/platforms.ts. Una ubicación habitual sería src/components/, aunque también se puede añadir como dependencia local o desde Git si se prefiere mantenerlo separado.
Un ejemplo básico dentro de un layout de artículo sería este:
---
import ShareBar from '../components/ShareBar.astro';
const title = entry.data.title;
const url = new URL(`/blog/${entry.data.slug}/`, Astro.site).href;
---
<ShareBar
title={title}
url={url}
handle="@tuusuario"
lang="es"
/>
<article set:html={html} />
<ShareBar
title={title}
url={url}
handle="@tuusuario"
lang="es"
/>Lenguaje del código: JavaScript (javascript)La clave está en pasar siempre una URL absoluta y canónica. El propio README del proyecto insiste en que url debe ser la URL canónica absoluta de la página. Esto es importante porque el prompt que se envía al asistente de IA incluye esa fuente y porque los enlaces sociales también necesitan una URL estable.
Astro encaja bien con este patrón porque sus componentes pueden recibir props desde el frontmatter y renderizar HTML en la plantilla. La documentación oficial de Astro explica que los componentes .astro pueden definir y aceptar props, disponibles a través de Astro.props, justo el modelo que utiliza este componente.
Props útiles para producción
El componente no obliga a mostrar todas las plataformas. Se puede elegir el subconjunto y el orden mediante la prop platforms. Por ejemplo, un medio técnico podría priorizar LinkedIn, X, email, ChatGPT, Claude y Perplexity:
<ShareBar
title={title}
url={url}
handle="@revistacloud"
lang="es"
platforms={["linkedin", "twitter", "email", "chatgpt", "claude", "perplexity"]}
/>Lenguaje del código: JavaScript (javascript)Para una barra más compacta, labels={false} deja los botones solo con iconos. En móvil, el componente ya oculta etiquetas automáticamente para mantener una disposición más corta, según la guía de uso.
<ShareBar
title={title}
url={url}
lang="es"
labels={false}
/>Lenguaje del código: HTML, XML (xml)También se puede ocultar el encabezado con heading={null} o cambiarlo por un texto propio:
<ShareBar
title={title}
url={url}
lang="es"
heading="Comparte este análisis o llévalo a tu IA"
/>Lenguaje del código: HTML, XML (xml)La versión 0.3.0 añadió además la prop credit, activa por defecto, que muestra un pequeño enlace “via Astro AI Component” hacia el repositorio. Si un proyecto no quiere mostrar esa atribución, puede desactivarla así:
<ShareBar
title={title}
url={url}
lang="es"
credit={false}
/>Lenguaje del código: HTML, XML (xml)Personalizar el prompt de IA
Una de las partes más interesantes está en platforms.ts. Cada plataforma se define con una clave, una etiqueta, un tipo (social o ai), un icono y una función href(ctx). Para los asistentes de IA, el componente usa un prompt común que incluye la URL de origen.
El proyecto incluye textos en 25 idiomas y permite sobrescribir cadenas mediante strings. Esto abre la puerta a adaptar el componente a un medio, una marca o un caso de uso concreto. Por ejemplo, un sitio de documentación técnica podría pedir un resumen con comandos, requisitos y riesgos:
<ShareBar
title={title}
url={url}
lang="es"
strings={{
heading: "Comparte o analiza este artículo",
aiPrompt: (u) =>
`Resume este artículo para un perfil técnico. Extrae requisitos, pasos de implementación, comandos relevantes y posibles riesgos. Cita siempre esta fuente: ${u}`,
}}
/>Lenguaje del código: JavaScript (javascript)Para un medio SEO o de marketing, el prompt podría pedir intención de búsqueda, entidades, estructura y preguntas frecuentes. Para un sitio de sistemas, puede centrarse en arquitectura, dependencias, configuración y despliegue.
Casos reales: carrero.es, Especial Mundial 2026 y Cloud Privado
El repositorio indica que el componente se construyó inicialmente para carrero.es y después se extrajo para que pudiera reutilizarse en cualquier proyecto Astro. En ese sitio puede verse la idea adaptada a un entorno WordPress, mientras que en proyectos Astro sirve como una pieza natural de artículo, guía o ficha informativa.
También está disponible en proyectos como Especial Mundial 2026, un sitio de seguimiento del Mundial con resultados, calendario, grupos, eliminatorias y noticias. En un sitio así, una barra de compartir y resumir con IA tiene sentido porque muchos usuarios pueden querer llevar una crónica, una previa o una ficha histórica a un asistente para obtener un resumen rápido o preparar contenido derivado.
Otro ejemplo es Cloud Privado, donde el componente puede aportar valor en artículos técnicos sobre infraestructura, cloud privado, Proxmox, VMware, backup o ciberseguridad. En este caso, la función de resumen con IA encaja especialmente bien con lectores que quieren extraer requisitos, comparar soluciones o reutilizar una guía para una decisión técnica interna.
Por qué interesa a desarrolladores y administradores de sistemas
Para un desarrollador Astro, el componente resuelve una pieza pequeña pero repetitiva: integrar una barra social cuidada, con soporte para IA, sin añadir librerías innecesarias ni mantener lógica duplicada en cada plantilla. Para un administrador de sistemas o responsable de plataforma, el enfoque también tiene ventajas: no añade backend, no requiere base de datos, no introduce claves API y no aumenta la superficie operativa de forma apreciable.
El componente se puede versionar como cualquier otra dependencia, auditar fácilmente y adaptar a políticas internas. Además, al estar bajo licencia MIT, puede usarse y modificarse en proyectos propios, comerciales o editoriales respetando los términos de la licencia.
La idea de fondo es más amplia que una barra de botones. A medida que los asistentes de IA se convierten en parte del consumo normal de información, los sitios web tendrán que decidir cómo quieren aparecer dentro de esos flujos. Ofrecer un botón de resumen con prompt propio permite guiar mejor esa interacción: el usuario no solo copia la URL, sino que recibe una instrucción preparada para citar la fuente, destacar ideas clave y mantener una estructura útil.
Preguntas frecuentes
¿Qué es Astro Social AI Component?
Es un componente para Astro que añade una barra compacta de botones para compartir un artículo en redes sociales y abrirlo en asistentes de IA con un prompt de resumen ya preparado.
¿Necesita una API de IA para funcionar?
No. El componente no llama a modelos ni genera resúmenes en servidor. Crea enlaces profundos hacia asistentes de IA con un prompt y la URL del artículo.
¿Cómo se instala actualmente?
Hasta su publicación en npm, se recomienda copiar ShareBar.astro y platforms.ts al proyecto, o añadir el repositorio como dependencia local o Git.
¿Se puede personalizar el prompt?
Sí. Puede modificarse en platforms.ts o sobrescribirse mediante la prop strings, incluyendo una función aiPrompt(url) propia.
¿Sirve solo para blogs?
No. Puede usarse en medios, documentación técnica, páginas de producto, guías, proyectos SEO, sitios de noticias o cualquier página Astro con URL canónica y título.
