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

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/ask-ai/highlight-to-askai.mdx

Use this command to add the Highlight to AskAI experience to your project. It installs the necessary package and sets up the component.

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

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

### Run Development Server

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/README.md

Use these commands to start the development server for the Next.js application. Open http://localhost:3000 in your browser to view the result.

```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```

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

### Install shadcn/ui package for Search with Ask AI

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search-askai.mdx

Use this command to add the Search with AskAI experience to your project when using shadcn/ui. It installs the necessary package and places the component in `components/search-ai`.

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

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

### Install Vanilla JavaScript Site Search Package

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Install the standalone Vanilla JavaScript version of the site search package.

```bash
npm install @algolia/sitesearch
```

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

### Install Dropdown Search with shadcn/ui

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/dropdown-search.mdx

Use this command to add the Dropdown Search experience to your project. It installs the necessary package and places the component files under `components/dropdown-search`.

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

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

### Install Sidepanel Ask AI with shadcn/ui

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/ask-ai/sidepanel-askai.mdx

Use this command to add the Sidepanel Ask AI experience to your project. It installs the necessary package and places the component files in the correct directory.

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

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

### Install React Site Search Package

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Install the React version of the site search package along with its peer dependencies.

```bash
npm install @algolia/sitesearch-react react react-dom
```

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

### Initialize SiteSearch Vanilla Search + Ask AI

Source: https://github.com/algolia/sitesearch/blob/main/apps/vanilla/index.html

Integrate search with AI capabilities using `SiteSearchAskAI.init`. This example configures default Ask AI endpoints and enables suggested questions.

```javascript
const aaApplicationId = "06YAZFOHSQ"; const aaApiKey = "94b6afdc316917b6e6cdf2763fa561df"; const aaIndexName = "algolia_podcast_sample_dataset"; // Search + Ask AI experience (default Ask AI endpoints) if (window.SiteSearchAskAI) { window.SiteSearchAskAI.init({ container: "#searchAskAi", applicationId: aaApplicationId, apiKey: aaApiKey, assistantId: "UpR727VnXnoG", suggestedQuestionsEnabled: true, indexName: aaIndexName, attributes: { primaryText: "title", secondaryText: "description", tertiaryText: "itunesAuthor", url: "url", image: "imageUrl", }, }); // Search with Agent Studio completions window.SiteSearchAskAI.init({ container: "#searchAskAiAgentStudio", applicationId: "PMZUYBQDAK", apiKey: "40aa23271f25347826db43222329fdfa", assistantId: "ccdec697-e3fe-465b-a1c3-657e7bf18aef", suggestedQuestionsEnabled: true, indexName: "algolia_movie_sample_dataset", agentStudio: true, attributes: { primaryText: "title", secondaryText: "description", tertiaryText: "itunesAuthor", url: "url", image: "imageUrl", }, }); }
```

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

### Run Demo Application in Development

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Start only the demo application in development mode to test specific features or integrations.

```bash
pnpm dev:demo
```

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

### Run All Packages in Development

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Execute this command to start all packages within the monorepo in development mode, enabling hot reloading and other development features.

```bash
pnpm dev
```

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

### Add SiteSearch Component with Shadcn/UI CLI

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/getting-started/react-shadcn.mdx

Install the default SiteSearch experience using the shadcn/ui CLI. This command adds the 'Search' component and its dependencies to your project under `components/search`.

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

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

### Use Dropdown Search Component

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/dropdown-search.mdx

Import and configure the Dropdown Search component with your Algolia credentials and desired attributes. This example shows how to set up the application ID, API key, index name, placeholder, and which hit attributes to display.

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

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

### Build Demo Application

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Build the demo application for production deployment.

```bash
pnpm build:demo
```

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

### Initialize Site Search Modal via CDN

Source: https://github.com/algolia/sitesearch/blob/main/packages/standalone/README.md

Include the CSS and JS files from unpkg, then initialize the SiteSearch with your Algolia credentials and configuration options. This is the recommended approach for zero-build integration.

