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 | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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" }] | | tags | { tag: string; label?: string; selected? boolean; iconClassName?: string }[] | [{tag: "docs", label: "dev docs", iconClassName: "fa-solid fa-info"}] | | relevanceToolCallOptions | { userMessageTextPrefix?: string; includeImages?: boolean; toolDescription: string; highDescription?: string; mediumDescription?: string; lowDescription?: string; } | { userMessageTextPrefix: "Be extra picky and detailed...", includeImages: false, toolDescription: "Mark the relevance...", highDescription: "Highly relevant and very good fit for the given query taking all details of both the query and the product into account", mediumDescription: "Somewhat relevant and a decent or okay fit for the given query taking all details of both the query and the product into account", lowDescription: "Not relevant and not a good fit for the given query taking all details of both the query and the product into account" } | | inline | boolean | true | | inlineHeader | string | "" | | initialAiMessage | string | "" | | ButtonEl | JSX.ElementType | null | | suggestedQueries | boolean | true | | defaultSearchQueries | string[] | [] | | defaultAiQuestions | string[] | [] | | brandLogoImgSrcUrl | string | null | | brandName | string | null | | brandColor | string | #CB53EB | | brandFontFamily | string | Maven Pro | | problemLink | string (example: "mailto:[email protected]?subject=") | null | | responsive | boolean | false | | floatingButtonPosition | "top-left", "top-right", "bottom-left", or "bottom-right" | "bottom-right" | | showFloatingButton | boolean | false | | floatingSearchIconPosition | "left" or "right" | "right" | | showFloatingSearchIcon | boolean | false | | showFloatingInput | boolean | false | | buttonTriggers | [{ selector: <"query-selector">, mode: "chat", removeListeners: true}] | | | hideOpenButton | boolean | false | | showResultHighlights | boolean | true | | initialAiMessage | string (example: "Hi! How can I help") | null | | ignoreEventListeners | boolean | false | | hideOverlay | boolean | false | | overrideFetch | boolean | false | | imageStarterText | string | "Drag and drop an image here or click to upload" |

Search Results

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 "trieve-search-component/styles";
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
})

License

MIT

Development Guide

Deploying to view search playground UI

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

Run the example, search-component, css, javascript and watcher for demos page

$clients/search-component yarn all

or to run each individually

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

Viewing it on demos page

cd clients/search-component/
yarn all

Set environment variable in server/.env

SEARCH_COMPONENT_URL="http://localhost:8000"