react search
Release 1.2.0
React-Search は、数行のコードで Vectara を利用したセマンティック検索を React アプリに追加するための UI ウィジェットです。
ヒント
他に何かをお探しですか?別のオープンソース プロジェクトを試してください。
デモを試してみてください!
検索入力は次のようになります。
ユーザーが検索入力をクリックすると、次のような検索プロンプトが表示されます。
検索結果は次のようになります。
React-Search をインストールします。
npm install --save @vectara/react-search次に、それをアプリケーションで次のように使用します。
import { ReactSearch } from "@vectara/react-search" ;
/* snip */
< ReactSearch
customerId = "CUSTOMER_ID"
corpusId = "CORPUS_ID"
apiKey = "API_KEY"
placeholder = "Search" // Optional search input placeholder
isDeepLinkable = { true } // Optional boolean determining if search results will be deep-linked
openResultsInNewTab = { true } // Optional boolean determining if links will open in a new tab
zIndex = { 1000 } // Optional number assigned to the z-index of the search modal
isSummaryToggleVisible = { true } // Optional boolean determining if users can summarize search results
rerankingConfiguration = { {
rerankerId : 272725718
} }
/ > ; customerId (必須)すべての Vectara アカウントは顧客 ID に関連付けられています。顧客 ID を確認するには、Vectara コンソールにログインし、右上隅にあるアカウントのドロップダウンを開きます。
corpusId (必須)コーパスを作成した後、コーパスに移動し、左上隅のコーパス名の横を見ると、その ID を見つけることができます。
apiKey (必須)API キーを使用すると、アプリケーションはコーパス内のデータにアクセスできます。 QueryService API キーを作成する方法を学習します。
apiUrl (オプション)デフォルトでは、React-Search はクエリ リクエストを Vectara サーバーに送信します。プロキシ サーバーを使用する場合は、プロキシの URL を使用してこのオプションを構成できます。
placeholder (オプション)検索モーダルの入力でプレースホルダー テキストを構成します。
isDeepLinkable (オプション)デフォルトはfalseです。検索クエリを URL パラメーターに永続化する場合は、このオプションを設定します。これにより、ユーザーは URL を共有したりブックマークしたりできるようになります。 URL を読み込むと、検索モーダルが自動的に開き、URL に保存されているクエリが検索されます。
openResultsInNewTab (オプション)デフォルトはfalseです。検索結果を新しいタブで開く場合は、このオプションを設定します。
zIndex (オプション)検索モーダルの Z インデックスを定義します。
onToggleSummary (オプション)「検索結果の要約」トグルが有効かどうかを示すブール型引数を受け取るコールバックを受け入れます。
isSummaryToggleVisible (オプション)ユーザーが検索結果を要約できるかどうか。
isSummaryToggleInitiallyEnabled (オプション)ユーザーが要約を切り替えることができる場合、その切り替えをデフォルトで有効にするかどうか。
rerankingConfiguration (オプション)使用する検索結果リランカーとその構成を指定します。詳細については、再ランキングに関するドキュメントを参照してください。
React-Search をインストールします。
npm install --save @vectara/react-search次に、アプリケーションでuseSearchフックを次のように使用します。
import { useSearch } from "@vectara/react-search/lib/useSearch" ;
/* snip */
const { fetchSearchResults , isLoading } = useSearch (
"CUSTOMER_ID" ,
"CORPUS_ID" ,
"API_KEY" ,
"API_URL" , // optional
{ rerankerId : 12345 } // optional
) ;フックによって返された値は、カスタム コンポーネントに小道具として渡したり、任意の方法で使用したりできます。
async (query: string, summarize: boolean) => Promise<{ searchResults: DeserializedSearchResult[]; summary?: string }>これは、検索 API にメッセージを送信するために使用されます。検索が成功すると、検索結果の配列とオプションの概要で構成されるオブジェクトが返されます。各検索結果はDeserializedSearchResultオブジェクトです。タイプの詳細については、こちらをご覧ください。
boolean検索リクエストがまだ保留中かどうかを示すブール値
SSR フレームワークで React-Search を使用するには、追加のインフラストラクチャが必要になる場合があります。よくある注意点をいくつか示します。
React-Search は、Next.js と互換性のあるReactSearchNextバリアントを提供します。 ReactSearchと同じ props を受け入れます。
次のようにインポートできます。
import { ReactSearchNext } from "@vectara/react-search/lib/ReactSearchNext" ;この Next.js 互換コンポーネントの使用に加えて、 ReactSearchNextをインポートするファイルで"use client"ディレクティブを使用する必要もあります。
React-Search は Vectara コーパスからデータを取得します。これを設定するには:
プロのヒント: API キーを作成した後、コーパスに移動し、[アクセス制御] タブをクリックします。下部で API キーを見つけて、[すべてコピー] オプションを選択して、顧客 ID、コーパス ID、および API キーをコピーします。これにより、 <ReactSearch />インスタンスを構成するために必要なすべてのデータが得られます。
Vectara を使用すると、ドキュメントにメタデータを定義できます。 React-Search は、特定のメタデータ フィールドの存在に基づいて異なる動作をします。
title : このフィールドが定義されている場合、検索結果のタイトルとして表示されます。通常、これはドキュメントや Web ページのタイトルのようなものです。url : このフィールドが定義されている場合、React-Search は定義された URL へのリンクとして検索結果をレンダリングします。 このコードベースには、機能拡張やバグ修正を容易にする開発環境が付属しています。これにより、保守者はコードを迅速に反復処理し、変更を即座に検証できます。
ルート ディレクトリから次を実行します。
npm install
これにより、コンポーネントの構築と開発環境の実行に必要なすべての依存関係がインストールされます。これが完了したら、次を実行します。
npm run docs
これにより、 http://localhost:8080/で実行されるアプリケーションが起動します。最新の変更がここに反映されます。
開発環境が実行されると、 /srcディレクトリ内の .ts および .tsx ファイルに変更が加えられると、コンポーネントの再構築と Web ページのリロードがトリガーされます。
さらに、 /docs/index.tsxにある開発アプリのソース コードを変更すると、リビルドとリロードもトリガーされます。
Vectara React-Search は、Apache 2.0 ライセンスに基づいてライセンス供与されたオープンソース ソフトウェアです。
このリポジトリには、Vectara を利用した UI の構築に役立つサンプル コードが含まれており、Apache 2.0 ライセンスに基づいてライセンスされています。適用される法律で義務付けられている場合または書面による同意がない限り、ライセンスに基づいて配布されるソフトウェアは、明示または黙示を問わず、いかなる種類の保証や条件もなく、「現状のまま」で配布されます。ライセンスに基づく許可と制限を規定する特定の言語については、ライセンスを参照してください。
