AI-powered support ticket triage dashboard with Claude structured JSON
Live AI triage dashboard deployed on Vercel, demonstrating how a Claude AI layer reduces first-pass ticket categorization time and surfaces draft replies for agent review.
Architecture
Data flow from user interface through API layer to persistence and cloud deployment
The problem
Support engineers spend significant time on the first-pass of every ticket: reading it, deciding priority, deciding category, drafting an opening reply. None of that requires human judgment. SupportDesk demonstrates how an AI layer handles that first pass so agents can focus on resolution.
Structured AI output with fallback
The triage route prompts Claude for strict JSON and validates every field against TypeScript union types before returning to the client. The key engineering constraint was graceful degradation.
- Claude returns: category, priority, sentiment, tags[], summary, draftReply
- Each field validated against its TypeScript union before state update
- Invalid value → field falls back to ticket original, no crash, no partial state
- API key stays server-side. All Claude calls go through Next.js Route Handlers
Keyboard-first UX
Support queues are worked at speed. Every interaction has a keyboard shortcut: J/K to move between tickets, Enter to open, Esc to deselect, T to trigger triage, R to generate a reply suggestion. The design mirrors tools like Linear and GitHub Issues that support engineers already use.
Testing discipline
The 64-test suite was written alongside the implementation, not after. Utility functions (SLA calculation, priority ordering) have exhaustive unit coverage. The Zustand store tests verify state transitions in isolation. The API route tests mock the Anthropic SDK and verify request/response shape contracts.