Aller au contenu principal
Version : Stable (v4.x)

Examples and extensions

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

These examples are interactive. Click a button to open the modal and try a query.

Recherche basique par mot-clé​

Use the default experience with your index credentials. This works great for typical docs, blogs, and any site with a DocSearch-compliant index.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  insights={true}
  translations={{ button: { buttonText: 'keyword search (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Ask AI : réponses assistées par IA​

Add Algolia Ask AI to get synthesized answers grounded in your indexed content. You can scope the LLM context using searchParameters like facetFilters, filters, attributesToRetrieve,restrictSearchableAttributes, and distinct.

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  askAi={{
    assistantId: 'askAIDemo',
    searchParameters: {
      facetFilters: ['language:en'],
    },
  }}
  insights={true}
  translations={{ button: { buttonText: 'search with askai (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Panneau latéral : chat IA persistant​

Le panneau latéral offre une interface de chat persistante ancrée sur le côté de la page, idéale pour les sites de documentation où les utilisateurs souhaitent poser des questions complémentaires sans perdre leur place. Recherchez le bouton en bas à droite de l'écran pour tester la démonstration.

<DocSearchSidepanel
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  assistantId="askAIDemo"
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

API composable : DocSearchButton + DocSearchModal​

Utilisez l'API composable pour afficher le bouton et la modale comme composants distincts. Cela vous donne un contrôle explicite sur l'emplacement de rendu de chaque élément et sur le moment où le code de la modale est chargé.

import { DocSearch } from '@docsearch/core';
import { DocSearchButton, DocSearchModal } from '@docsearch/modal';

import '@docsearch/css/style.css';

<DocSearch>
  <DocSearchButton translations={{ buttonText: 'Composable search (demo)' }} />
  <DocSearchModal
    appId="PMZUYBQDAK"
    indexName="docsearch"
    apiKey="a00716d83c64f6c61905c078b7d5ab66"
    askAi={{
      assistantId: 'ccdec697-e3fe-465b-a1c3-657e7bf18aef',
      agentStudio: true,
    }}
  />
</DocSearch>;

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Rendu personnalisé des résultats (hitComponent)​

Replace the default hit markup to match your brand and layout. Below is a minimal example of a custom component.

function CustomHit({ hit }) {
  // render a compact, branded hit card
  return (
    <a
      href={hit.url}
      style={{ display: 'block', padding: '12px 16px', textDecoration: 'none' }}
    >
      <div style={{ display: 'flex', gap: 12 }}>
        <div
          style={{
            width: 40,
            height: 40,
            backgroundColor: '#e3f2fd',
            borderRadius: 6,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontWeight: 600,
            color: '#1976d2',
          }}
        >
          {hit.type?.toUpperCase?.() || 'DOC'}
        </div>
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              fontWeight: 600,
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {hit.hierarchy?.lvl1 || 'untitled'}
          </div>
          {hit.hierarchy?.lvl2 && (
            <div
              style={{
                color: '#666',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {hit.hierarchy.lvl2}
            </div>
          )}
          {hit.content && (
            <div style={{ color: '#888', marginTop: 4 }}>{hit.content}</div>
          )}
        </div>
      </div>
    </a>
  );
}

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={CustomHit}
  insights={true}
  translations={{ button: { buttonText: 'custom hits (demo)' } }}
/>;

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Ouvrir les liens dans de nouveaux onglets​

Par défaut, DocSearch ouvre les liens des résultats dans la fenêtre actuelle. Pour ouvrir les résultats dans de nouveaux onglets, vous devez utiliser à la fois un hitComponent personnalisé et la prop navigator afin de gérer de manière cohérente la navigation par clic et au clavier.

// Custom hit component with target="_blank"
function HitWithNewTab({ hit, children }) {
  return (
    <a href={hit.url} target="_blank" rel="noopener noreferrer">
      {children}
    </a>
  );
}

// Navigator configuration to handle keyboard navigation
const newTabNavigator = {
  navigate: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewTab: ({ itemUrl }) => window.open(itemUrl, '_blank'),
  navigateNewWindow: ({ itemUrl }) => window.open(itemUrl, '_blank'),
};

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="docsearch"
  hitComponent={HitWithNewTab}
  navigator={newTabNavigator}
  insights={true}
  translations={{ button: { buttonText: 'open in new tabs (demo)' } }}
/>;

avertissement

Remarque : Utiliser uniquement hitComponent avec target="_blank" fonctionne pour les clics souris, mais la navigation clavier (flèches + Entrée) nécessite la prop navigator pour ouvrir systématiquement les liens dans de nouveaux onglets.

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Adaptez la structure de vos données avec transformItems​

DocSearch is not limited to DocSearch-like records. Use transformItems to adapt any record shape into the internal structure DocSearch expects. This lets you build search for apps, help centers, changelogs, or any custom content.

The snippet below maps a non-standard record to the internal format. Try it live:

<DocSearch
  appId="PMZUYBQDAK"
  apiKey="24b09689d5b4223813d9b8e48563c8f6"
  indexName="crawler_doc"
  askAi={{ assistantId: 'askAIDemo' }}
  searchParameters={{
    attributesToRetrieve: ['*'],
    attributesToSnippet: ['*'],
    hitsPerPage: 20,
  }}
  transformItems={(items) =>
    items.map((item) => ({
      objectID: item.objectID,
      content: item.content ?? '',
      url: item.domain + item.path,
      hierarchy: {
        lvl0: (item.breadcrumb || []).join(' > ') ?? '',
        lvl1: item.h1 ?? '',
        lvl2: item.h2 ?? '',
        lvl3: null,
        lvl4: null,
        lvl5: null,
        lvl6: null,
      },
      url_without_anchor: item.domain + item.path,
      type: 'content',
      anchor: null,
      _highlightResult: item._highlightResult,
      _snippetResult: item._snippetResult,
    }))
  }
  insights={true}
  translations={{ button: { buttonText: 'transform items (demo)' } }}
/>

id: examples title: Exemples et extensions description: démonstrations en direct montrant comment utiliser et étendre DocSearch au-delà des cas d'usage strictement documentaires.​

Conseils​

  • Instrumentation : activez insights pour envoyer des analyses d'utilisation et optimiser la pertinence.

  • Ask AI scoping: use facetFilters, filters, attributesToRetrieve, restrictSearchableAttributes, and distinct to control AI context and improve answer quality.

  • Customization: use hitComponent, transformItems, and translations to make DocSearch feel native to any product surface.