fast-trieve-search-component

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

Screenshots

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
datasetId	string	''
apiKey	string	''
baseUrl	string	"https://api.trieve.ai"
type	"docs"	"ecommerce"
useGroupSearch	boolean	false
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
brand Color	string	#CB53EB
problemLink	string (example: "mailto:[e-mail]?subject=")	null
responsive	boolean	false

Search Results

Screenshots

Usage in React:

<TrieveSearch apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" />

Usage in Web Components:

<trieve-search apiKey="<your trieve apiKey>" datasetId="<your trieve datasetId" />

Usage with Vanilla JS

    import { renderToDiv } from 'trieve-search-component/vanilla';
    const root = document.getElementById('root');
    renderToDiv(root, {
      apiKey: "<Your Trieve Api Key>"
      datasetId: "<Your Trieve Dataset Id>"
       // ... other props
    })

Props

Name	Type	Default
datasetId	string	''
apiKey	string	''
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