Highlight to Ask AI 🚧

🚧 [Experimental] Highlight anything on the page and ask your Algolia Ask AI about it.

Leverage Algolia Ask AI's context to answer questions about any highlighted text on your page.

Use cases

Documentation websites
Interactive blog posts and tutorials

Preview

Open in

Try it

Select any text in this block to see a small tooltip. Click Ask AI? to expand the panel. We'll wire streaming later.

The tooltip respects excluded elements like pre andcode, and it uses smart placement to avoid viewport edges.

Tip: Try selecting a sentence across multiple lines.

Usage

npx shadcn@latest add @algolia/highlight-to-askai

This will add the Highlight to AskAI experience to your project under components/highlight-to-askai. Use it like this:

import HighlightToAskAi from "@/components/highlight-to-askai";

<HighlightToAskAi 
  applicationId="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  assistantId="UpR727VnXnoG"
  excludeElements={["pre", "code"]}
  askButtonLabel="Ask AI?"
  onAsk={(payload) => {
    console.log(payload);
  }}
>
  <article>
    <h1>My Article</h1>
    <p>This is my article content.</p>
  </article>
</HighlightToAskAi>

Configuration

Required props for using the HighlightToAskAi component:

applicationId: The Algolia application ID
apiKey: The Algolia API key
indexName: The Algolia index name
assistantId: The Ask AI assistant ID

Optional props:

excludeElements: An array of HTML elements to exclude from the highlighted text.
askButtonLabel: The label for the ask button.
onAsk: A callback function that will be called when the ask button is clicked.

Structure

highlight-to-askai.tsx

use-askai.tsx

package.json

Extending further

Change the styling to match your brand
Open in v0 for more customization

Sidepanel Ask AI

Sidepanel chat experience with Ask AI, powered by Algolia's Ask AI. Opens as a side panel that doesn't block the rest of the page.