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

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

2 postgres.new とは？

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

4 できること

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

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

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

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

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

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

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

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

13 使ってみて

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

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

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

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

18 使われてる技術要素

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

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

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

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

23 今後のロードマップ

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

25 まとめ

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

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

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

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

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

sutetotanuki

More Decks by sutetotanuki

Featured

Transcript

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

2 postgres.new とは？

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

4 できること

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

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

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

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

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

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

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

13 使ってみて

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

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

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

18 使われてる技術要素

21 ⽣成AIのフロントエンドへの組み込み VercelのAI SDKが使われている AI SDKは⽣成AIを使った機能を React や Vueに組み込むためのフロントエンドライブラリ

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

23 今後のロードマップ

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

25 まとめ

26 まとめ • Supabaseからブラウザ上で起動しAIアシスタントがついた postgres.new が出ました • ⾃然⾔語でクエリできたりグラフが作れる •

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