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
• Clean, minimal popover UI
• Ignores selections that are too short or meaningless
• Works in any plain JavaScript or TypeScript project

Installation

npm install ai-text-popover

JS Usage

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

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

React JS / Next JS Usage

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

useEffect(() => {

  initAIPopover({
  apiKey: "your-groq-api-key",
  className: "custom-popover",
  modelName: "llama-3.3-70b-versatile", // optional (defaults to latest stable)
});

}, []);

Customization

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

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

Now you can add your css targeting the className.

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