ai-text-popover/README.md

A lightweight, plug-and-play JavaScript utility that allows users to **select text** on a webpage and get a simple explanation for it using Groq's LLMs. Perfect for **glossary-style popovers**, educational tools, or AI-assisted documentation.

# AI-text-popover

A lightweight, plug-and-play JavaScript utility that allows users to **select text** on a webpage and get a simple explanation for it using Groq's LLMs. Perfect for **glossary-style popovers**, educational tools, or AI-assisted documentation.

---

## Features

- Zero configuration (just plug and play)
- Explains selected text using [Groq's API](https://console.groq.com/)
- Clean, minimal popover UI
- Ignores selections that are too short or meaningless
- Works in any plain JavaScript or TypeScript project

---

## Installation

```bash
npm install ai-text-popover
```

---

## JS Usage

```bash
import { initAIPopover } from "ai-text-popover";

initAIPopover({ apiKey: "api_key_from_https://console.groq.com/" });
```

## React JS / Next JS Usage

```bash
import { useEffect } from "react";
import { initAIPopover } from "ai-text-popover";

useEffect(() => {
  initAIPopover({ apiKey: "api_key_from_https://console.groq.com/" });
}, []);
```

## Customization

Adding a className to the popover will give you flexibility to customize it according to your theme.

```bash
  initAIPopover({ apiKey: "api_key_from_https://console.groq.com/", className: "custom_class_name" });
```

Now you can add your css targeting the className.

```bash
.custom_class_name {
    background-color: #eaeaea;
    ...
}
```