AIチャットぼっと

https://github.com/kuroda50/yuhuin
https://youtu.be/Xk9pEXtAbyE

TypeScript

React

LINEグループの会話の内容を、AIに質問できるサービス

くろりく

推しアイデア

AIで情報共有！

作った背景

1つのLINEグループのデータが整理されてなかった。 簡単に情報を確認できると便利！

推し技術

ストリーミング処理、ベクトル検索、時系列でソートなどの処理を入れました

プロジェクト詳細

アーキテクチャ

LINEグループ発言 │ ▼ LINE Messaging API Webhook (/api/webhook/line) │ HMAC-SHA256 署名検証 │ Gemini Embedding (768次元) へ変換 ▼ Supabase (PostgreSQL + pgvector) ← ベクトル + メタデータを保存 ▲ │ コサイン類似度検索 (match_messages RPC) │ Gemini 2.5 Pro でストリーミング回答生成 │ チャット UI (/chat)

技術スタック

フロントエンド：react, Next JS AI: gemini DB: supabase

技術的な工夫
  • ストリーミング処理
    • サーバからクライアントにデータが返ってくるときは、ストリーミングで返しています。ユーザの待ち時間が減り、UXが改善します。
    • なお、geminiの処理が十分早いため、体感しづらいです
  • RAG
    • 質問文をベクトル化して、cos類似度で関連メッセージを取得しています。
    • コンテキストが0件ならAPIを叩かないようにしています
  • 時系列順でデータを返す
    • 会話の流れを把握するために、cos類似度順にデータを並べた後に、時系列順にソートしています

データフロー

LINEグループでメッセージが投稿される Webhook が受信 → HMAC-SHA256 で署名検証 gemini-embedding-001 で 768 次元ベクトルに変換 Supabase messages テーブルに upsert（重複防止） ユーザーがチャット UI で質問 質問文を同じモデルでベクトル化 match_messages RPC で類似度 ≥ 0.7 のメッセージを時系列順取得 Gemini 2.5 Pro にコンテキストとして渡し、ストリーミング回答を生成 SSE でフロントにリアルタイム配信、回答と参照元メッセージを表示

くろりく

@kuroriku