This is a community maintained integration.
The Trieve Integration automatically configures Trieve Search for site search.
By default, it creates a chunk for each paragraph in your document, it is
officially recommended by Trieve.
npm pnpm yarn bun
npm install trieve-ts-sdk trieve-fumadocs-adapter
Sign up and create a dataset. Then obtain 2 API keys where one has only read access and the other has admin access to create and delete chunks.
Store these credentials in environment variables.
Notice
One API Key should have only read access for the public facing search and the
other should have admin access to create and delete chunks.
You can export the search indexes from Next.js using a route handler:
import { NextResponse } from 'next/server' ;
import { source } from '@/lib/source' ;
import { type TrieveDocument } from 'trieve-fumadocs-adapter/search/sync' ;
export const revalidate = false ;
export function GET () {
const results : TrieveDocument[] = [] ;
for ( const page of source . getPages ()) {
results . push ( {
_id : page . url ,
structured : page . data . structuredData ,
url : page . url ,
title : page . data . title ,
description : page . data . description ,
} ) ;
}
return NextResponse . json (results) ;
}
Create a script, the sync
function will sync search indexes.
import * as fs from 'node:fs' ;
import { sync } from 'trieve-fumadocs-adapter/search/sync' ;
import { TrieveSDK } from 'trieve-ts-sdk' ;
const content = fs . readFileSync ( '.next/server/app/static.json.body' ) ;
// now you can pass it to `sync`
/** @ type { import('trieve-fumadocs-adapter/search/sync').TrieveDocument[] } **/
const records = JSON . parse (content . toString ()) ;
const client = new TrieveSDK ( {
apiKey : 'adminApiKey' ,
datasetId : 'datasetId' ,
} ) ;
sync (client , records) ;
Make sure to run the script after build:
{
" scripts " : {
" build " : "next build && node ./update-index.mjs"
}
}
You may manually sync with node ./update-index.mjs
, or
integrate it with your CI/CD pipeline.
Typescript Usage
You can use Bun or other JavaScript runtimes that supports TypeScript and ESM.
On Fumadocs UI, you can use the SearchDialog
component:
'use client' ;
import type { SharedProps } from 'fumadocs-ui/components/dialog/search' ;
import SearchDialog from 'trieve-fumadocs-adapter/components/dialog/search' ;
import { TrieveSDK } from 'trieve-ts-sdk' ;
const trieveClient = new TrieveSDK ( {
apiKey : 'readOnlyApiKey' ,
datasetId : 'datasetId' ,
} ) ;
export default function CustomSearchDialog ( props : SharedProps ) {
return < SearchDialog trieveClient = { trieveClient } { ... props } /> ;
}
Replace apiKey
and datasetId
with your desired values.
Replace the default search dialog with your new component.
Add the useTrieveSearch
hook:
import { TrieveSDK } from 'trieve-ts-sdk' ;
import { useTrieveSearch } from 'trieve-fumadocs-adapter/search/trieve' ;
const client = new TrieveSDK ( {
apiKey : 'readOnlyApiKey' ,
datasetId : 'datasetId' ,
} ) ;
const { search , setSearch , query } = useTrieveSearch (client) ;
To configure tag filtering, add a tag
value to indexes.
import { sync } from 'trieve-fumadocs-adapter/search/sync' ;
import { TrieveSDK } from 'trieve-ts-sdk' ;
const client = new TrieveSDK ( {
apiKey : 'adminApiKey' ,
datasetId : 'datasetId' ,
} ) ;
const documents = records . map ( ( index ) => ( {
... index ,
tag : 'value' ,
} )) ;
sync (client , documents) ;
Enable Tag Filter.
import SearchDialog from 'trieve-fumadocs-adapter/components/dialog/search' ;
< SearchDialog
defaultTag = "value"
tags = { [
{
name : 'Tag Name' ,
value : 'value' ,
},
] }
/> ;
The tag_set
field is an attribute for filtering. To filter indexes by tag, use the filter on Trieve search clients.
{
" must " : [
{
" field " : "tag_set" ,
" match " : [ "value" ]
}
]
}
Or with useTrieveSearch
hook:
import { TrieveSDK } from 'trieve-ts-sdk' ;
import { useTrieveSearch } from 'trieve-fumadocs-adapter/search/trieve' ;
const client = new TrieveSDK ( {
apiKey : 'readOnlyApiKey' ,
datasetId : 'datasetId' ,
} ) ;
const { search , setSearch , query } = useTrieveSearch (
client ,
undefined ,
'<your tag value>' ,
) ;