```html
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/@algolia/sitesearch@1/dist/search.min.css" />

<!-- JS (UMD exposes window.SiteSearch) -->
<script src="https://unpkg.com/@algolia/sitesearch@1/dist/search.min.js"></script>

<div id="search-root"></div>

<script>
  // Minimal config – replace with your own Algolia credentials
  window.SiteSearch.init({
    container: '#search-root',
    applicationId: 'ALGOLIA_APP_ID',
    apiKey: 'ALGOLIA_SEARCH_API_KEY',
    indexName: 'YOUR_INDEX_NAME',
    // Optional UX tweaks
    placeholder: 'What are you looking for?',
    hitsPerPage: 8,
    keyboardShortcut: 'cmd+k', // or 'ctrl+k', 'alt+k', etc.
    darkMode: undefined, // true, false, or leave it empty
    attributes: {
      primaryText: 'title', // required primary text
      secondaryText: 'description', // optional secondary text
      tertiaryText: "itunesAuthor", // optional tertiary text
      url: "url" // optional url attribute
      image: 'image', // optional URL attribute
    },
    // Optional: Transform items before rendering (e.g., proxy images)
    transformItems: (items) => 
      items.map(item => ({
        ...item,
        image: item.image ? `https://your-proxy.com/${item.image}` : item.image
      }))
  });
</script>
```

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

### Initialize Search with Ask AI using CDN bundle (Vanilla JS)

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search-askai.mdx

Include the CSS and JS files from the CDN and initialize the SiteSearchAskAI component with your Algolia credentials and desired attributes. This is the recommended approach for Vanilla JavaScript projects.

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

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

### Initialize Search with Local Bundle

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search.mdx

After building your own bundle, link to the local CSS and JavaScript files and initialize SiteSearch. This method is for advanced users who need to customize the experience.

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

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

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

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

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

### Build All Packages

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Compile and bundle all packages in the monorepo for production deployment.

```bash
pnpm build
```

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

### Initialize Shadcn/UI

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/getting-started/react-shadcn.mdx

Run this command to initialize shadcn/ui in your project if you haven't already. Ensure you have a React project (version 18+) and Tailwind CSS set up.

```bash
npx shadcn@latest init
```

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

### Include Vanilla JS Experience via CDN

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/getting-started/vanilla.mdx

Include the CSS and JavaScript bundles for a SiteSearch vanilla experience using CDN links. Remember to replace `<experience-name>` with the specific experience you intend to use. Always use the minified versions for optimal 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 -->
```

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

### Initialize Search with CDN Bundle

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search.mdx

Include the CSS and JavaScript files from the CDN and initialize the SiteSearch with your Algolia credentials and desired attributes. This is the recommended approach for vanilla JavaScript projects.

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

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

### Initialize React Search Experience

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Use the SearchExperience component to set up the full search functionality in a React application. Ensure you replace placeholder values with your actual Algolia credentials and assistant ID.

```tsx
import { SearchExperience } from '@algolia/sitesearch-react';

function App() {
  return (
    <SearchExperience
      applicationId="YOUR_APP_ID"
      apiKey="YOUR_API_KEY"
      indexName="YOUR_INDEX_NAME"
      assistantId="YOUR_ASSISTANT_ID"
      placeholder="Search your site..."
    />
  );
}
```

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

### Initialize SiteSearch Vanilla Search

Source: https://github.com/algolia/sitesearch/blob/main/apps/vanilla/index.html

Use this snippet to initialize the basic search experience. Ensure the SiteSearch library is loaded before calling `init`.

```javascript
const applicationId = "06YAZFOHSQ"; const apiKey = "94b6afdc316917b6e6cdf2763fa561df"; const indexName = "algolia_podcast_sample_dataset"; // Search experience if (window.SiteSearch) { window.SiteSearch.init({ container: "#search", applicationId, apiKey, indexName, attributes: { primaryText: "title", secondaryText: "description", tertiaryText: "itunesAuthor", url: "url", image: "imageUrl", }, }); }
```

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

### Initialize Search with Ask AI with Agent Studio (Vanilla JS)

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search-askai.mdx

To use Agent Studio endpoints for chat, set `agentStudio: true` during initialization. This configures the experience to use Agent Studio completions API with your provided API key and application ID.

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

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

### Initialize SiteSearch Search Experience

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/getting-started/vanilla.mdx

Use this HTML and JavaScript snippet to initialize the search experience. Ensure you replace placeholder values with your Algolia application ID, API key, and index name. The `attributes` object maps to the data fields in your index.

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

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

