An AI-powered prototype that turns messy citizen complaints into structured, routed municipal service tickets in real time.
Type any neighborhood issue in plain English — a pothole, a broken streetlight, a noise complaint, or all three at once — and the system parses it, assigns the right city departments, sets priority levels, and generates a friendly confirmation message. No forms, no dropdowns, no jargon.
Natural language input — citizens describe problems in their own words
AI-powered parsing — GPT-4o-mini splits multi-issue complaints into distinct tickets with departments, priorities, locations, and ETAs
Structured output — Zod schema validation ensures the AI always returns clean, typed data ready for a database
Color-coded priority system — Urgent, High, Normal, and Low tickets are visually distinct at a glance
Submission history — past reports persist locally with one-click recall
Graceful fallback — works with or without an AI connection via keyword-matching mock data
Micro-interactions — scanning line loader, staggered card reveals, and layout animations using Framer Motion
How It Was Built
Built with Next.js 15 (App Router), React 19, TypeScript, and Tailwind CSS. The AI integration uses the Vercel AI SDK's generateObject function, which forces the LLM to return structured JSON matching a predefined Zod schema — no regex parsing or prompt fragility. The design follows a minimalist, hardware-inspired aesthetic with stark contrast, purposeful whitespace, and zero visual clutter. Deployed on Vercel with server-side API key management.
Next.js · React · TypeScript · Tailwind CSS · Framer Motion · Vercel AI SDK · Zod · OpenAI GPT-4o-mini