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.

Features

  • 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.

Tech

Next.js · React · TypeScript · Tailwind CSS · Framer Motion · Vercel AI SDK · Zod · OpenAI GPT-4o-mini

Previous
Previous

TP-7

Next
Next

DiscordNotifications