SiteSearch

https://sitesearch.algolia.com
Admin
SiteSearch by Algolia is a lightning-fast search component library, providing essential UI...
Tokens:5,423
Snippets:44
Trust Score:10
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install and Configure SiteSearch Component

Source: https://sitesearch.algolia.com/docs/experiences/search

Install the search component via CLI and implement it within a React application. Requires providing Algolia credentials and mapping hit attributes to the component props.

```bash
npx shadcn@latest add @algolia/search
```

```tsx
import Search from "@/components/search";

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

--------------------------------

### Install Dropdown Search with shadcn/ui

Source: https://sitesearch.algolia.com/docs/experiences/dropdown-search

Install the Dropdown Search experience into your project using the shadcn/ui CLI. This command adds the necessary files to your components directory.

```bash
npx shadcn@latest add @algolia/dropdown-search
```

--------------------------------

### Install Sidepanel Ask AI with shadcn/ui

Source: https://sitesearch.algolia.com/docs/experiences/ask-ai/sidepanel-askai

Command to install the Sidepanel Ask AI component using shadcn/ui. This command adds the necessary files to your project, typically under `components/sidepanel-askai`.

```bash
npx shadcn@latest add @algolia/sidepanel-askai
```

--------------------------------

### Install Algolia Search AI Component

Source: https://sitesearch.algolia.com/docs/experiences/search-askai

The installation command for adding the Search with AskAI experience to a React project using the shadcn/ui CLI.

```bash
npx shadcn@latest add @algolia/search-ai
```

--------------------------------

### Install Highlight to Ask AI via shadcn/ui

Source: https://sitesearch.algolia.com/docs/experiences/ask-ai/highlight-to-askai

The installation command to add the Highlight to Ask AI component to your project using the shadcn CLI. This command scaffolds the necessary files into your components directory.

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

--------------------------------

### Include Vanilla JS SiteSearch Experiences via CDN

Source: https://sitesearch.algolia.com/docs/getting-started/vanilla

This example demonstrates how to include various SiteSearch experiences using Vanilla JavaScript via CDN. You need to link the corresponding CSS and JS files for the desired experience. Remember to replace `<experience-name>` with the actual name of the experience you intend to use, and always opt for the minified versions (`.min.css` and `.min.js`) to optimize bundle size.

```html
<!-- 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>

<!-- Replace <experience-name> with the name of the experience you want to use -->
```

--------------------------------

### Implement SearchWithAskAi React Component

Source: https://sitesearch.algolia.com/docs/experiences/search-askai

Usage example for the SearchWithAskAi React component, requiring Algolia credentials and field mapping configuration.

```javascript
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",
  }}
/>
```

--------------------------------

### Implement SiteSearch with Vanilla JavaScript

Source: https://sitesearch.algolia.com/docs/experiences/search

Integrate the search experience into any website using the Algolia CDN bundle. This approach requires a container element and initialization via the SiteSearch global object.

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

--------------------------------

### Use Sidepanel Ask AI Component in React

Source: https://sitesearch.algolia.com/docs/experiences/ask-ai/sidepanel-askai

Example of how to import and use the `SidepanelExperience` component in a React application. It requires Algolia application credentials and an assistant ID.

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

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

--------------------------------

### Implement HighlightToAskAi Component

Source: https://sitesearch.algolia.com/docs/experiences/ask-ai/highlight-to-askai

Example implementation of the HighlightToAskAi component in a React application. It requires Algolia credentials and wraps the content area where text selection should be enabled.

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

--------------------------------

### Use Dropdown Search Component in React

Source: https://sitesearch.algolia.com/docs/experiences/dropdown-search

Integrate the Dropdown Search component into your React application. This example demonstrates how to configure essential props like Algolia credentials, index name, and display attributes.

```jsx
import DropdownSearch from "@/components/dropdown-search";

<DropdownSearch
  applicationId="06YAZFOHSQ"
  apiKey="94b6afdc316917b6e6cdf2763fa561df"
  indexName="algolia_podcast_sample_dataset"
  placeholder="Search podcasts..."
  hitsPerPage={5}
  attributes={{
    primaryText: "title",
    secondaryText: "description",
    tertiaryText: "itunesAuthor",
    url: "url",
    image: "imageUrl",
  }}