### Initialize SiteSearch Vanilla Sidepanel Ask AI

Source: https://github.com/algolia/sitesearch/blob/main/apps/vanilla/index.html

Configure a floating chat panel using `SiteSearchSidepanelAskAI`. Set `triggerPosition: "inline"` to keep the button within the card, or use `"fixed"` for a viewport-fixed button in production.

```javascript
if (window.SiteSearchSidepanelAskAI) { window.SiteSearchSidepanelAskAI.init({ container: "#sidepanelAskAi", applicationId: "PMZUYBQDAK", apiKey: "40aa23271f25347826db43222329fdfa", assistantId: "ccdec697-e3fe-465b-a1c3-657e7bf18aef", indexName: "algolia_movie_sample_dataset", agentStudio: true, suggestedQuestionsEnabled: true, triggerPosition: "inline", buttonText: "Ask AI", }); }
```

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

### Initialize Vanilla JavaScript Site Search

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Initialize the Vanilla JavaScript SiteSearch widget by providing a container element and your Algolia credentials. This script should be included after the main SiteSearch library is loaded.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <div id="search-container"></div>

  <script src="https://cdn.jsdelivr.net/npm/@algolia/sitesearch/dist/sitesearch.min.js"></script>
  <script>
    SiteSearch.init({
      container: '#search-container',
      applicationId: 'YOUR_APP_ID',
      apiKey: 'YOUR_API_KEY',
      indexName: 'YOUR_INDEX_NAME',
      assistantId: 'YOUR_ASSISTANT_ID'
    });
  </script>
</body>
</html>
```

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

### SiteSearch Static Methods (Vanilla JS)

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

These are the static methods available on the SiteSearch class for initializing and managing the search widget in vanilla JavaScript.

```APIDOC
## SiteSearch Static Methods (Vanilla JS)

### Description
Methods for initializing and destroying the SiteSearch widget.

### Methods
- `SiteSearch.init(options)`: Initialize search widget.
- `SiteSearch.destroy(container)`: Remove search widget instance.
- `SiteSearch.destroyAll()`: Remove all search widget instances.
```

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

### Run Tests and Lint Code

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Commands to execute tests and lint the codebase across all packages. Ensure code quality and identify potential issues.

```bash
pnpm test         # Run tests across all packages
pnpm lint         # Lint code for style and errors
```

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

### SearchExperience Props (React)

Source: https://github.com/algolia/sitesearch/blob/main/CLAUDE.md

Props available for the SearchExperience component in the React library.

```APIDOC
## SearchExperience Props (React)

### Description
Props to configure the React SiteSearch experience.

### Parameters
#### Required Props
- **applicationId** (string) - Algolia app ID.
- **apiKey** (string) - Algolia API key.
- **indexName** (string) - Index name.
- **assistantId** (string) - Required for AI chat.

#### Optional Props
- **baseAskaiUrl** (string) - Optional AI API endpoint.
- **agentStudio** (boolean) - When true, use Agent Studio endpoints for Ask AI (default: false).
- **placeholder** (string) - Search input placeholder.
- **hitsPerPage** (number) - Results per page.
- **keyboardShortcut** (string) - Keyboard shortcut.
- **buttonText** (string) - Button label.
- **buttonProps** (object) - Additional button props.
```

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

### SearchAskAI Configuration

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search-askai.mdx

Configuration options for the Search Ask AI component.

```APIDOC
## SearchAskAI Configuration

This component allows for AI-powered search and follow-up questions.

### Parameters

#### Required Parameters
- **applicationId** (string) - Algolia Application ID.
- **apiKey** (string) - Algolia API Key.
- **indexName** (string) - Algolia Index Name.
- **assistantId** (string) - AI Assistant ID (required for chat functionality).

#### Optional Parameters
- **agentStudio** (boolean) - When true, route Ask AI requests through Agent Studio endpoints. Defaults to false.
- **attributes** (HitsAttributesMapping) - Map which hit attributes to render. Required.
  - **primaryText** (string) - The first attribute to render (required).
  - **secondaryText** (string) - The second attribute to render (optional).
  - **tertiaryText** (string) - The third attribute to render (optional).
  - **url** (string) - The URL to render (optional).
  - **image** (string) - The image to render (optional).
