⚡️

LangChain.js x Next.js のテンプレートのSupabaseの設定方法

2023/11/17に公開

PostgreSQL

はじめに

LangChain x Next.js のテンプレートを試していて、データベースのサービスである Supabase の設定で少し迷ったので記録することにしました。すごく良いテンプレートなので、LangChain に興味あるけど、Python は書きたくないって人とかが触ってみたらいいと思います（Python 書く人も触ったらいいと思います）。

上記 github のアプリは下記リンクから実際に試すことができます。

普通の Chat アプリや、LLM と他の API を連携する Agents や、DB の情報と連携して回答を生成する Retrieval 等、主要な LLM 活用法の実装を見ることができます。

画面はこんな感じです。

ただ、Retrieval のテンプレートは Supabase と連携する必要があり、上記リンクでは試せませんでした。
Upload しようとすると demo mode ではサポートされてないって言われます。

動かしてみたかったので、Supabase のアカウントを作って、API key を準備し、自分の環境で試してみました。
繰り返しになりますが、すごく有用なテンプレートなので、多くの人が試せるように引っかかったところを残しておきます。

Supabase の設定

テンプレートの中では、RAG (Retrieval Augumented Generation)の実装で、ベクターストアとして Supabase 使っています。RAG とは、検索で拡張した文章回答生成って感じかなと思います。詳しくは検索してみてください。また、Supabase は PostgreSQL のサービスです。PostgreSQL もベクターストアとして使えること知りませんでした。

https://supabase.com/

Supabase の設定方法は、先ほどの github の README にはリンクを読めって書かれていたので確認しました。あまり親切ではないです。しれっと SQL が書かれているので、これを Supabase で実行していきます。
（npm installの後に SQL 書かれているので脳がバグって最初、無視してました 😇）

もう少し詳しいことはここに書かれてます。雰囲気だけ見ると、sql や RAG 実装のための JavaScript のコードが書かれてそうでした。Deno も使ってていい感じな気がします。

やることがわかったので、まずは、Supabaseにいって、Start your projectでアカウントとprojectを作成します。

Region は日本にしてみました。日本あるのすごい。

SQL を実行します。

SQL 内にコメントも書かれてますが、下記 3 点を実行しています。

pgvector extension を有効化
documents テーブルを作成
match_documents function を作成

SQL はSupabase | 🦜️🔗 Langchainに書かれているものをそのまま使いました。

-- Enable the pgvector extension to work with embedding vectors
create extension vector;

-- Create a table to store your documents
create table documents (
  id bigserial primary key,
  content text, -- corresponds to Document.pageContent
  metadata jsonb, -- corresponds to Document.metadata
  embedding vector(1536) -- 1536 works for OpenAI embeddings, change if needed
);

-- Create a function to search for documents
create function match_documents (
  query_embedding vector(1536),
  match_count int DEFAULT null,
  filter jsonb DEFAULT '{}'
) returns table (
  id bigint,
  content text,
  metadata jsonb,
  embedding jsonb,
  similarity float
)
language plpgsql
as $$
#variable_conflict use_column
begin
  return query
  select
    id,
    content,
    metadata,
    (embedding::text)::jsonb as embedding,
    1 - (documents.embedding <=> query_embedding) as similarity
  from documents
  where metadata @> filter
  order by documents.embedding <=> query_embedding
  limit match_count;
end;
$$;

次に、Supabase の Settings の API のところから、URL と API key を取得します。key は 2 つあるうちの、上にある public を使います。

.env.localファイルに以下のような形で保存します。

OPENAI_API_KEY="hoge"
SUPABASE_PRIVATE_KEY="fuga"
SUPABASE_URL="https://piyo.supabase.co"

これで、準備ができました！

動作確認

プログラムを実行して、ブラウザから文章を Upload するとうまくいきました。

Supabase では、こんな感じになりました。

metadataとして、文章のロケーション情報として、line number が書かれてたりします。vector はそれっぽく配列になってます。

試しに、質問してみると、それっぽく回答が生成されました。参考にしてるソースも教えてくれています。いい感じ！

おわりに

テンプレート、動かしながら LangChain.js を学び中でしたが、Supabase も触ることができて面白かったです。
ベクターストア専用のサービスがある中で、PostgreSQL をベクターストアとして使うのって本当にありなんやろかと思いつつ、とりあえず動いたのでよしとしました。
テンプレートのコードもすごく勉強になるので、興味ある方いればぜひ動かしながらみてみると良いと思います。

GitHubで編集を提案

はじめに

Supabase の設定

動作確認

おわりに

Discussion