ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた

by sutetotanuki

Slide 1

Slide 1 text

ブラウザ上で実⾏され、 AIアシスタント付きデータベース postgres.new を触ってみた 1

Slide 2

Slide 2 text

2 postgres.new とは？

Slide 3

Slide 3 text

3 postgres.newとは？ Supabaseが作成したブラウザ上で動作し AIアシスタントがついた PostgreSQL 主に以下のことができる ● スキーマの⾃動⽣成 ● ⾃然⾔語でSQLを使わずにクエリ ● ⾃然⾔語でグラフ⽣成 ● ⾃然⾔語でシードデータを投⼊

Slide 4

Slide 4 text

4 できること

Slide 5

Slide 5 text

5 URLにアクセスするだけで試せる https://postgres.new アクセスするだけでプレイグランドが使えるアクセスしたブラウザ上でPostgreSQLが起動しブラウザ上でデータを保存する

Slide 6

Slide 6 text

6 スキーマの⾃動⽣成 CSVをドラックドロップするだけでスキーマが⽣成される

Slide 7

Slide 7 text

7 スキーマの⾃動⽣成 CSVデータのヘッダとデータの特徴から列名とデータ型を⾃動で定義 customer_id,first_name,last_name,email,phone_number 1,田中,太郎,[email protected],090-1234-5678 2,佐藤,花子,[email protected],080-2345-6789 3,鈴木,一郎,[email protected],070-3456-7890 4,山田,美咲,[email protected],090-4567-8901 5,伊藤,健太,[email protected],080-5678-9012 サンプルCSV

Slide 8

Slide 8 text

8 スキーマの⾃動⽣成複数の関連のあるCSV ファイルをアップロードするとその内容からリレーションを推測してくれる

Slide 9

Slide 9 text

9 ⾃然⾔語でSQL チャットから⾃然⾔語でクエリできる複数CSVの関連を理解し関連を考慮したSQLを⽣成

Slide 10

Slide 10 text

10 ⾃然⾔語でSQL ⽣成したSQLを確認できる関連を理解したjoin句が⽣成されてる

Slide 11

Slide 11 text

11 ⾃然⾔語でグラフ⽣成⾃然⾔語でグラフ⽣成ができる依頼内容に応じてグラフの種類を使い分けてくれる

Slide 12

Slide 12 text

12 ⾃然⾔語でデータ投⼊チャットから⾃然⾔語でデータを投⼊することでる

Slide 13

Slide 13 text

13 使ってみて

Slide 14

Slide 14 text

14 使ってみて ● チャットでエンターを押すと実⾏されてしまうので⽇本語で使いにくい(コピペで対応) ● グラフは2つ以上同時に⽣成できない ● ⽣成AIなので⽣成されるSQLも揺れがある。例えばランキングでも昇順、降順の指定がないとばらつく。明⽰的に指定する必要がある ● デフォルトでは limit 5 が必ずつく ○ 「全ての」とつけて回避

Slide 15

Slide 15 text

15 エラーの⾃動修正エラーになった場合は⾃動修正。修正できない場合はサジェスト (画像はUTF-8でないと取り込めないから icov 等使って直してと⾔われてる)

Slide 16

Slide 16 text

16 エラーの⾃動修正エラーになった場合は⾃動修正。修正できない場合はサジェスト (画像はUTF-8でないと取り込めないから icov 等使って直してと⾔われてる)

Slide 17

Slide 17 text

17 使えそうなユースケース ● 簡易な分析 ● 表計算ソフトを使って作成してたようなグラフの作成を⾃然⾔語でサクッと作る ● ⾮エンジニアが複雑なクエリを⾃然⾔語で実⾏する

Slide 18

Slide 18 text

18 使われてる技術要素

Slide 19

Slide 19 text

19 ブラウザ上で起動するPostgreSQL PGLite というライブラリを使っている WASM(Web Assembly)でビルドされ、ブラウザ上で実⾏されるPostgreSQL データの永続化はIndexedDB等が使われるブラウザでデータベース操作が完結し WebSocketなど使わずにPostgreSQLが使える

Slide 20

Slide 20 text

20 ⽣成AIのモデル gpt-4o-2024-08-06 が使われてるオープンソースになっていて現時点のソースでは以下のリンクからプロンプトと⼀緒に使⽤してるモデルも確認できる https://github.com/supabase-community/postgres-new/blob/main/apps/postgres-new/app/api/chat/route.ts#L63

Slide 21

Slide 21 text

21 ⽣成AIのフロントエンドへの組み込み VercelのAI SDKが使われている AI SDKは⽣成AIを使った機能を React や Vueに組み込むためのフロントエンドライブラリ ChatのSSEを使ったリアルタイム制御や StreamingをこのSDKを使って実現

Slide 22

Slide 22 text

22 SQLやグラフデータの⽣成グラフの描画にはChart.jsが使⽤されているが、グラフに渡すデータはAIから返却されたレスポンスが渡されるこの処理はFunction Callingによって実現されている

Slide 23

Slide 23 text

23 今後のロードマップ

Slide 24

Slide 24 text

24 ロードマップ ● S3に置いてどこからでもアクセスできる ● Wordなど出⼒形式の拡充 ● URLを共有することでデータベースを他のユーザーと共有 ● OPFSサポート

Slide 25

Slide 25 text

25 まとめ

Slide 26

Slide 26 text

26 まとめ ● Supabaseからブラウザ上で起動しAIアシスタントがついた postgres.new が出ました ● ⾃然⾔語でクエリできたりグラフが作れる ● 技術的には PGLiteや GPT-4o が使われてる ● 今後ファイル同期、出⼒フォーマットの拡充が予定されてる

Slide 27

Slide 27 text

マッハチーム 27 プロダクト開発の「立ち上げ専門チーム」です。高速に、プロダクト開発と、顧客との信頼関係構築を行うことを目指しています。

Slide 28

Slide 28 text

こんな希望が叶うかも 28 ・モダンな技術でフルスタック開発に挑戦したい 2~3名のエンジニアで、フロントエンド、サーバーサイド、インフラの全てを担当できます・プリセールスから入りプロダクトの方向性を提案したいエンジニアがプリセールスも顧客折衝もガンガン進めていきます・ 0から1を圧倒的なスピードで立ち上げたい・2~6人月程度の案件サイズがボリュームゾーンです・様々な業界・お客様のご支援を高速に回して、マッハで経験を獲得できます