Orama Cloud
Integrate with Orama Cloud
To begin, create an account on Orama Cloud.
REST API
REST API integration requires your docs to upload the indexes.
-
Create a new project with REST API data source on Orama Cloud dashboard.
Store your credentials in environment variables, for example:
NEXT_PUBLIC_ORAMA_DATASOURCE_ID="Rest API data source ID" NEXT_PUBLIC_ORAMA_PROJECT_ID="project ID" NEXT_PUBLIC_ORAMA_API_KEY="public API key" ORAMA_PRIVATE_API_KEY="private API key" -
Export the search indexes by pre-rendering a static route.
lib/export-search-indexes.ts import { source } from '@/lib/source'; import type { OramaDocument } from 'fumadocs-core/search/orama-cloud'; export async function exportSearchIndexes() { return source.getPages().map((page) => { return { id: page.url, structured: page.data.structuredData, url: page.url, title: page.data.title, description: page.data.description, } satisfies OramaDocument; }); }app/static.json/route.ts import { exportSearchIndexes } from '@/lib/export-search-indexes'; export const revalidate = false; export async function GET() { return Response.json(await exportSearchIndexes()); } -
Create a script to sync search indexes.
scripts/sync-content.ts import { sync, type OramaDocument } from 'fumadocs-core/search/orama-cloud'; import * as fs from 'node:fs/promises'; import { OramaCloud } from '@orama/core'; // the path of pre-rendered `static.json`, choose one according to your React framework const filePath = { next: '.next/server/app/static.json.body', 'tanstack-start': '.output/public/static.json', 'react-router': 'build/client/static.json', waku: 'dist/public/static.json', }['next']; async function main() { const orama = new OramaCloud({ projectId: process.env.NEXT_PUBLIC_ORAMA_PROJECT_ID, apiKey: process.env.ORAMA_PRIVATE_API_KEY, }); const content = await fs.readFile(filePath); const records = JSON.parse(content.toString()) as OramaDocument[]; await sync(orama, { index: process.env.NEXT_PUBLIC_ORAMA_DATASOURCE_ID, documents: records, }); console.log(`search updated: ${records.length} records`); } void main(); -
Run the script after production build, make sure the environment variables are available (e.g. Bun reads from
.envfiles):package.json { "scripts": { "build": "... && bun scripts/sync-content.ts" } }
Search Client
To search documents on the client side, consider:
-
Using Fumadocs UI search dialog.
-
Custom search UI using the built-in hook of Fumadocs:
import { useDocsSearch } from 'fumadocs-core/search/client'; import { OramaCloud } from '@orama/core'; const client = new OramaCloud({ projectId: process.env.NEXT_PUBLIC_ORAMA_PROJECT_ID, apiKey: process.env.NEXT_PUBLIC_ORAMA_API_KEY, }); const { search, setSearch, query } = useDocsSearch({ type: 'orama-cloud', client, params: { // optional search params }, }); -
Use their search client directly.
Web Crawler
- Create a Crawler data source from dashboard, and configure it correctly with the "Documentation" preset.
- Copy the credentials 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 { OramaCloud } from '@orama/core';
const client = new OramaCloud({
projectId: '<project id>',
apiKey: '<read only api key>',
});
const { search, setSearch, query } = useDocsSearch({
type: 'orama-cloud',
index: 'crawler',
client,
params: {
// optional search params
},
});It's same for Fumadocs UI.
How is this guide?
Last updated on