/>
```

--------------------------------

### Initialize SiteSearch with Vanilla JS

Source: https://sitesearch.algolia.com/docs/getting-started/vanilla

This snippet shows how to initialize the SiteSearch experience using Vanilla JavaScript. It includes linking the CSS and JS files from a CDN and configuring the search parameters like application ID, API key, index name, and attributes to display. Ensure you replace placeholder values with your actual Algolia credentials.

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

--------------------------------

### Integrate Search with Ask AI via CDN

Source: https://sitesearch.algolia.com/docs/experiences/search-askai

Instructions for embedding the search experience into any website using the Algolia CDN bundle and initialization script.

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

--------------------------------

### Search with Ask AI CDN Bundle

Source: https://sitesearch.algolia.com/docs/experiences/search-askai

Use the provided CDN bundle for a quick integration of the 'Search with Ask AI' experience without needing a build process.

```APIDOC
## GET /websites/sitesearch_algolia/cdn

### Description
Integrates the 'Search with Ask AI' experience using a CDN bundle. This method is recommended for quick setup and requires including CSS and JavaScript files, followed by initialization script.

### Method
GET (for CDN resources)

### Endpoint
N/A (CDN URLs provided)

### Parameters
#### Initialization Script Parameters
- **container** (string) - Required - CSS selector for the container element (e.g., '#search-container').
- **applicationId** (string) - Required - The Algolia application ID.
- **apiKey** (string) - Required - The Algolia API key.
- **indexName** (string) - Required - The Algolia index name.
- **assistantId** (string) - Required - The Ask AI assistant ID.
- **agentStudio** (boolean) - Optional - Use Agent Studio endpoints for chat (defaults to false).
- **attributes** (object) - Required - Mapping for primary, secondary, tertiary text, URL, and image.
  - **primaryText** (string) - Description of the primary text field.
  - **secondaryText** (string) - Description of the secondary text field.
  - **tertiaryText** (string) - Description of the tertiary text field.
  - **url** (string) - Description of the URL field.
  - **image** (string) - Description of the image field.

### Request Example
```html
<!-- styles -->
<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@latest/dist/search-askai.min.css" />

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

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

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

### Response
N/A (This is a client-side integration)

### Behavior
- **Keyboard shortcut**: Press `Cmd+K` (Mac) / `Ctrl+K` (Windows) to open the search modal.
- **Keyboard navigation**: Use arrow keys to navigate results, `Enter` to select, `Escape` to close.
- **AI chat**: Switch to chat mode to ask follow-up questions powered by Algolia's Ask AI.
- **Accessible**: Full keyboard support and ARIA labels for screen readers.
```

--------------------------------

### Search with Ask AI Component Usage

Source: https://sitesearch.algolia.com/docs/experiences/search-askai

Integrate the 'Search with Ask AI' component into your React project using npx. This allows for a seamless search and AI chat experience.

```APIDOC
## POST /websites/sitesearch_algolia/components/search-ai

### Description
Integrates the 'Search with Ask AI' component into your project using `npx shadcn@latest add @algolia/search-ai`. This component provides a hybrid search experience combining traditional search results with AI-powered follow-up questions.

### Method
`npx` command (for installation)

### Endpoint
N/A (Component installation)

### Parameters
#### Request Body (Component Props)
- **applicationId** (string) - Required - The Algolia application ID.
- **apiKey** (string) - Required - The Algolia API key.
- **indexName** (string) - Required - The Algolia index name.
- **assistantId** (string) - Required - The Ask AI assistant ID.
- **agentStudio** (boolean) - Optional - Use Agent Studio endpoints for chat (defaults to false).
- **attributes** (object) - Required - Mapping for primary, secondary, tertiary text, URL, and image.
  - **primaryText** (string) - Description of the primary text field.
  - **secondaryText** (string) - Description of the secondary text field.
  - **tertiaryText** (string) - Description of the tertiary text field.
  - **url** (string) - Description of the URL field.
  - **image** (string) - Description of the image field.
- **placeholder** (string) - Optional - Placeholder text for the search input.
- **suggestedQuestionsEnabled** (boolean) - Optional - Enables suggested questions.
- **hitsPerPage** (number) - Optional - Number of hits to display per page.
- **buttonText** (string) - Optional - Text for the search button.
- **buttonProps** (object) - Optional - Props for the search button component.
- **darkMode** (boolean) - Optional - Enables dark mode.
- **insights** (boolean) - Optional - Enables insights tracking.
- **searchParameters** (object) - Optional - Additional parameters for Algolia Search API.

### Request Example
```jsx
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",
  }}
/>
```

### Response
N/A (This is a client-side component)

### Behavior
- **Keyboard shortcut**: Press `Cmd+K` (Mac) / `Ctrl+K` (Windows) to open the search modal.
- **Keyboard navigation**: Use arrow keys to navigate results, `Enter` to select, `Escape` to close.
- **AI chat**: Switch to chat mode to ask follow-up questions powered by Algolia's Ask AI.
- **Accessible**: Full keyboard support and ARIA labels for screen readers.
```
Tokens:
Raw