Mixedbread

SetupCopy Anchor Link

Mixedbread search runs on your server at request time, it isn't available for static sites.

Fumadocs CLI can set it up for you, it creates the search dialog, the search route, the static.json route and a script to sync your store after each build:

npx @fumadocs/cli feature search --provider mixedbread

Or manually:

1. Integrate Mixedbread Search.

2. Create a search dialog component.

   Copy Text

   'use client';
   
   import {
     SearchDialog,
     SearchDialogClose,
     SearchDialogContent,
     SearchDialogFooter,
     SearchDialogHeader,
     SearchDialogIcon,
     SearchDialogInput,
     SearchDialogList,
     SearchDialogOverlay,
     type SharedProps,
   } from 'fumadocs-ui/components/dialog/search';
   import { useFetchSearch } from 'fumadocs-core/search/client';
   import { useI18n } from 'fumadocs-ui/contexts/i18n';
   
   export default function CustomSearchDialog(props: SharedProps) {
     const { locale } = useI18n(); // (optional) for i18n
     const search = useFetchSearch({
       api: '/api/search',
       locale,
       // every search is a request to Mixedbread
       delayMs: 300,
     });
   
     return (
       <SearchDialog {...search} {...props}>
         <SearchDialogOverlay />
         <SearchDialogContent>
           <SearchDialogHeader>
             <SearchDialogIcon />
             <SearchDialogInput />
             <SearchDialogClose />
           </SearchDialogHeader>
           <SearchDialogList />
           <SearchDialogFooter>
             <a
               href="https://mixedbread.com"
               rel="noreferrer noopener"
               className="ms-auto text-xs text-fd-muted-foreground"
             >
               Search powered by Mixedbread
             </a>
           </SearchDialogFooter>
         </SearchDialogContent>
       </SearchDialog>
     );
   }
   

Replace Search DialogCopy Anchor Link

Pass your search dialog to <RootProvider /> in the root route:

import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
import SearchDialog from '@/components/search';

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider search={{ SearchDialog }}>
          <Outlet />
        </RootProvider>
        <Scripts />
      </body>
    </html>
  );
}

Tag FilterCopy Anchor Link

Optionally, you can add UI for filtering results by tags. Configure Tag Filter on search server and add the following:

'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) {
  const [tag, setTag] = useState<string | undefined>();
  const search = useFetchSearch({
    tag, 
  });

  return (
    <SearchDialog {...search} {...props}>
      <SearchDialogOverlay />
      <SearchDialogContent>
        ...
        <SearchDialogFooter className="flex flex-row">
          <TagsList tag={tag} onTagChange={setTag}>
            <TagsListItem value="my-value">My Value</TagsListItem>
          </TagsList>
        </SearchDialogFooter>
      </SearchDialogContent>
    </SearchDialog>
  );
}