Trieve Sitesearch
Free Trieve Search and RAG for your Website and Documentation
Why our component?
Free!
10k AI chats + unlimited search when including our logo
React and Web Components
Use it with any framework. Anywhere
Fully typed
No guessing props. Let ctrl + space do the work for you.
AI Chat
Let your users ask questions and get answers.
Light and Dark themes
Fits to your style
Analytics
Track your users searches, clicks, and AI chat ratings
Easily Styleable
Use our classes as selectors to customize the look and feel
AI Suggested Queries
Let visitors unfamilar with your site learn about what they can search for
Usage
How to get started
Props
Available customization options
| name | type | description | defaut |
|---|---|---|---|
| datasetId | string | The id of the dataset used to search | <must be specified> |
| apiKey | string | The api key used to search | <must be specified> |
| chat | boolean | Adds AI search to the compomnent. Only works in the Modal version | true |
| analytics | boolean | If you want to track the searches and clicks | true |
| placeholder | string | Placeholder for the search input | Search... |
| onResultClick | function | Any function you want to run when a user clicks on a search result | () => {} |
| theme | light | dark | Color theme | light |
| searchOptions | SearchChunksReqPayload | Any options you want to pass to the search function | { search_type: "hybrid" } |
| openKeyCombination | { key?: string; label?: string; ctrl?: boolean }[] | Key combination to open the search | [{ ctrl: true }, { key: "k", label: "K" }] |
| ButtonEl | JSX.ElementType | The element to use as the button, defaults to a rectangular input if null | null |
| responsive | boolean | If you want the search bar to be responsive and shrink on mobile | false |
| suggestedQueries | boolean | If you want to show suggested queries and allow the user to refresh them | true |
| defaultSearchQueries | string[] | The default search queries to show in search mode | [] |
| defaultAiQuestions | string[] | The default AI questions to show in chat mode | [] |
| brandLogoImgSrcUrl | string | The url of the image to use as the brand logo | null |
| brandName | string | The name of the brand to show in the search bar | null |
| problemLink | string | The link to the page where the user can report a problem when no results are found | mailto:help@trieve.ai?subject= |
| accentColor | string | The color to use as the accent color | #CB53EB |