SUPABASE:Next.jsとOpenAIを活用したドキュメンテーション検索の革新」

ドキュメンテーションの検索という課題に対し、新たな解決策が登場しました。それは、Next.js、OpenAI、そしてSupabaseを活用したドキュメンテーション検索のテンプレートです。このテンプレートは、GitHub上の「supabase-community/nextjs-openai-doc-search」で公開されており、誰でも自由に利用することができます。この記事では、その特徴と利用方法について詳しく解説します。

GitHub - supabase-community/nextjs-openai-doc-search: Template for building your own custom ChatGPT style doc search powered by Next.js, OpenAI, and Supabase.

要約
このスターターは、ページディレクトリ内の全ての.mdxファイルを取得し、それらをOpenAIテキスト補完プロンプトのカスタムコンテキストとして使用します。

Vercelにデプロイすることで、Supabaseの統合が自動的に必要な環境変数を設定し、データベーススキーマを構成します。OPENAI_KEYを設定するだけで使用を開始できます。

カスタムChatGPTの構築は以下の4つのステップで行われます：

ビルド時：知識ベース（ページフォルダ内の.mdxファイル）を事前処理します。
ビルド時：pgvectorを使用してPostgresに埋め込みを保存します。
ランタイム：ベクトル類似性検索を実行して、質問に関連するコンテンツを見つけます。
ランタイム：コンテンツをOpenAI GPT-3テキスト補完プロンプトに注入し、クライアントにレスポンスをストリームします。
詳細
ビルド時のステップは、VercelがNext.jsアプリをビルドする際に行われます。この間にgenerate-embeddingsスクリプトが実行され、以下のタスクが行われます：

.mdxページをセクションに分割します。
ページセクションの埋め込みを作成し、それをpgvectorを使用してPostgresに保存します。
ランタイムのステップは、ユーザーが質問を提出するたびに行われます。以下のタスクが実行されます：

クエリの埋め込みを作成し、ベクトル類似性検索を行います。
関連するドキュメンテーションのコンテンツを取得し、それをプロンプトに注入します。

設定については、.env.exampleファイルを.envファイルにコピーし、OPENAI_KEYを設定します。また、NEXT_PUBLIC_SUPABASE_ANON_KEYとSUPABASE_SERVICE_ROLE_KEYを設定するためには、supabaseを実行する必要があります。

ローカルでの開発にはDockerが必要で、Dockerをインストールし、ローカルで実行してから、以下のコマンドを実行します。

supabase start

そして、NEXT_PUBLIC_SUPABASE_ANON_KEYとSUPABASE_SERVICE_ROLE_KEYを取得するためには、以下のコマンドを実行します。

supabase status

Next.jsアプリを起動するには、新しいターミナルウィンドウを開き、以下のコマンドを実行します。

pnpm dev

カスタムの.mdxドキュメントを使用する場合、デフォルトではドキュメンテーションは.mdx形式である必要があります。これは、既存の（または互換性のある）マークダウン.mdファイルの名前を変更することで行うことができます。次に、以下のコマンドを実行して埋め込みを再生成します。

pnpm run embeddings

supabaseが実行中であることを確認してください。確認するには、supabase statusを実行します。もし実行されていなければ、supabase startを実行します。

最後に、NextJS localhost:3000のレンダリングされたページを更新するために、再度pnpm devを実行します。

このスターターをVercelにデプロイすると、Supabaseの統合が自動的に必要な環境変数を設定し、データベーススキーマを構成します。OPENAI_KEYを設定するだけで準備完了です。

詳細については、Supabase DocsのChatGPTの構築についてのブログ記事を読むか、pgvector: Embeddings and vector similarityに関するドキュメントを参照するか、Rabbit Hole Syndrome YouTube ChannelでGregの"How I built this"ビデオを視聴することができます。

このテンプレートを活用すれば、あなたのプロジェクトのドキュメンテーション検索も一段とパワーアップすることでしょう。AIとWebテクノロジーの融合により、より効率的でユーザーフレンドリーな検索体験を提供することが可能になります。ぜひ、この新たな可能性を自身のプロジェクトに取り入れてみてください。