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

Your provider component already passes src/components/search.tsx to <RootProvider />, so replacing that file is enough:

import { navigate } from 'astro:transitions/client';
import type { ReactNode } from 'react';
import { RootProvider } from 'fumadocs-ui/provider/astro';
import SearchDialog from '@/components/search';

export interface ProviderProps {
  pathname: string;
  params: Record<string, string | undefined>;
  children?: ReactNode;
}

export function Provider({ pathname, params, children }: ProviderProps) {
  return (
    <RootProvider
      pathname={pathname}
      params={params}
      navigate={navigate}
      search={{ SearchDialog }}
    >
      {children}
    </RootProvider>
  );
}

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