Summarize With (React)

A lightweight, zero-dependency widget to summarize web pages with AI services like ChatGPT, Claude, Perplexity, Gemini, and Grok.

Features

• Zero External Dependencies: Lightweight and efficient.
• Default Theme (Glass): Beautiful, adaptive frosted glass design out of the box.
• Multiple Themes: Built-in support for Light, Dark, Minimal, and Glass themes.
• React: Built specifically for Next.js and React applications.
• Smart Context: Automatically prioritizes selected text, falling back to page content or URL.
• Customizable: Configure services, layouts, prompt prefixes, and compact modes.

Installation

Method 1: CDN / Script Tag (Easiest)

Simply drop this script into your HTML. The widget will automatically register as <summarize-with-ai>.

<script src="https://unpkg.com/summarizewith-react@latest/dist/summarize-widget.iife.global.js"></script>

<!-- Render the widget -->
<summarize-with-ai></summarize-with-ai>

Method 2: NPM (React App)

npm install summarizewith-react
# or
yarn add summarizewith-react

Usage (React)

Import the widget and drop it into your React application.

import { SummarizeWidget } from 'summarizewith-react';
import 'summarizewith-react/dist/index.css';

export default function Page() {
  return (
    <main>
      <article>
        <h1>My Article</h1>
        <p>Your content here...</p>
      </article>

      {/* Render the widget */}
      <SummarizeWidget />
    </main>
  );
}

Props

The <SummarizeWidget /> component accepts the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | services | ServiceId[] | ['chatgpt', 'claude', 'perplexity', 'gemini', 'grok'] | Array of service IDs to display. | | theme | 'default' \| 'light' \| 'dark' \| 'minimal' \| 'glass' | 'default' | Visual style of the widget. 'default' is the new glass/liquid theme. | | layout | 'auto' \| 'horizontal' \| 'vertical' | 'auto' | Controls the layout orientation. | | mode | 'url' \| 'content' | 'url' | 'url' sends the page URL. 'content' extracts page text. | | compact | boolean | false | If true, shows only icons without text labels. | | preferSelection | boolean | true | If true, processes user-selected text if available. | | maxChars | number | 4000 | Max characters to send in content mode. | | promptPrefix | string | undefined | Custom text to prepend to the user's prompt. | | geminiStyle | 'app' \| 'search' | 'search' | 'app' opens gemini.google.com. 'search' uses Google Search AI. | | extractContent | () => string | undefined | Custom function to extract content from the page. | | onClickService | (id, ctx) => void | undefined | Callback fired when a service is clicked. | | className | string | undefined | Additional CSS classes for the container. |

Examples

Compact Mode (Icons Only)

Perfect for sidebars or toolbars.

<SummarizeWidget compact={true} />

Vertical Layout

Force a vertical stack of buttons.

<SummarizeWidget layout="vertical" />

Custom Services

Show only specific AI services.

<SummarizeWidget services={['chatgpt', 'claude', 'perplexity']} />

Content Mode with Selection

Send the actual page content (or selection) instead of just the URL.

<SummarizeWidget 
  mode="content" 
  preferSelection={true} 
  maxChars={4000} 
/>

Custom Prompt

Prepend a custom instruction to the prompt sent to the AI.

<SummarizeWidget 
  promptPrefix="As a senior engineer, please summarize the key technical points:" 
/>

Analytics Callback

Track which services your users are choosing.

<SummarizeWidget 
  onClickService={(serviceId, context) => {
    analytics.track('summarize_click', { 
      service: serviceId, 
      mode: context.mode, 
      usedSelection: context.usedSelection 
    });
  }} 
/>

Theming & Customization

The widget uses CSS variables for easy customization. You can override these in your CSS to match your brand colors.

Icon Colors (Unified Theme System)

Version 0.1.7+ introduces a unified icon system where every service icon is controlled by CSS variables. This ensures perfect brand fidelity while allowing for complete customization.

:root {
  /* Override brand colors */
  --sw-icon-claude: #d97757;
  --sw-icon-perplexity: #20808d;
  --sw-icon-chatgpt: currentColor;
  
  /* Grok (Foreground/Background) */
  --sw-icon-grok-bg: #000000;
  --sw-icon-grok-fg: #ffffff;

  /* Gemini Gradient Stops */
  --sw-icon-gemini-1: #9168C0;
  --sw-icon-gemini-2: #5684D1;
  --sw-icon-gemini-3: #1BA1E3;
}

/* Dark Mode Overrides */
.dark {
  --sw-icon-perplexity: #1fb8cd; /* Lighter teal for dark backgrounds */
}

AI Integration Prompt

Want to verify this widget works? Copy this prompt into your AI coding assistant (Cursor, Copilot, etc.) to see it in action:

Integrate the 'SummarizeWith' widget (npm: summarizewith-react) into the current page.
Place it in a prominent position, preferably as a floating element or near the page title.
Use the 'default' theme. Ensure it handles both URL and content summarization.

License

MIT © Raz Syed