DOCSEARCHbyAlgolia
Submit Docs

Algolia SiteSearch Documentation

website·Indexed May 13, 2026

https://sitesearch.algolia.com

Documentation for Algolia SiteSearch, a modern search component library providing production-ready UI components. Covers quickstarts for Vanilla JS and React with Shadcn/UI, and guides for implementing search experiences including standard search, dropdown search, and AI-powered features like Ask AI, Sidepanel Ask AI, and Highlight to Ask AI.

Tokens
4.3K
Snippets
16
Records
28
Agent score
49%

What's inside Algolia SiteSearch

  1. Overview of Algolia SiteSearch component library

    Algolia SiteSearch is a modern, production-ready search component library designed to help developers build comprehensive search experiences. It provides essential UI components, advanced patterns, and AI integrations. The components are fully composable, allowing you to build, customize, and extend them to fit specific needs. Key features include:

    • Instant Search: Lightning-fast search with real-time results and keyboard navigation (triggered via ⌘K).
    • Search with Ask AI: AI-powered conversational search with natural language understanding.
    • Composability: Components are designed to be extended and customized.

    The library is community-driven and powered by Algolia.

  2. Install and use the Highlight to Ask AI component

    The 'Highlight to Ask AI' feature is an experimental component that allows users to select text on a page and ask an Algolia Ask AI assistant about the highlighted content. It is designed for documentation sites and interactive tutorials. The component respects excluded elements (like pre and code) and uses smart placement for the tooltip.
    npx shadcn@latest add @algolia/highlight-to-askai

  3. Getting started with SiteSearch integration paths

    Algolia SiteSearch offers two primary integration paths depending on your stack:

    1. SiteSearch with Shadcn/UI: For React projects using the Shadcn/UI component library.
    2. SiteSearch with Vanilla JS: For projects using standard JavaScript without a specific UI framework.

    The philosophy is to copy search experience components directly into your repository, allowing you to customize them freely without complex configuration or external dependencies.

  4. Integrate Algolia SiteSearch in Vanilla JS via CDN

    Include the SiteSearch CSS and JS bundles via CDN, add a container element, and initialize the search widget with your Algolia credentials and attribute mappings. This works out of the box for the default 'search' experience.

    <link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.css" /> <script src="https://unpkg.com/@algolia/sitesearch@latest/dist/search.min.js"></script> <div id="search"></div> <script> SiteSearch.init({ container: "#search", applicationId: "YOUR_APP_ID", apiKey: "YOUR_API_KEY", indexName: "YOUR_INDEX_NAME", attributes: { primaryText: "title", // the attribute to display in the hits list secondaryText: "description", // the secondary attribute to display in the hits list tertiaryText: "itunesAuthor", // the tertiary attribute to display in the hits list url: "url", // the URL of the hit image: "imageUrl", // the image URL of the hit }, }); </script>

  5. Install and configure Dropdown Search with shadcn/ui

    The Dropdown Search experience provides an inline autocomplete dropdown powered by Algolia's InstantSearch. It is designed for navigation bars, headers, or contexts where a modal would be too intrusive. It opens automatically when a query is entered, supports keyboard navigation, and closes on outside clicks or selection.

    To install, use the shadcn CLI to add the component to your project.

    npx shadcn@latest add @algolia/dropdown-search

  6. Install Search with Ask AI via shadcn/ui

    Add the Search with AskAI experience to a React project using shadcn/ui. This installs the component under components/search-ai and provides a pre-built SearchWithAskAi component that combines traditional search hits with an AI chat interface.
    npx shadcn@latest add @algolia/search-ai

  7. Prerequisites for Algolia SiteSearch

    Before using Algolia SiteSearch, ensure you have the following resources available in your Algolia dashboard:

    1. Algolia account: Required for all operations.
    2. Algolia index: Where your search data is stored.
    3. Algolia API key: Used to authenticate requests.
    4. Algolia Ask AI assistant (Optional): Required only if you intend to use conversational search features (Ask AI).

  8. Load specific SiteSearch experiences via CDN

    Algolia provides bundled versions of all vanilla search experiences via CDN. Replace <experience-name> in the URLs with the specific experience you want to use (e.g., 'dropdown-search', 'ask-ai'). Always use the minified versions (.min.css and .min.js) to reduce bundle size.

    <!-- styles --> <link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/<experience-name>.min.css" />

    <!-- scripts --> <script src="https://unpkg.com/@algolia/sitesearch@latest/dist/<experience-name>.min.js"></script>

  9. Prerequisites for SiteSearch with Shadcn/UI

    Before installing SiteSearch with Shadcn/UI, ensure your project meets the following requirements:

    1. shadcn/ui: Must be initialized in your project. Run npx shadcn@latest init if not already done.
    2. React: Version 18 or later.
    3. Tailwind CSS: Must be set up, as shadcn/ui relies on it for styling and CSS variables mode for theming.

    Note: You must also satisfy the general Algolia prerequisites (such as having an Algolia account and index configured).

  10. Install SiteSearch with Shadcn/UI

    Install the Algolia SiteSearch component into a React project using the shadcn/ui CLI. This command adds the Search component code and dependencies directly to your project under components/search, allowing you to read, edit, and customize the source code to match your product's branding.
    npx shadcn@latest add @algolia/search

  11. Initialize Search with Ask AI using CDN bundle

    Use the recommended CDN bundle to integrate Search with Ask AI without a build step. Include the CSS and JS files from unpkg, create a container div, and initialize the experience via SiteSearchAskAI.init(). This method supports the same configuration options as the React component.

    <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>

  12. Install and configure Sidepanel Ask AI with shadcn/ui

    Add the Sidepanel Ask AI experience to a React project using shadcn/ui. This component opens a non-blocking chat interface from the right side of the screen, allowing users to interact with Algolia's Ask AI while browsing. It is ideal for documentation sites and help centers.
    npx shadcn@latest add @algolia/sidepanel-askai
    import SidepanelExperience from "@/components/sidepanel-askai";

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