Case 04
カスタマーサポート チャットボット
FAQ自動応答とエスカレーションを備えたフルスタックCSツール。
Next.jsSupabase RealtimeClaude API
Before
FAQ対応も複雑な相談も、すべて運用担当者が個別に対応
→
After
AIがFAQを自動回答、対応できない相談のみ人へエスカレーション
対象
FAQ対応の負荷が高く、複雑な相談への引き継ぎ体制を整えたいECサイト様・SaaS事業者様のカスタマーサポートチーム（架空クライアント BOTANICA を想定）
課題
問い合わせ対応をFAQベースで自動化しつつ、対応できない相談は運用担当者へスムーズに引き継ぎたい（架空クライアント BOTANICA を想定）。
解決
Next.js App Router + Supabase Realtimeで会話をリアルタイム管理し、Claude APIがFAQに基づき回答、必要に応じて人へエスカレーションする設計とした。
実装
- →Next.js App Router + TypeScript + Tailwind CSSで構築
- →Supabaseにconversations/messages/faqsテーブルとRLSを設計
- →Supabase Realtimeでオペレーターへの即時反映を実現
- →Claude APIによるFAQベース応答とエスカレーションロジックを実装
- →オペレーター管理画面を構築
工数
WBS見積り約24時間 → 実績約33時間(約37%超過)。差分は振り返りとして記録し次案件に活用
効果
- ✓Vercelへ本番デプロイ(cs-chatbot-flame.vercel.app)
- ✓技術解説記事を公開
- ✓Git Worktreeは概念学習に留め、次回Case 5での実践を計画
使用技術
Next.jsTypeScriptTailwind CSSSupabaseClaude API
このようなシステムの構築・自動化をご検討中の方は
お気軽にご相談ください。