コンテンツへスキップ
Fumadocs

Trieve Search

Trieve Search を Fumadocs に統合する

これはコミュニティによってメンテナンスされているインテグレーションです。

はじめに

Trieve 連携は、サイト内検索用の Trieve Search を自動で設定します。

デフォルトでは、ドキュメントの段落ごとにチャンクを作成します。これは Trieve が公式に推奨している方法です。

セットアップ

依存関係のインストール

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

Trieve に登録する

Trieve に登録し、データセットを作成します。次に、API キーを 2 つ取得します。1 つは読み取り専用、もう 1 つはチャンクの作成と削除が可能な管理者権限を持つキーです。 同期に使用するため、データセット ID と管理者キーを .env.local に保存してください。

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

注意

一方の API キーには公開検索用の読み取り権限のみを付与し、もう一方にはチャンクの作成・削除を行うための 管理者権限を付与してください。

データセットの同期

Trieve は Algolia 連携と同じレコードを使用します。事前レンダリングされる static.json ルートでレコードをエクスポートし、ビルドのたびにスクリプトで Trieve に同期してください。

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"
  }
}

build スクリプトはビルドのたびに同期を行うため、デプロイ先のプラットフォームにも同じ環境変数を設定してください。

検索 UI

提供されている SearchDialog コンポーネントを使用できます。

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. apiKey と datasetId を使用する値に置き換えてください。

  2. デフォルトの検索ダイアログを、新しく作成した検索ダイアログに置き換えてください。

検索クライアント

useTrieveSearch フックを追加します。

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

オプション

タグフィルター

タグフィルターを設定するには、インデックスに tag の値を追加します。

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

検索 UI

タグフィルターを有効にします。

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

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

検索クライアント

tag_set フィールドは、フィルタリングに使用する属性です。タグでインデックスを絞り込むには、Trieve の検索クライアントでフィルターを指定してください。

{
  "must": [
    {
      "field": "tag_set",
      "match": ["value"]
    }
  ]
}

または、useTrieveSearch フックを使用する場合は次のとおりです。

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?

最終更新日

このページの内容

はじめにセットアップ依存関係のインストールTrieve に登録するデータセットの同期検索 UI検索クライアントオプションタグフィルター検索 UI検索クライアント
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep