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

Transcript

1. ブラウザ上で実⾏され、 AIアシスタント付きデータベース postgres.new を触ってみた 1
2. 2 postgres.new とは？
3. 3 postgres.newとは？ Supabaseが作成したブラウザ上で動作し AIアシスタントがついた PostgreSQL 主に以下のことができる • スキーマの⾃動⽣成 • ⾃然⾔語でSQLを使わずにクエリ • ⾃然⾔語でグラフ⽣成 • ⾃然⾔語でシードデータを投⼊
4. 4 できること
5. 5 URLにアクセスするだけで試せる https://postgres.new アクセスするだけでプレイグランドが使える アクセスしたブラウザ上でPostgreSQLが起動し ブラウザ上でデータを保存する
6. 6 スキーマの⾃動⽣成 CSVをドラックドロップ するだけでスキーマが ⽣成される
7. 7 スキーマの⾃動⽣成 CSVデータのヘッダとデータの特徴から 列名とデータ型を⾃動で定義 customer_id,first_name,last_name,email,phone_number 1,田中,太郎,taro.tanaka@example.com,090-1234-5678 2,佐藤,花子,hanako.sato@example.com,080-2345-6789 3,鈴木,一郎,ichiro.suzuki@example.com,070-3456-7890 4,山田,美咲,misaki.yamada@example.com,090-4567-8901 5,伊藤,健太,kenta.ito@example.com,080-5678-9012 サンプルCSV
8. 8 スキーマの⾃動⽣成 複数の関連のあるCSV ファイルをアップロード するとその内容から リレーションを推測して くれる
9. 9 ⾃然⾔語でSQL チャットから ⾃然⾔語でクエリできる 複数CSVの関連を理解し 関連を考慮したSQLを⽣成
10. 10 ⾃然⾔語でSQL ⽣成したSQLを確認できる 関連を理解したjoin句が ⽣成されてる
11. 11 ⾃然⾔語でグラフ⽣成 ⾃然⾔語でグラフ⽣成 ができる 依頼内容に応じて グラフの種類を使い分 けてくれる
12. 12 ⾃然⾔語でデータ投⼊ チャットから⾃然⾔語で データを投⼊することで る
13. 13 使ってみて
14. 14 使ってみて • チャットでエンターを押すと実⾏されてしま うので⽇本語で使いにくい(コピペで対応) • グラフは2つ以上同時に⽣成できない • ⽣成AIなので⽣成されるSQLも揺れがある。 例えばランキングでも昇順、降順の指定がな いとばらつく。明⽰的に指定する必要がある • デフォルトでは limit 5 が必ずつく ◦ 「全ての」とつけて回避
15. 15 エラーの⾃動修正 エラーになった場合は ⾃動修正。修正できな い場合はサジェスト (画像はUTF-8でないと 取り込めないから icov 等使って直してと⾔わ れてる)
16. 16 エラーの⾃動修正 エラーになった場合は ⾃動修正。修正できな い場合はサジェスト (画像はUTF-8でないと 取り込めないから icov 等使って直してと⾔わ れてる)
17. 17 使えそうなユースケース • 簡易な分析 • 表計算ソフトを使って作成してたような グラフの作成を⾃然⾔語でサクッと作る • ⾮エンジニアが複雑なクエリを⾃然⾔語で 実⾏する
18. 18 使われてる技術要素
19. 19 ブラウザ上で起動するPostgreSQL PGLite というライブラリを使っている WASM(Web Assembly)でビルドされ、 ブラウザ上で実⾏されるPostgreSQL データの永続化はIndexedDB等が使われる ブラウザでデータベース操作が完結し WebSocketなど使わずにPostgreSQLが使える
20. 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. 21 ⽣成AIのフロントエンドへの組み込み VercelのAI SDKが使われている AI SDKは⽣成AIを使った機能を React や Vueに 組み込むためのフロントエンドライブラリ ChatのSSEを使ったリアルタイム制御や StreamingをこのSDKを使って実現
22. 22 SQLやグラフデータの⽣成 グラフの描画にはChart.jsが使⽤されている が、グラフに渡すデータはAIから返却された レスポンスが渡される この処理はFunction Callingによって実現され ている
23. 23 今後のロードマップ
24. 24 ロードマップ • S3に置いてどこからでもアクセスできる • Wordなど出⼒形式の拡充 • URLを共有することでデータベースを他の ユーザーと共有 • OPFSサポート
25. 25 まとめ
26. 26 まとめ • Supabaseからブラウザ上で起動しAIアシスタ ントがついた postgres.new が出ました • ⾃然⾔語でクエリできたりグラフが作れる • 技術的には PGLiteや GPT-4o が使われてる • 今後ファイル同期、出⼒フォーマットの拡充 が予定されてる
27. マッハチーム 27 プロダクト開発の 「立ち上げ専門チーム」 です。 高速に、プロダクト開発 と、 顧客との信頼関係構築 を行うことを目指しています。
28. こんな希望が叶うかも 28 ・ モダンな技術でフルスタック開発に挑戦したい 2~3名のエンジニアで、フロントエンド、サーバーサイド、インフラの全てを担当できます ・ プリセールスから入りプロダクトの方向性を提案したい エンジニアがプリセールスも顧客折衝もガンガン進めていきます ・ 0から1を圧倒的なスピードで立ち上げたい ・2~6人月程度の案件サイズがボリュームゾーンです ・様々な業界・お客様のご支援を高速に回して、マッハで経験を獲得できます