Sidepanel を使ってみる

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

情報

Sidepanelはバージョン>= 4.4から利用可能です

はじめに

DocSearch Sidepanelは、DocSearch Modalのエクスペリエンスとは別の新しい機能です。SidepanelはAsk AIとの連携に特化して設計されており、完全にスタンドアロンで使用することも、Modalとのハイブリッドモードで使用することもできます。

インストール

Sidepanelを使い始めるには、まず必要なパッケージをインストールします：

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

またはお好みのパッケージマネージャーを使用して

パッケージマネージャーを使わない場合

<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>

実装方法

Sidepanelのもっともシンプルな実装方法は次のとおりです：

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

これは最も基本的な実装形式です。他の実装方法については、高度な使用例で確認できます。

Sidepanelのさまざまな設定オプションの詳細については、Sidepanel APIリファレンスを参照してください。