# Fumadocs (Framework Mode, React Router): Algolia
URL: /ja/docs/react-router/search/algolia
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/search/algolia.ja.mdx
Fumadocs UI で Algolia を使用する方法。
## 概要 [#overview]
セットアップ方法については、[Algolia Searchとの連携](/docs/headless/search/algolia)を参照してください。
一般的には、Algoliaのクライアントサイド
SDKを使って独自の検索を構築することをおすすめしますが、組み込みの検索ダイアログを利用することもできます。
## セットアップ [#setup]
Fumadocs CLI を使うと、セットアップを自動で行えます。検索ダイアログ、`static.json` ルート、およびビルドのたびに検索インデックスを同期するスクリプトが作成されます。
```package-install
npx @fumadocs/cli feature search --provider algolia
```
または、手動で設定することもできます。
検索ダイアログを作成し、`appId`、`apiKey`、`indexName` を任意の値に置き換えてください。
```tsx title="components/search.tsx"
'use client';
import { liteClient } from 'algoliasearch/lite';
import {
SearchDialog,
SearchDialogClose,
SearchDialogContent,
SearchDialogFooter,
SearchDialogHeader,
SearchDialogIcon,
SearchDialogInput,
SearchDialogList,
SearchDialogOverlay,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { useAlgoliaSearch } from 'fumadocs-core/search/client';
import { useI18n } from 'fumadocs-ui/contexts/i18n';
const appId = 'replace me';
const apiKey = 'replace me';
const algolia = liteClient(appId, apiKey);
export default function CustomSearchDialog(props: SharedProps) {
const { locale } = useI18n(); // (optional) for i18n
const search = useAlgoliaSearch({
client: algolia,
indexName: 'document',
locale,
});
return (
Search powered by Algolia
);
}
```
`useAlgoliaSearch()` は、Algolia 公式の JavaScript クライアントである
instant search を使用しません。
### 検索ダイアログを置き換える [#replace-search-dialog]
ルートレイアウトで、独自の検索ダイアログを [``](/docs/ui/layouts/root-provider) に渡します。
```tsx title="app/root.tsx"
import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
import { RootProvider } from 'fumadocs-ui/provider/react-router';
// [!code ++]
import SearchDialog from '@/components/search';
export function Layout({ children }: { children: React.ReactNode }) {
return (
{/* [!code highlight] */}
{children}
);
}
```
### タグフィルター [#tag-filter]
必要に応じて、タグで検索結果を絞り込むための UI を追加できます。検索サーバー側で[タグフィルター](/docs/headless/search/algolia#tag-filter)を設定したうえで、以下を追加してください。
```tsx
'use client';
import {
SearchDialog,
SearchDialogContent,
SearchDialogFooter,
SearchDialogOverlay,
type SharedProps,
TagsList,
TagsListItem,
} from 'fumadocs-ui/components/dialog/search';
import { useState } from 'react';
import { useFetchSearch } from 'fumadocs-core/search/client';
export default function CustomSearchDialog(props: SharedProps) {
// [!code ++]
const [tag, setTag] = useState();
const search = useFetchSearch({
tag, // [!code ++]
});
return (
...
{/* [!code ++:3] */}
My Value
);
}
```