nextjs openai doc search

next.js openai doc検索スターター

このスターターは、 pagesディレクトリ内のすべての.mdxファイルを取得し、OpenAIテキスト完了プロンプト内のカスタムコンテキストとして使用するように処理します。

展開する

このスターターをVercelに展開します。 Supabase統合は、必要な環境変数を自動的に設定し、データベーススキーマを構成します。あなたがしなければならないのはあなたのOPENAI_KEYを設定することだけで、あなたは行く準備ができています！

[

技術的な詳細

独自のカスタムChatGPTを構築するには、4つのステップが必要です。

1. [？ビルド時間]知識ベース（ pagesフォルダーの.mdxファイル）を前処理します。
2. [？ Build Time] PGVectorを使用して埋め込みをポストグレスに保存します。
3. [？ランタイム]ベクトルの類似性検索を実行して、質問に関連するコンテンツを見つけます。
4. [？ランタイム] OpenAI GPT-3テキスト完了プロンプトとクライアントへのストリーミング応答にコンテンツを注入します。

？ビルド時間

ステップ1。この間、次のタスクを実行するgenerate-embeddingsスクリプトが実行されています。

 Sequendediagram
    参加者vercel
    参加者DB（PGVector）
    参加者Openai（API）
    ループ1。知識ベースを前処理します
        vercel- >> vercel：chunk .mdxページにセクション
        ループ2。埋め込みを作成して保存します
            Vercel- >> Openai（API）：ページセクションの埋め込みを作成します
            Openai（API） -  >> Vercel：埋め込みベクター（1536）
            vercel- >> db（pgvector）：ページセクションの埋め込みを保存します
        終わり
    終わり

埋め込みの保存に加えて、このスクリプトは.mdxファイルのそれぞれのチェックサムを生成し、これを別のデータベーステーブルに保存して、ファイルが変更されたときに埋め込みが再生されることを確認します。

？ランタイム

ステップ3。および4。ユーザーが質問を提出するたびに、実行時に発生します。これが発生すると、次の一連のタスクが実行されます。

 Sequendediagram
    参加者クライアント
    参加者のエッジ関数
    参加者DB（PGVector）
    参加者Openai（API）
    クライアント -  >>エッジ関数：{query：lorem ispum}
    クリティカル3。ベクターの類似性検索を実行します
        エッジ関数 -  >> Openai（API）：クエリ用の埋め込みを作成します
        Openai（API） -  >>エッジ関数：埋め込みベクター（1536）
        エッジ関数 -  >> DB（PGVector）：ベクターの類似性検索
        db（pgvector） -  >>エッジ関数：関連するドキュメントコンテンツ
    終わり
    重要な4。コンテンツをプロンプトに注入します
        エッジ関数 -  >> openai（API）：完了要求プロンプト：クエリ +関連ドキュメントコンテンツ
        Openai（API） -  >>クライアント：テキスト/イベントストリーム：完了応答
    終わり

これに関連するファイルは、 SearchDialog （クライアント）コンポーネントとvector-search （エッジ関数）です。

pgvector拡張のセットアップを含むデータベースの初期化は、 supabase/migrationsフォルダーに保存され、 supabase startを実行するときにローカルPostgresインスタンスに自動的に適用されます。

ローカル開発

構成

• cp .env.example .env
• OPENAI_KEY新しく作成した.envファイルに設定します。
• NEXT_PUBLIC_SUPABASE_ANON_KEYとSUPABASE_SERVICE_ROLE_KEY runを設定します。

  注：キーを取得するには、Supabaseを実行する必要があります。

Supabaseを開始します

Dockerがローカルでインストールおよび実行されていることを確認してください。その後、実行します

supabase start

NEXT_PUBLIC_SUPABASE_ANON_KEYおよびSUPABASE_SERVICE_ROLE_KEY runを取得するには：

supabase status

next.jsアプリを開始します

新しいターミナルウィンドウで、実行します

pnpm dev

カスタム.mdxドキュメントを使用します

1. デフォルトでは、ドキュメントは.mdx形式である必要があります。これは、既存の（または互換性のある）MarkDown .mdファイルの名前を変更することで実行できます。
2. 埋め込みを再生するためにpnpm run embeddingsします。

   注：Supabaseが実行されていることを確認してください。確認するには、 supabase statusを実行します。実行されていない場合は、 supabase startを実行します。

3. pnpm devを再度実行して、nextjs localhost：3000レンダリングページを更新します。

もっと詳しく知る

• Supabaseドキュメント用のChatGptをどのように構築したかについてのBlogPostをお読みください。
• [docs] pgvector：埋め込みとベクターの類似性
• Rabbit Hole Syndrome YouTubeチャンネルでGregの「How I Built This This This」ビデオをご覧ください。

ライセンス

Apache 2.0