SupportPilot is an Independent Showcase Project built with synthetic data to demonstrate a realistic client-ready workflow. A full-stack customer operations dashboard that brings ticket priority, AI summaries, routing signals, response drafts, and approvals into a single queue.

Support teams lose time when urgency, account context, issue clusters, and suggested responses are spread across multiple tools. Fully automated replies also create customer and brand risk.

Product Designer & Full-Stack Developer — workflow design, interface system, frontend, API behavior, agent tools, QA, and portfolio presentation.

I created a unified support workspace that ranks requests, summarizes intent and sentiment, identifies routing signals, drafts a response, and requires a human decision before sending.

The application uses Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, REST-style API route, WebMCP, Playwright. The interface is backed by a local API route for validated state changes, while browser-exposed structured tools demonstrate how an agent can inspect or update the workflow within explicit safety boundaries.

Unified multi-channel queue with SLA and status views

AI triage brief with priority, intent, and sentiment

Editable response drafts with human approval

Routing recommendation and context-readiness signals

Resolved-state workflow and API validation

WebMCP tools for queue inspection and controlled response approval

The main challenge was balancing automation speed with operator control. The design makes the AI contribution visible, keeps the response editable, and treats customer-facing delivery as a reviewed action rather than an invisible automation.

The showcase passes production build, lint, and automated browser checks for ticket selection, editing, approval, status transitions, search, empty state, responsive layout, and console errors. It proves the ability to build practical customer operations software with responsible AI assistance.

Automated acceptance covers queue selection and search, editable response drafts, human approval, API-backed resolved state, empty-state behavior, desktop and mobile overflow, and browser console errors. State changes are validated before success is shown, and customer-facing actions stay behind an explicit review step.

The project uses synthetic data and does not depend on real customer records, external AI credentials, or private service accounts. Its documented workflow and repeatable checks provide a clear basis for stabilization, review, and handoff.

I can finish an operational interface, validate mutations and state transitions, handle error and empty states, and ship repeatable browser QA alongside clear handoff documentation.

Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, REST-style API route, WebMCP, Playwright.