Ann Hui - Generative UI Global Hackathon: Agentic Interfaces
AI Tinkerers - Hong Kong
Hackathon Showcase

Ann Hui

2 members Watch Demo

SiteSense is a generative urban analysis copilot that turns natural-language planning questions into dynamic, map-based story interfaces. Instead of asking users to navigate a static GIS dashboard with predefined layers and charts, SiteSense lets a user type a prompt such as “Analyze places of worship in Kowloon” or “Analyze public toilets in Mong Kok.” The agent then parses the request, identifies the urban feature and study area, generates an analysis plan, queries OpenStreetMap through the Overpass API, performs lightweight spatial analysis, and renders a custom storymap-style interface with a live map, summary metrics, narrative chapters, and planning takeaways.

The project addresses a real problem in urban planning and civic analysis: early-stage spatial investigation is often fragmented across GIS tools, map layers, datasets, and written reports. SiteSense compresses this workflow into one prompt-driven experience. The generated interface changes depending on the user’s request, so the output is not a chatbot response or a fixed dashboard, but a task-specific planning surface.

Our working prototype supports real OSM-based analysis for selected Hong Kong urban features such as places of worship, schools, public toilets, hospitals/clinics, and libraries. It includes prompt parsing, an agent planning screen, Overpass data fetching, GeoJSON conversion, MapLibre map rendering, metric cards, generated report chapters, loading/error states, and fallback demo data for reliability.

Technically, SiteSense is built with a React/Next.js frontend, Tailwind CSS for the interface, MapLibre GL JS for interactive map rendering, OpenStreetMap/Overpass API for spatial data, and lightweight JavaScript analysis utilities for counts and distribution summaries. We implemented an A2UI-inspired generative UI schema: the agent does not only return text, but outputs structured UI instructions describing the surface to render, such as an analysis plan, map story, metric cards, and narrative chapters. The frontend then renders these schemas into interactive components. We also use an AG-UI-style event flow to make the agent process visible: user prompt → intent detection → analysis plan → data query → generated storymap. CopilotKit/Gemini can be integrated as the agent layer for prompt interpretation and narrative generation, while the current MVP keeps a robust rule-based fallback to ensure the demo works end-to-end.

SiteSense fits the “Kill the Dashboard” track because it replaces static urban analytics dashboards with prompt-generated, interactive spatial reports tailored to each planning question.