Summarize With AI

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


Features

- Zero Dependencies: Just a single JS file.
- Liquid Glass Design: Beautiful, adaptive frosted glass theme out of the box.
- Multiple Themes: Explicit light, dark, and minimal overrides available.
- Universal Support: Works with vanilla HTML/JS, React, Vue, Svelte, etc.
- Smart Context: Automatically selects page content or explicit text.
- Customizable: Configure services, prompt prefixes, and compact modes.

Installation

$3

Add this script tag to your HTML:

``html




`

$3

`bash
npm install summarize-with-ai
`

`js
import { SummarizeWidget } from 'summarize-with-ai';

SummarizeWidget.init({
target: '#widget',
theme: 'minimal'
});
`

Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| target | string \| HTMLElement | Required | CSS selector or element to render into |
| theme | 'light' \| 'dark' \| 'minimal' | 'light' | Visual theme |
| compact | boolean | false | Show icons only (no text labels) |
| mode | 'url' \| 'content' | 'url' | Send page URL or extracted content |
| services | ServiceId[] | All services | Which AI services to show |
| preferSelection | boolean | true | Use selected text if available |
| maxChars | number | 4000 | Max characters for content mode |
| promptPrefix | string | - | Custom prompt prefix |
| geminiStyle | 'app' \| 'search' | 'app' | Gemini URL style |
| extractContent | () => string | - | Custom content extractor |
| onClickService | (id, context) => void | - | Click callback for analytics |

Web Component Attributes

`html
theme="dark"
mode="content"
services="chatgpt,claude,perplexity"
prefer-selection="true"
max-chars="4000"
prompt-prefix="As a developer..."
gemini-style="app"
compact
>
`

Theming with CSS Variables

Override any of these CSS variables to customize the appearance:

`css
.summarize-widget {
--sw-bg: #ffffff;
--sw-border: #e5e7eb;
--sw-border-radius: 12px;
--sw-gap: 0.5rem;
--sw-padding: 1rem;
--sw-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
--sw-font-size: 14px;
--sw-text-color: #374151;
--sw-text-secondary: #6b7280;
--sw-button-bg: #f9fafb;
--sw-button-hover: #f3f4f6;
--sw-button-active: #e5e7eb;
--sw-button-border: #e5e7eb;
--sw-button-radius: 8px;
--sw-button-padding: 0.625rem 1rem;
--sw-focus-ring: #3b82f6;
}
`

For Web Components, set variables on the element:

`css
summarize-with-ai {
--sw-font-size: 13px;
--sw-border-radius: 8px;
}
`

Examples

$3

`js
SummarizeWidget.init({
target: '#widget',
compact: true
});
`

$3

`js
SummarizeWidget.init({
target: '#widget',
services: ['chatgpt', 'claude', 'perplexity']
});
`

$3

`js
SummarizeWidget.init({
target: '#widget',
mode: 'content',
preferSelection: true,
maxChars: 4000
});
`

$3

`js
SummarizeWidget.init({
target: '#widget',
promptPrefix: 'As a tech enthusiast, summarize the key insights from:'
});
`

$3

`js
SummarizeWidget.init({
target: '#widget',
onClickService: (serviceId, context) => {
analytics.track('summarize_click', {
service: serviceId,
mode: context.mode,
usedSelection: context.usedSelection
});
}
});
`

Development

`bash


Install dependencies

npm install

Build

npm run build

Watch mode

npm run dev

Type check

npm run typecheck
`

Mockup Tools

We provide a standalone Interactive Mockup Tool to help you test and visualize the widget on any website before integrating.

👉 Get the Mockup Tool

AI Integration Prompt

Use this prompt with your AI coding assistant (Cursor, GitHub Copilot, v0, etc.) to integrate the widget into your website:

📋 Click to expand the AI prompt

`
You are given a task to integrate the "Summarize With AI" widget into an existing website.

This widget allows users to summarize web pages using AI services like ChatGPT, Claude, Perplexity, Gemini, and Grok.

Widget Features

- Zero dependencies - pure vanilla JavaScript
- 5 AI services: ChatGPT, Claude, Perplexity, Gemini, Grok
- 3 themes: light, dark, minimal
- Compact mode (icons only)
- URL mode (sends page URL) or Content mode (sends page text)
- Selection-first: can summarize highlighted text

Installation Options

$3

Add this to your HTML:

$3

theme="dark"
mode="url"
services="chatgpt,claude,perplexity"
>

$3

npm install summarize-with-ai

Then in your JavaScript/TypeScript:

import { SummarizeWidget } from 'summarize-with-ai';

SummarizeWidget.init({
target: '#widget',
theme: 'minimal'
});

Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| target | string or HTMLElement | Required | CSS selector or element to render into |
| theme | 'light' | 'dark' | 'minimal' | 'light' | Visual theme |
| compact | boolean | false | Show icons only (no text labels) |
| mode | 'url' | 'content' | 'url' | Send page URL or extracted content |
| services | ServiceId[] | All services | Which AI services to show |
| preferSelection | boolean | true | Use selected text if available |
| maxChars | number | 4000 | Max characters for content mode |
| promptPrefix | string | - | Custom prompt prefix |
| geminiStyle | 'app' | 'search' | 'app' | Gemini URL style |
| onClickService | function | - | Callback for analytics |

CSS Customization

Override these CSS variables to match your site's design:

.summarize-widget {
--sw-bg: #ffffff;
--sw-border: #e5e7eb;
--sw-border-radius: 12px;
--sw-padding: 1rem;
--sw-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
--sw-font-size: 14px;
--sw-text-color: #374151;
--sw-button-bg: #f9fafb;
--sw-button-hover: #f3f4f6;
--sw-button-border: #e5e7eb;
--sw-button-radius: 8px;
}

Implementation Guidelines

1. Determine the best location for the widget:
- Blog posts: After the article content or in a sidebar
- Landing pages: In a prominent section
- Documentation: In the footer or floating sidebar

2. Choose the appropriate theme:
- Use 'light' for light-colored websites
- Use 'dark' for dark-themed websites
- Use 'minimal' for seamless integration without borders

3. Select the right mode:
- Use 'url' mode for public pages that AI can access
- Use 'content' mode for protected/private content

4. Consider compact mode for tight spaces like sidebars or mobile views

5. Add analytics tracking if needed:

SummarizeWidget.init({
target: '#widget',
onClickService: (serviceId, context) => {
analytics.track('summarize_click', {
service: serviceId,
mode: context.mode,
usedSelection: context.usedSelection
});
}
});

Questions to Consider

- What theme matches your site's design?
- Where should the widget be placed for best user experience?
- Which AI services are most relevant for your audience?
- Do you need analytics tracking for usage?
- Should compact mode be used for mobile responsiveness?

Steps to Integrate

1. Choose installation method (CDN, Web Component, or npm)
2. Add the HTML container element to your page
3. Initialize the widget with your preferred options
4. Customize CSS variables if needed to match your design
5. Test on different screen sizes and themes
6. Add analytics callback if tracking is required
``

Inspiration

I was inspired to create this by seeing similar features on these websites:

$3

usefluency.com - Seen on their blogs (example from The New Control Layer):

!Fluency Example

$3

superpower.com - Seen on their website in the footer:

!Superpower Health Example

License

MIT