Algolia SiteSearch

The opinionated search + Ask AI experience built. Built like DocSearch but with Algolia InstantSearch and Ask AI.

Combine precise retrieval with conversational AI search. Search + AskAI keeps traditional hits in view while letting users ask follow-up questions powered by Algolia’s Ask AI.

Use cases

AI-powered chat for complex queries
Conversational search
Keyboard-friendly, accessible navigation
Hybrid search with traditional hits and AI-powered follow-ups

Preview

Open in

Usage

npx shadcn@latest add @algolia/search-ai

This will add the Search with AskAI experience to your project under components/search-ai. Use it like this:

import SearchWithAskAi from "@/components/search-ai";

<SearchWithAskAi
  applicationId="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  assistantId="UpR727VnXnoG"
  attributes={{
    primaryText: "title",
    secondaryText: "description",
    tertiaryText: "itunesAuthor",
    url: "url",
    image: "imageUrl",
  }}
/>

Configuration

Required props for using the SearchWithAskAi component:

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

Structure

search-ai.tsx

use-keyboard-navigation.tsx

use-search-state.tsx

use-askai.tsx

package.json

Use our CDN bundle (recommended)

<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/search-askai.min.css" />
<div id="search-container"></div>
<script src="https://unpkg.com/@algolia/sitesearch@latest/dist/search-askai.min.js"></script>
<script>
  SiteSearchAskAI.init({
    container: '#search-container',
    applicationId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    assistantId: 'YOUR_ASSISTANT_ID',
    attributes: {
      primaryText: 'title',
      secondaryText: 'description',
      tertiaryText: 'itunesAuthor',
      url: 'url',
      image: 'imageUrl',
    },
  });
</script>

Build your own bundle (advanced)

Open CodeSandbox.
Update the experience in packages/standalone to fit your needs (requires React skills)
Build the bundle bun run bundle
Download the bundle from packages/standalone/dist
Use it in your project

<!-- styles -->
<link rel="stylesheet" href="./path/to/your/search-askai.min.css" />

<!-- scripts -->
<script src="./path/to/your/search-askai.min.js"></script>

<!-- container -->
<div id="search-container"></div>

<!-- initialization -->
<script>
  SiteSearchAskAI.init({
    container: '#search-container',
    applicationId: 'YOUR_APP_ID',
    apiKey: 'YOUR_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    assistantId: 'YOUR_ASSISTANT_ID',
    attributes: {
      primaryText: 'title',
      secondaryText: 'description',
      tertiaryText: 'itunesAuthor',
      url: 'url',
      image: 'imageUrl',
    },
  });
</script>

References

Prop

Type

Extending further

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

Search with Ask AI