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.

   import { sync } from 'fumadocs-core/search/orama-cloud';
   import * as fs from 'node:fs/promises';
   import { CloudManager } from '@oramacloud/client';
    
   export async function updateSearchIndexes() {
     const apiKey = process.env.ORAMA_PRIVATE_API_KEY; // private API key
    
     if (!apiKey) {
       console.log('no api key for Orama found, skipping');
       return;
     }
    
     const content = await fs.readFile('.next/server/app/static.json.body');
     const records = JSON.parse(content.toString());
    
     const manager = new CloudManager({ api_key: apiKey });
    
     await sync(manager, {
       index: '<index>',
       documents: records,
     });
    
     console.log(`search updated: ${records.length} records`);
   }
    
   void updateSearchIndexes();

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

   import { NextResponse } from 'next/server';
   import { type OramaDocument } from 'fumadocs-core/search/orama-cloud';
   import { source } from '@/lib/source';
    
   export const revalidate = false;
    
   export function GET() {
     const results: OramaDocument[] = [];
    
     for (const page of source.getPages()) {
       results.push({
         id: page.url,
         structured: page.data.structuredData,
         url: page.url,
         title: page.data.title,
         description: page.data.description,
       });
     }
    
     return NextResponse.json(results);
   }

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} />;
}