Astro Social AI Component: share and summarize with AI in Astro

Astro Social AI Component was born from a very specific need that is becoming increasingly common in technical blogs, digital media and content projects: it is no longer enough to let readers share an article on social media. It also makes sense to give them a quick way to send that URL to an AI assistant and ask for a structured summary, with the source already included in the prompt.

The component, published on GitHub by David Carrero Fernández-Baillo, is designed for projects built with Astro.build and combines social sharing buttons with links to AI assistants in a single bar. The original idea emerged on carrero.es, where it was first created for that site and later extracted as a reusable component. From there, it can be integrated into other Astro projects, adapted to existing themes and placed either at the beginning or at the end of an article.

The proposal is simple, but it points to an interesting shift in how web content is designed: readers no longer just save, share or copy links. Increasingly, they take articles to ChatGPT, Claude, Perplexity, Grok or Mistral to summarize them, compare them or incorporate them into their own workflows. The component aims to make that action cleaner, more visible and more controlled from the page itself.

What the component does

Astro Social AI Component renders a compact bar with social sharing links and “summarize with AI” buttons. According to the repository, it supports sharing on X, LinkedIn, Facebook, WhatsApp, Telegram and email. On the AI side, it includes links to ChatGPT, Claude, Perplexity, Grok, Mistral and Google AI, always with a prepared prompt to analyze the article and cite the URL as the source.

The most important technical decision is that it does not try to scrape, call an API or generate the summary on the server. The button opens the corresponding assistant with a predefined instruction and the canonical URL of the article. This reduces complexity, avoids depending on API keys and keeps the component as a lightweight interface element.

It is also self-contained, customizable and dependency-free. The package is described as an Astro component (ShareBar.astro) plus a platform table (platforms.ts). Everything is configured through props, without having to edit the main component for each project.

Feature	Details
Framework	Astro
Main component	ShareBar.astro
Platform configuration	platforms.ts
Social networks	X, LinkedIn, Facebook, WhatsApp, Telegram, email
AI assistants	ChatGPT, Claude, Perplexity, Grok, Mistral, Google AI
Dependencies	No external dependencies
License	MIT
Required Astro version	>=4.0.0
i18n	25 languages included
Styling	Scoped CSS with customizable variables

The component leaves out assistants whose web interfaces do not reliably allow the prompt to be prefilled from a URL or query parameter. The changelog explains that DeepSeek, Gemini and Copilot were removed from the table for that reason: their buttons opened empty or required mechanisms that did not fit this approach.

How to install it in an Astro project

Until the package is published on npm, the most direct method is to copy two files into the project: src/ShareBar.astro and src/platforms.ts. A common location would be src/components/, although it can also be added as a local dependency or from Git if you prefer to keep it separate.

A basic example inside an article layout would look like this:

---
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="@youruser"
  lang="en"
/>

<article set:html={html} />

<ShareBar
  title={title}
  url={url}
  handle="@youruser"
  lang="en"
/>Code language: JavaScript (javascript)

The key is to always pass an absolute canonical URL. The project README itself stresses that url must be the absolute canonical URL of the page. This matters because the prompt sent to the AI assistant includes that source, and because social links also need a stable URL.

Astro fits this pattern well because its components can receive props from the frontmatter and render HTML in the template. Astro’s official documentation explains that .astro components can define and accept props, available through Astro.props, which is exactly the model used by this component.

Useful props for production

The component does not force you to show every platform. You can choose the subset and order using the platforms prop. For example, a technical publication could prioritize LinkedIn, X, email, ChatGPT, Claude and Perplexity:

<ShareBar
  title={title}
  url={url}
  handle="@cloudnews"
  lang="en"
  platforms={["linkedin", "twitter", "email", "chatgpt", "claude", "perplexity"]}
/>Code language: JavaScript (javascript)

For a more compact bar, labels={false} leaves the buttons with icons only. On mobile, the component already hides labels automatically to keep the layout shorter, according to the usage guide.

