toolsDetail.backToAllTools
toolsDetail.projectRecordtoolsDetail.categories.mapsTraveltoolsDetail.statuses.openSourcetoolsDetail.updatedOn

Thailand Graffiti Planner

A voice-driven, Maps-grounded day planner for chasing down street art across Thailand.

Talk to it like a friend who knows the scene: describe the kind of street art you're chasing, and it pulls real Google Maps data and frames every stop together on a photorealistic 3D map so you can see how a day's tour actually fits together.

toolsDetail.overview

Thailand Graffiti Planner is a voice-first trip planner built around a simple idea: coordinating a day of graffiti and street-art hunting shouldn't mean juggling a dozen browser tabs and a paper map. Instead, you talk to it out loud, and Gemini's Live API carries a real-time, bidirectional conversation while the app quietly does the legwork of finding, grouping, and mapping out spots in and around Thailand.

Under the hood, the planner never invents a location. Every suggestion is pulled through Grounding with Google Maps, which searches live Places data and hands back real names, coordinates, and details for the model to talk through. When a spot comes up in conversation, the app fetches its exact position from the Places library and drops a marker for it, so what you hear about and what you see on the map always match.

The map itself is the centerpiece: a photorealistic Google Maps 3D view that reacts to the conversation instead of waiting for you to click around it. Ask about a neighborhood and the camera flies to an establishing shot of the area. Build out a shortlist of locations and the app frames all of them in a single shot, using elevation-aware camera math to tilt, zoom, and pad the view so nothing sits hidden behind the on-screen conversation panel. That's the practical version of "grouping and mapping a tour" — seeing how a cluster of spots actually sits relative to each other before you commit to a route.

It's an open-source, early-stage build forked from Google's AI Studio "Interactive Day Planner" template and repositioned specifically for Thailand's street-art scene. The core conversational flow and tool set are the same voice-plus-grounding architecture the template ships with; the graffiti framing is the starting persona and use case, and the project is set up to be extended — new personas, new tools, and a more purpose-built graffiti-touring flow can be layered on through the same system prompt and tool registry pattern the template demonstrates.

toolsDetail.keyFeatures

Voice-driven planning

Powered by the Gemini Live API, the whole experience runs as a real-time spoken conversation — describe what you're after and get a spoken, natural-language response back, with live transcription shown alongside the map.

Grounded in real Google Maps data

Place suggestions come from Grounding with Google Maps, not the model's imagination. Every mentioned spot is resolved to a real Place ID and pulled through the Places library for its actual coordinates and details.

Multi-stop framing on a 3D map

A dedicated frameLocations tool lets the model fly the camera to a wide establishing shot of a city or area, then frame an entire shortlist of stops together in one view once you've built out a plan.

Elevation-aware camera math

A custom lookAtWithPadding utility calculates camera center, tilt, and range from the geography of your selected points, accounting for altitude and for the UI panels covering part of the screen, so the framing stays clean on any layout.

Reactive, state-driven map updates

Markers and camera moves aren't pushed directly from the AI tool calls — they update a shared app state, and the map reacts to that state. It's a decoupled pattern that keeps the map view consistent no matter which tool triggered the change.

Built to be extended

The system prompt and tool registry are cleanly separated, so the graffiti-touring persona can be swapped, tuned, or expanded — the underlying template already demonstrates this by shipping a completely different "scavenger hunt" persona on the exact same toolset.

toolsDetail.architecture

FrontendA React 19 single-page app built with Vite, using Zustand for shared state across the conversation log, map markers, and camera targets.
Maps integration@vis.gl/react-google-maps loads the Google Maps JavaScript API, with a custom React wrapper around the experimental gmp-map-3d web component for the photorealistic 3D map view, plus the Places, Geocoding, and Elevation APIs.
AI / voice layerGemini Live API via the @google/genai SDK, wrapped in a custom client that manages the connection lifecycle and streams audio, transcription, and tool-call events in real time.
Location data sourceNo static or curated graffiti database — every place comes from a live Grounding with Google Maps query at conversation time, keeping results current with what's actually on Google Maps.
HostingShips as a static Vite build that runs entirely client-side against a Gemini API key and Google Maps Platform key — no dedicated backend service.
React 19TypeScriptViteGemini Live API@google/genai@vis.gl/react-google-mapsGoogle Maps Photorealistic 3D MapsZustand

toolsDetail.bottomCtaQuestion

toolsDetail.browseAllTools