- **placeholder** (string) - Placeholder text for search input. Defaults to "What are you looking for?".
- **suggestedQuestionsEnabled** (boolean) - Suggested Questions Enabled. Defaults to false.
- **hitsPerPage** (number) - Number of hits per page. Defaults to 8.
- **buttonText** (string) - Custom search button text.
- **buttonProps** (ComponentProps<typeof SearchButton>) - Custom search button props.
  - **onClick** (function) - The function to call when the button is clicked.
  - **children** (any) - The children to render in the button (optional).
- **darkMode** (boolean) - Enable dark mode.
- **insights** (boolean) - Enable Algolia Insights. Defaults to true.
- **searchParameters** (object) - Additional Algolia search parameters. See Algolia Search API Parameters: https://www.algolia.com/doc/api-reference/search-api-parameters
```

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

### Use Highlight to Ask AI Component

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/ask-ai/highlight-to-askai.mdx

Import and use the HighlightToAskAi component in your React application. Provide your Algolia credentials and configure optional props like excluded elements and button labels.

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

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

### Integrate SidepanelAskAI Component

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/ask-ai/sidepanel-askai.mdx

Import and render the SidepanelExperience component with your Algolia application credentials. Ensure all required props are provided for proper functionality.

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

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

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

### Integrate SearchWithAskAi component in React (shadcn/ui)

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search-askai.mdx

Import and use the SearchWithAskAi component in your React application. Ensure you provide your Algolia application ID, API key, index name, and assistant ID, along with attribute mappings.

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

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

### Search Component Configuration

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search.mdx

Configuration object for the Algolia Search component.

```APIDOC
## Search Component Configuration

### Description
Configure the Algolia Search component with your Algolia credentials and display preferences.

### Parameters
#### Required Parameters
- **applicationId** (string) - Your Algolia Application ID.
- **apiKey** (string) - Your Algolia API Key.
- **indexName** (string) - The name of your Algolia Index.
- **attributes** (HitsAttributesMapping) - A map of hit attributes to render. Supports dotted paths.
  - **primaryText** (string) - Required. The first attribute to render (must be searchable/highlightable).
  - **secondaryText** (string) - Optional. The second attribute to render.
  - **tertiaryText** (string) - Optional. The third attribute to render.
  - **url** (string) - Optional. The URL to render.
  - **image** (string) - Optional. The image to render.

#### Optional Parameters
- **placeholder** (string) - Placeholder text for the search input. Defaults to "What are you looking for?".
- **hitsPerPage** (number) - Number of hits to display per page. Defaults to 8.
- **buttonText** (string) - Custom text for the search button.
- **buttonProps** (ComponentProps<typeof SearchButton>) - Custom props for the search button.
  - **onClick** (function) - Function to call when the button is clicked.
  - **children** (any) - Content to render inside the button.
- **darkMode** (boolean) - Enable dark mode for the search interface.
- **insights** (boolean) - Enable Algolia Insights. Defaults to true.
- **searchParameters** (object) - Additional Algolia search parameters. See [Algolia Search API Parameters](https://www.algolia.com/doc/api-reference/search-api-parameters).
```

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

### Integrate Search with shadcn/ui

Source: https://github.com/algolia/sitesearch/blob/main/apps/docs/content/docs/experiences/search.mdx

Import and use the Search component in your React application. Ensure you provide your Algolia application ID, API key, and index name, along with attribute mappings.

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

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

### Customize Site Search Theme with CSS Variables

Source: https://github.com/algolia/sitesearch/blob/main/packages/standalone/README.md

Override global CSS variables to customize the appearance of the search modal for light or dark modes. Apply these styles globally or within a specific wrapper element.

```css
/* Light (default) */
.ss-exp, .modal-backdrop, .sitesearch-button {
  --search-primary-color: #003dff;
  --search-background-color: #f5f5fa;
  --search-text-color: #23263b;
  /* ...more variables... */
}

/* Dark: either pass darkMode: true or add .dark to <html> */
.ss-exp.dark, .modal-backdrop.dark, .sitesearch-button.dark {
  --search-primary-color: #7aa2ff;
  --search-background-color: #202127;
  --search-text-color: #e5e7eb;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.