<ShareBar
  title={title}
  url={url}
  lang="en"
  labels={false}
/>Code language: HTML, XML (xml)

You can also hide the heading with heading={null} or replace it with your own text:

<ShareBar
  title={title}
  url={url}
  lang="en"
  heading="Share this analysis or send it to your AI"
/>Code language: HTML, XML (xml)

Version 0.3.0 also added the credit prop, enabled by default, which displays a small “via Astro AI Component” link to the repository. If a project does not want to show that attribution, it can be disabled like this:

<ShareBar
  title={title}
  url={url}
  lang="en"
  credit={false}
/>Code language: HTML, XML (xml)

Customizing the AI prompt

One of the most interesting parts is in platforms.ts. Each platform is defined with a key, a label, a type (social or ai), an icon and an href(ctx) function. For AI assistants, the component uses a common prompt that includes the source URL.

The project includes text in 25 languages and allows strings to be overridden through strings. This makes it possible to adapt the component to a publication, brand or specific use case. For example, a technical documentation site could ask for a summary with commands, requirements and risks:

<ShareBar
  title={title}
  url={url}
  lang="en"
  strings={{
    heading: "Share or analyze this article",
    aiPrompt: (u) =>
      `Summarize this article for a technical audience. Extract requirements, implementation steps, relevant commands and possible risks. Always cite this source: ${u}`,
  }}
/>Code language: JavaScript (javascript)

For an SEO or marketing publication, the prompt could ask for search intent, entities, structure and frequently asked questions. For a systems-focused site, it can focus on architecture, dependencies, configuration and deployment.

Real use cases: carrero.es, Especial Mundial 2026 and Cloud Privado

The repository states that the component was initially built for carrero.es and later extracted so it could be reused in any Astro project. On that site, the idea can be seen adapted to a WordPress environment, while in Astro projects it works naturally as part of an article, guide or information page.

It is also available in projects such as Especial Mundial 2026, a World Cup tracking site with results, calendar, groups, knockout rounds and news. On a site like that, a sharing and AI summary bar makes sense because many users may want to take a match report, preview or historical profile to an assistant to get a quick summary or prepare derivative content.

Another example is Cloud Privado, where the component can add value to technical articles about infrastructure, private cloud, Proxmox, VMware, backup or cybersecurity. In this case, the AI summary function fits especially well with readers who want to extract requirements, compare solutions or reuse a guide for an internal technical decision.

Why it matters for developers and system administrators

For an Astro developer, the component solves a small but repetitive task: integrating a polished social bar with AI support, without adding unnecessary libraries or maintaining duplicated logic in each template. For a system administrator or platform owner, the approach also has advantages: it adds no backend, requires no database, introduces no API keys and does not meaningfully increase operational surface area.

The component can be versioned like any other dependency, easily audited and adapted to internal policies. Since it is MIT licensed, it can be used and modified in private, commercial or editorial projects while respecting the terms of the license.

The underlying idea is bigger than a button bar. As AI assistants become part of the normal way people consume information, websites will need to decide how they want to appear inside those workflows. Offering a summary button with a custom prompt makes it possible to guide that interaction better: the user does not just copy the URL, but receives a prepared instruction to cite the source, highlight key ideas and keep a useful structure.

Frequently asked questions

What is Astro Social AI Component?
It is a component for Astro that adds a compact bar of buttons to share an article on social networks and open it in AI assistants with a prepared summary prompt.

Does it need an AI API to work?
No. The component does not call models or generate summaries on the server. It creates deep links to AI assistants with a prompt and the article URL.

How is it currently installed?
Until it is published on npm, the recommended approach is to copy ShareBar.astro and platforms.ts into the project, or add the repository as a local or Git dependency.

Can the prompt be customized?
Yes. It can be modified in platforms.ts or overridden through the strings prop, including a custom aiPrompt(url) function.

Is it only useful for blogs?
No. It can be used in media sites, technical documentation, product pages, guides, SEO projects, news sites or any Astro page with a canonical URL and title.