Orama Cloud

To begin, create an account on Orama Cloud.

REST API

REST API integration requires your docs to upload the indexes.

1. Create a new REST API index from Dashboard.

2. Use the following schema:

   {
     "id": "string",
     "title": "string",
     "url": "string",
     "tag": "string",
     "page_id": "string",
     "section": "string",
     "section_id": "string",
     "content": "string"
   }

3. Then, using the private API key and index ID from dashboard, create a script to sync search indexes.

   {
     "file": "../../examples/next-mdx/scripts/sync-orama-cloud.mjs",
     "codeblock": {
       "lang": "js",
       "meta": "title=\"sync-index.mjs\""
     }
   }

4. Create a route handler in your Next.js app to export search indexes.

   {
     "file": "../../examples/next-mdx/app/static.json/orama-cloud.ts",
     "codeblock": {
       "meta": "title=\"app/static.json/route.ts\""
     }
   }

5. Run the script after next build.

Search Client

To search documents on the client side, use Fumadocs UI Search Dialog, or make your own implementation.

In addition, the headless search client of Fumadocs can handle state management for React.

import { useDocsSearch } from "fumadocs-core/search/client";
import { OramaClient } from "@oramacloud/client";

const client = new OramaClient();

const { search, setSearch, query } = useDocsSearch({
  type: "orama-cloud",
  client,
  params: {
    // search params
  },
});

Web Crawler

1. Create a Crawler index from dashboard, and configure it correctly with the "Documentation" preset.
2. Copy the public API key and index ID from dashboard

Search Client

Same as REST API integration, but make sure to set index to crawler.

import { useDocsSearch } from "fumadocs-core/search/client";
import { OramaClient } from "@oramacloud/client";

const client = new OramaClient({
  endpoint: "<endpoint_url>",
  api_key: "<api_key>",
});

const { search, setSearch, query } = useDocsSearch({
  type: "orama-cloud",
  index: "crawler",
  client,
  params: {
    // optional search params
  },
});

It's same for Fumadocs UI:

"use client";

import { OramaClient } from "@oramacloud/client";
import type { SharedProps } from "fumadocs-ui/components/dialog/search";
import SearchDialog from "fumadocs-ui/components/dialog/search-orama";

const client = new OramaClient({
  endpoint: "<endpoint_url>",
  api_key: "<api_key>",
});

export default function CustomSearchDialog(props: SharedProps) {
  return <SearchDialog {...props} index="crawler" client={client} />;
}