Trieve Search Component

The easiest way to get up and running in your app using trieve search.

How to use

Install using your favorite package manager:

yarn add trieve-search-component
# or
npm install trieve-search-component
# or
pnpm install trieve-search-component

After installing the first step is to instantiate a new TrieveSDK like so:

import { TrieveSDK } from "trieve-ts-sdk";

export const trieve = new TrieveSDK({
  apiKey: "<your-api-key>",
  datasetId: "<dataset-to-use>",
});

And then you can use any of the two components in your React application or as web component:

Search Modal

Usage in React:

<TrieveModalSearch trieve={trieve} />

Usage in Web Components:

initModalSearch({
  trieve: new TrieveSDK({
    // your options
  })
})


<trieve-modal-search />

If you are using it in JSX environment you will need to add the trieve-modal-search to the JSX attributes, for solid that would be:

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "trieve-modal-search": {};
      "trieve-search": {};
    }
  }
}

Props

| Name | Type | Default | | -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------ | | trieve | TrieveSDK | null | | chat | boolean | true | | analytics | boolean | true | | placeholder | string | "Search..." | | onResultClick | () => void | () => {} | | theme | "light" or "dark" | "light" | | searchOptions | AutocompleteReqPayload | { search_type: "fulltext" } | | openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | [{ ctrl: true }, { key: "k", label: "K" }] | | ButtonEl | JSX.ElementType | null | | suggestedQueries | boolean | true | | defaultSearchQueries | string[] | [] | | defaultAiQuestions | string[] | [] | | brandLogoImgSrcUrl | string | null | | brandName | string | null | | accentColor | string | #CB53EB |

Search Results

Usage in React:

<TrieveSearch trieve={trieve} />

Usage in Web Components:

<trieve-search trieve="<your trieve instance>" />

Props

| Name | Type | Default | | ------------- | ---------------------------------------------------------------------------------------------- | --------------------------- | | trieve | TrieveSDK | null | | placeholder | string | "Search..." | | onResultClick | () => void | () => {} | | theme | "light" or "dark" | "light" | | searchOptions | SearchChunksReqPayload | { search_type: "hybrid" } |

License

MIT

Development Guide

The example/ folder shows the example application for what rendering this would look like

Start the listener to update the search-component's css and javascript

$clients/search-component yarn
$clients/search-component yarn dev

Run the example application

$clients/search-component cd example/
$clients/search-component yarn
$clients/search-component yarn dev