║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Search with Ask AI description: "The opinionated search + Ask AI experience built. Built like DocSearch but with Algolia InstantSearch and Ask AI."

import { File, Folder, Files } from 'fumadocs-ui/components/files'; import { Tabs, TabsList, TabsTrigger, TabsContent, TabsContents } from '@/components/animate-ui/components/animate/tabs'; import { LogosShadcn } from '@/components/icons/shadcn'; import { LogosJavascript } from '@/components/icons/javascript'; import { TypeTable } from 'fumadocs-ui/components/type-table';

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

<PreviewSiteSearch /> <Tabs> <div className="flex items-center justify-between gap-2 mt-20 mb-2"> <h2 className="!my-0 mr-4">Usage</h2> <TabsList className="flex items-center gap-2"> <TabsTrigger value="shadcn" className="flex items-center gap-2 px-2"> <LogosShadcn /> <span>shadcn/ui</span></TabsTrigger> <TabsTrigger value="vanilla" className="flex items-center gap-2 px-2"> <LogosJavascript /> <span >Vanilla</span></TabsTrigger> </TabsList> </div> <TabsContents> <TabsContent value="shadcn"> ```tsx 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

<Files> <Folder name="app"> <File name="page.tsx" /> </Folder> <Folder name="components" defaultOpen> <File name="search-ai.tsx" /> </Folder> <Folder name="hooks" defaultOpen> <File name="use-keyboard-navigation.tsx" /> <File name="use-search-state.tsx" /> <File name="use-askai.tsx" /> </Folder> <File name="package.json" /> </Files> </TabsContent> <TabsContent value="vanilla">

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>

</TabsContent>

</TabsContents> </Tabs>

References

<TypeTable type={{ applicationId: { description: "Algolia Application ID (required)", type: "string", required: true, }, apiKey: { description: "Algolia API Key (required)", type: "string", required: true, }, indexName: { description: "Algolia Index Name (required)", type: "string", required: true, }, assistantId: { description: "AI Assistant ID (required for chat functionality)", type: "string", required: true, }, attributes: { description: "Map which hit attributes to render (supports dotted paths)", type: "HitsAttributesMapping", parameters: [ { name: "primaryText", description: "The first attribute to render in the search experience (required) - must be a searchable/highlightable attribute", }, { name: "secondaryText", description: "The second attribute to render in the search experience (optional)", }, { name: "tertiaryText", description: "The third attribute to render in the search experience (optional)", }, { name: "url", description: "The URL to render in the search experience (optional)", }, { name: "image", description: "The image to render in the search experience (optional)", }, ], required: true, }, baseAskaiUrl: { description: "Base URL for AI chat API (optional, defaults to beta endpoint)", type: "string", default: ""https://askai.algolia.com"", required: false, }, placeholder: { description: "Placeholder text for search input (optional, defaults to "What are you looking for?")", type: "string", default: ""What are you looking for?"", required: false, }, hitsPerPage: { description: "Number of hits per page (optional, defaults to 8)", type: "number", default: 8, required: false, }, keyboardShortcut: { description: "Keyboard shortcut to open search (optional, defaults to "cmd+k")", type: "string", default: ""cmd+k"", required: false, }, buttonText: { description: "Custom search button text (optional)", type: "string", required: false, }, buttonProps: { description: "Custom search button props (optional)", type: "ComponentProps<typeof SearchButton>", parameters: [ { name: "onClick", description: "The function to call when the button is clicked", }, { name: "children", description: "The children to render in the button (optional)", }, ], required: false, }, darkMode: { description: "Enable dark mode (optional)", type: "boolean", required: false, }, insights: { description: "Enable Algolia Insights (optional, defaults to true)", type: "boolean", default: true, required: false, }, searchParameters: { description: "Additional Algolia search parameters: https://www.algolia.com/doc/api-reference/search-api-parameters", type: <span>See Algolia Search API Parameters</span>, typeDescriptionLink: "https://www.algolia.com/doc/api-reference/search-api-parameters", required: false, }, }} />

Extending further

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║