cl-search-frontend

This package provides a search component that integrates with Algolia indexes.

To install:

npm install @chainlink/cl-search-frontend

Invoke the component (and the styles):

import { SearchButton } from "chainlink-algolia-search";
import aCardImgBackground from "./assets/card-background.png";
// Don't forget to import the styles as well!
import "@chainlink/cl-search-frontend/dist/index.css";

...

function App() {
  return (
    <>
      <SearchButton
        algoliaAppId="<your app ID here>"
        algoliaPublicApiKey="<the public API key>"
        categoryOrder={["Guide", "Video"]} // optional: priority list for showing the category filters
        popularLinks={[ // optional: a list of popular links displayed on the default state modal
          { label: 'Example', url: 'https://example.com' },
        ]}
        popularCards={[ // optional: a list of popular cards displayed on the default state modal (up to 2)
          { imgSrc: aCardImgBackground, label: 'Example', url: 'https://example.com' }
        ]}
        baseApiUrl="https://cl-ai-search-api-preview.vercel.app/api" // optional: override the default API URL (default: https://cl-ai-search-api.vercel.app/api)
        SearchButton="compact" //'compact' | 'extended' | 'minimal'
      />
    </>
  );
}

export default App;