$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
Search
sutetotanuki
September 13, 2024
0
160
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
September 13, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
0
170
WEBエンジニア向けAI活用入門
sutetotanuki
0
380
今時のCookie事情
sutetotanuki
0
400
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.3k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
1.9k
サーバーレスRDBの選択肢
sutetotanuki
0
1.2k
今日から始めるAmplify DataStore
sutetotanuki
0
1.1k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
670
20191011_devio_osaka.pdf
sutetotanuki
0
2.2k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How GitHub (no longer) Works
holman
310
140k
Rails Girls Zürich Keynote
gr2m
94
13k
4 Signs Your Business is Dying
shpigford
181
21k
The Language of Interfaces
destraynor
154
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Site-Speed That Sticks
csswizardry
0
74
Transcript
ブラウザ上で実⾏され、 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人月程度の案件サイズがボリュームゾーンです ・様々な業界・お客様のご支援を高速に回して、マッハで経験を獲得できます