Portfolio case study

SupportPilot AI: customer support and WeCom CRM dashboard

A production-style dashboard for small support teams that need CRM, conversations, AI reply suggestions, knowledge base context, and analytics in one bilingual workspace.

Live demo GitHub ↗

Problem

Small teams often manage customer messages across scattered channels, with slow replies and no shared knowledge context.

Solution

SupportPilot AI combines CRM, inbox, knowledge base, mock AI generation, and analytics into a single dashboard.

Target users

E-commerce, education, SaaS, travel, and service teams serving Chinese and international customers.

Key features

Three-column conversation inbox with customer context

AI reply generation with human review safety boundary

CRM table with drawer profiles, tags, notes, and activity

Knowledge base articles used as AI context

Analytics dashboards for volume, CSAT, channels, and issues

Demo mode that works without private credentials

Architecture

Next.js App Router powers public pages, protected dashboard routes, and the AI API endpoint. Supabase Auth is the planned identity layer, while Prisma owns data queries for PostgreSQL. In portfolio mode, the app uses typed mock data and a mock AI fallback so recruiters can explore without secrets.

Client dashboardProtected API routeAI provider or mock fallbackPrisma schema for future databaseVercel production deployment

AI-assisted workflow

AI generation uses conversation context, customer profile data, and selected knowledge base content. The route returns a suggested reply, summary, sentiment, tags, and follow-up action. The important boundary is clear: AI only suggests; a human agent reviews and sends manually.

AI helps agents move faster, but the product keeps accountability with the human support agent.

Decision log

Zustand over Redux: the global state surface is small, and localized dashboard state keeps inbox logic readable.

Supabase Auth + Prisma data layer: auth and data queries are separated so the database layer stays testable and consistent.

Mock AI fallback: recruiters can test the full workflow without API keys while the architecture remains ready for DeepSeek, Qwen, or OpenAI-compatible APIs.

Challenge

The main design challenge was making AI feel helpful without making the product look like a toy chatbot. I solved it by making AI a side panel inside a real support workflow.

What I learned

I practiced dashboard information architecture, Ant Design tables, typed mock data, API fallbacks, bilingual UX, and the safety boundary for AI-assisted customer support.

Future improvements

Real Supabase Auth

Prisma migrations and seed

WeCom webhook receiver

Message sync

Role-based access

Demo video