Algolia SiteSearch

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.

A sidepanel chat experience that opens from the right side of the screen, allowing users to interact with Algolia's Ask AI without blocking the rest of the page. Perfect for documentation sites, help centers, or any context where users need quick AI assistance while browsing.

Use cases

Documentation site AI assistant
Help center chat support
Non-blocking AI chat interface
Side-by-side browsing and AI interaction
Keyboard-accessible chat experience

Preview

Open in

Usage

npx shadcn@latest add @algolia/sidepanel-askai

This will add the Sidepanel Ask AI experience to your project under components/sidepanel-askai. Use it like this:

import SidepanelExperience from "@/components/sidepanel-askai";

<SidepanelExperience
  applicationId="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  assistantId="UpR727VnXnoG"
/>

Configuration

Required props for using the SidepanelExperience component:

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

Structure

sidepanel-askai.tsx

use-askai.ts

package.json

Behavior

Opens via button or keyboard: Click the "Ask AI" button or press Cmd+I (Mac) / Ctrl+I (Windows)
Non-blocking: The rest of the page remains interactive while the sidepanel is open
Resizable: Toggle between 360px (default) and 580px (maximized) width on desktop
Keyboard accessible: Press Escape to close, Enter to send messages
Auto-scroll: Chat automatically scrolls to show new messages
Mobile responsive: Full-width on mobile, fixed width on desktop

References

Prop

Type

Extending further

Change the styling to match your brand
Customize the sidepanel width and animations
Add custom message handlers
Integrate with your analytics system
Open in v0 for more customization

Sidepanel Ask AI