カスタマーサポートプラットフォーム

ナレッジ検索チャットと受信トレイ(チケット管理)を統合した、マルチテナント対応のカスタマーサポート基盤。

課題

問い合わせ対応に時間がかかり、回答に使うナレッジも担当者やチャネルごとに分散していた。 ワークスペースごとにデータを分けながら、ナレッジ検索と問い合わせ管理を同じ画面で扱える設計が求められていた。

ソリューション

Next.js 14 + Supabase(pgvector)でナレッジ検索チャットとチケット管理を統合。 複数モデルの切替、RLSによるテナント分離、受信トレイ、CRM、ダッシュボードをまとめて実装した。

成果

問い合わせ対応、ナレッジ検索、顧客情報管理、レポート確認を一つの画面で扱えるサポート基盤を構築。

チーム

1 member, 2 months

設計・実装・インフラ構築・運用

役割

画面設計、ナレッジ検索、受信トレイ、権限管理、インフラを担当。

フロントエンド(Next.js)、バックエンド(Supabase Edge Functions)、インフラ(Terraform/GCP)をまとめて担当。

技術スタック

FrontendNext.js 14 (App Router) / TypeScript / Tailwind CSS / DaisyUI / shadcn/ui
StateJotai / TanStack React Query
AI / LLMVercel AI SDK / OpenAI / Gemini / Claude / Groq / xAI / DeepSeek
RAGLangChain / pgvector / OpenAI Embeddings
DatabaseSupabase (PostgreSQL / Auth / Edge Functions / RLS)
PaymentStripe
InfrastructureDocker / GCP (Cloud Tasks) / Terraform
CI/CDGitHub Actions

主要機能

01

ナレッジ検索チャット: URL/PDF/テキストを取り込み、問い合わせ時に関連情報を参照

02

マルチLLM対応: OpenAI / Gemini / Claude / Groq / xAI / DeepSeekを統一インターフェースで切替可能

03

受信トレイ(Inbox): Zendeskライクなチケット管理。チャット・メール・APIマルチチャネル対応

04

マルチテナント: RLSによるDB層でのデータ分離、メンバーシップ・ロール管理

05

ダッシュボード: 各種データのグラフ表示・フィルタ・レポート

06

プラットフォーム管理: スーパーユーザー向けのワークスペース横断管理画面

注力した点

RAGパイプライン設計

ドキュメント取り込み、チャンク分割、ベクトル化、類似検索、回答生成までの流れを構築。content_hashによる重複検知やworkspace_idフィルタによるクロステナント漏洩防止を実装。

マルチテナント×RLSセキュリティ

全コアテーブルにworkspace_idを持たせ、Supabase RLSでテナント間のデータを分離。Middlewareで認証チェック、Client側でロールチェックを行う二段構えにしました。

Edge Functionによる非同期処理

重い処理をSupabase Edge Functionに分離し、Webアプリのレスポンスに影響を与えにくい構成にしました。