# Fumadocs (Framework Mode, React Router): Orama Cloud
URL: /ja/docs/react-router/search/orama-cloud
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/search/orama-cloud.ja.mdx
Fumadocs UI で Orama Cloud を使用する方法。
## セットアップ [#setup]
Fumadocs CLI を使うと、セットアップを自動で行えます。検索ダイアログ、`static.json` ルート、およびビルドのたびに検索インデックスを同期するスクリプトが作成されます。
```package-install
npx @fumadocs/cli feature search --provider orama-cloud
```
手動で設定する場合は、次の手順に従います。
1. [Orama Cloud](/docs/headless/search/orama-cloud) を統合します。
2. 検索ダイアログを作成し、`endpoint` と `api_key` を使用する値に置き換えます。
```tsx title="components/search.tsx"
'use client';
import {
SearchDialog,
SearchDialogClose,
SearchDialogContent,
SearchDialogFooter,
SearchDialogHeader,
SearchDialogIcon,
SearchDialogInput,
SearchDialogList,
SearchDialogOverlay,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { useOramaCloudSearch } from 'fumadocs-core/search/client';
import { OramaCloud } from '@orama/core';
import { useI18n } from 'fumadocs-ui/contexts/i18n';
const orama = new OramaCloud({
projectId: '',
apiKey: '',
});
export default function CustomSearchDialog(props: SharedProps) {
const { locale } = useI18n(); // (optional) for i18n
const search = useOramaCloudSearch({
client: orama,
locale,
});
return (
Search powered by Orama
);
}
```
### 検索ダイアログを置き換える [#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}
);
}
```