Comenzar con Sidepanel

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

advertencia

Ask AI is being migrated from a standalone DocSearch feature into Algolia's Agent Studio. DocSearch v5 will fully support Agent Studio and transition to using it. A more detailed migration guide will be published before the DocSearch v5 release.

información

Sidepanel está disponible desde la versión >= 4.4

Introducción

DocSearch Sidepanel es una nueva experiencia independiente de DocSearch Modal. Sidepanel está diseñado exclusivamente para uso con Ask AI y puede implementarse completamente de forma independiente o en modo Híbrido con Modal.

Instalación

Para comenzar con Sidepanel, primero necesitarás instalar los paquetes requeridos:

npm

npm install @docsearch/react @docsearch/css

# Or if using JS based package

npm install @docsearch/sidepanel-js @docsearch/css

yarn

yarn add @docsearch/react @docsearch/css

# Or if using JS based package

yarn add @docsearch/sidepanel-js @docsearch/css

pnpm

pnpm add @docsearch/react @docsearch/css

# Or if using JS based package

pnpm add @docsearch/sidepanel-js @docsearch/css

bun

bun add @docsearch/react @docsearch/css

# Or if using JS based package

bun add @docsearch/sidepanel-js @docsearch/css

O utilizando tu gestor de paquetes preferido

Sin gestor de paquetes

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css/dist/sidepanel.css" />

<script src="https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js"></script>

Implementación

La implementación más simple de Sidepanel sería la siguiente:

React

import { DocSearchSidepanel } from '@docsearch/react/sidepanel';

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

function App() {
  return (
    <DocSearchSidepanel
      appId='YOUR_APP_ID'
      apiKey='YOUR_SEARCH_API_KEY'
      assistantId='YOUR_ASSISTANT_ID'
      indexName='YOUR_INDEX_NAME'
    />
  );
}

JavaScript

You will need a container DOM node to render the Sidepanel into:

<div id="docsearch-sidepanel"></div>

import sidepanel from '@docsearch/sidepanel-js';

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

sidepanel({
  container: '#docsearch-sidepanel',
  indexName: 'YOUR_INDEX_NAME',
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_SEARCH_API_KEY',
  assistantId: 'YOUR_ASSISTANT_ID',
});

Esta es solo la forma más básica de implementación. Para conocer otros métodos de implementación, puedes leer nuestros casos de uso avanzados.

To learn more about the different configuration options for Sidepanel, you can read our Sidepanel API References.