AI Summary Footer

A React component that displays AI provider icons (ChatGPT, Claude, Gemini, Perplexity, Grok) with pre-filled prompts asking for company service summaries.

Installation

npm install ai-summary-footer

Usage

import { AISummaryFooter } from 'ai-summary-footer';
import 'ai-summary-footer/styles.css';

// lucis.life came up with this so I will be using them as an example :)

function App() {
  return (
    <AISummaryFooter
      companyName="Lucis"
      companyUrl="https://lucis.com"
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | companyName | string | Yes | Company name displayed in header and prompt | | companyUrl | string | Yes | Company website URL included in prompt | | providers | AIProviderKey[] | No | Subset of providers to display (default: all 5) | | className | string | No | Additional CSS class for container | | prompt | string | No | Custom prompt template (use {companyName} and {companyUrl} placeholders) |

Available Providers

• chatgpt - ChatGPT (OpenAI)
• claude - Claude (Anthropic)
• gemini - Gemini (Google)
• perplexity - Perplexity
• grok - Grok (xAI)

Examples

Show only specific providers

<AISummaryFooter
  companyName="Acme"
  companyUrl="https://acme.com"
  providers={['chatgpt', 'claude', 'gemini']}
/>

Custom prompt

<AISummaryFooter
  companyName="Acme"
  companyUrl="https://acme.com"
  prompt="Tell me about {companyName} at {companyUrl}. What products do they offer?"
/>

Custom styling

<AISummaryFooter
  companyName="Acme"
  companyUrl="https://acme.com"
  className="my-custom-footer"
/>

Default Prompt

The default prompt template is:

As a potential client, I want to understand what I will receive with {companyName} ({companyUrl}).

Detail step by step what the service includes: what I receive, what I analyze, what I see in my dashboard, the deliverables, recommendations, and frequency.

Explain it simply, as if describing the real experience of the service.

Styling

Import the default styles:

import 'ai-summary-footer/styles.css';

Or override with your own CSS using the following classes:

• .ai-summary-footer - Container
• .ai-summary-footer__title - Header text
• .ai-summary-footer__icons - Icon row container
• .ai-summary-footer__icon - Individual icon link

License

MIT