Fumadocs

Trieve Search

Integrate Trieve Search with Fumadocs

This is a community maintained integration.

Introduction

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.

Setup

Install Dependencies

npm install trieve-ts-sdk trieve-fumadocs-adapter

Sign up on Trieve

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 the dataset ID and admin key in .env.local for syncing:

TRIEVE_DATASET_ID="dataset ID"
TRIEVE_ADMIN_API_KEY="admin API key"

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.

Sync Dataset

Trieve takes the records of the Algolia integration. Export them with a pre-rendered static.json route, and sync them to Trieve with a script after each build:

app/static.json/route.ts
import { source } from '@/lib/source';
import { toDocuments } from 'fumadocs-core/search/algolia';

export const revalidate = false;

export async function GET() {
  return Response.json(await toDocuments(source));
}
scripts/sync-content.ts
import * as fs from 'node:fs/promises';
import { sync, type TrieveDocument as DocumentRecord } from 'trieve-fumadocs-adapter/search/sync';
import { TrieveSDK } from 'trieve-ts-sdk';

// Next.js writes it under `route-cache` when built with an adapter, like on Vercel
const [file] = await Array.fromAsync(fs.glob('.next/server/{app,route-cache/*/*/$}/static.json.body'));
const records = JSON.parse(await fs.readFile(file, 'utf-8')) as DocumentRecord[];

const client = new TrieveSDK({
  apiKey: process.env.TRIEVE_ADMIN_API_KEY!,
  datasetId: process.env.TRIEVE_DATASET_ID!,
});

await sync(client, records);

console.log(`search updated: ${records.length} records`);
package.json
{
  "scripts": {
    "build": "next build && node --env-file-if-exists=.env.local scripts/sync-content.ts"
  }
}

The build script syncs on every build, set the same variables on your deployment platform.

Search UI

You can use their SearchDialog component:

components/search.tsx
'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} />;
}

  1. Replace apiKey and datasetId with your desired values.

  2. Replace the default search dialog with your new one.

Search Client

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);

Options

Tag Filter

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);

Search UI

Enable Tag Filter.

components/search.tsx
import SearchDialog from 'trieve-fumadocs-adapter/components/dialog/search';

<SearchDialog
  defaultTag="value"
  tags={[
    {
      name: 'Tag Name',
      value: 'value',
    },
  ]}
/>;

Search Client

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>');

How is this guide?

Last updated on

On this page

IntroductionSetupInstall DependenciesSign up on TrieveSync DatasetSearch UISearch ClientOptionsTag FilterSearch UISearch Client
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep