Drift — AI Neighbors on the Map

an AI-powered interactive city map application where AI characters live on a real map and help users explore cities like a local.

Inspiration

We've all been the new person in a city. You open Google Maps, see 200 pins, and have no idea which ones matter. Star ratings don't tell you that the café on the corner has a loyalty card they don't advertise, or that the market is completely different on Saturdays versus Tuesdays, or that the best view of the sunset is from a bench nobody knows about.

Locals know these things. But locals are people, and people don't scale.

So we asked: what if every neighborhood had an AI character who actually lived there? Not a chatbot. Not a search engine. A person — with opinions, blind spots, gossip, and a genuine knowledge of their corner of the city.

That's Drift.

What it does

Drift is an interactive city map with 29 AI characters placed at real locations across Melbourne — from a third-generation Italian chef on Lygon Street to a street artist in Hosier Lane to a food writer in Footscray Market.

Each character:

Has a unique personality — distinct voice, backstory, quirks, and opinions
Knows their neighborhood — powered by Google Places API with real photos, ratings, and live open/closed status
Remembers your conversations — relationship scores build over time from stranger to close friend
Gossips with other characters — mention one agent to another and they react. Information travels through the network like a real community
Changes with the time of day — a barista is cheerful at 7am, a DJ is asleep until noon, a nurse works night shifts
Reacts to your proximity — walk close to an agent on the map and they wave at you with a personalized greeting

When an agent recommends a place, you get a rich place card with the photo, rating, address, open status, and one-tap directions. Every conversation also surfaces nearby events happening in real time.

How we built it

Backend (Node.js + Express + Socket.IO):

The core is a 5-layer prompt architecture for each AI agent:

Personality layer (cached) — backstory, traits, speech style, few-shot example conversations
Relationships layer (cached) — what this agent thinks about other agents
Local knowledge layer — Google Places API results + hardcoded insider tips, merged and deduplicated
Memory + gossip layer — what the agent remembers about this user + what other agents have said
Context layer — current time, agent's mood/activity, user's proximity

Layers 1-2 are cached using Claude's prompt caching (saving ~90% on repeat calls to the same agent). Layers 3-5 are rebuilt every message for freshness.

The gossip engine tracks cross-agent mentions bidirectionally — if Vinnie mentions Mei to you, that's stored. When you talk to Mei, her prompt includes "Vinnie recently told this user about you." She reacts naturally.

The activity system runs on a 5-minute loop, updating all 29 agents' moods and activities based on their time-of-day schedule. A tram driver is cheerful during morning rush. A street artist is asleep until noon. A PhD student is delirious at 2am.

Frontend (React + Vite + Tailwind + Mapbox GL):

The map renders 29 agent markers with breathing CSS animations, proximity-based glow effects, and Lottie character animations. Clicking an agent opens their card with live events nearby (filtered within 5km using haversine distance). Chatting surfaces place cards with Google Places photos and a "More places nearby" carousel.

WebSocket handles all real-time communication — typing indicators, gossip toast notifications, proximity enter/leave events, and agent wave greetings.

AI Characters:

We wrote 29 distinct characters across two datasets:

8 Monash Clayton campus characters (a retired professor, a sleep-deprived CS student, a boot camp coach, a mysterious figure on the Rainforest Walk)
21 Melbourne city characters (a Lygon Street chef, a QVM dumpling queen, a Route 96 tram driver, a Hosier Lane street artist, a Flinders Street busker)

Each character has 4-6 personality traits, a multi-paragraph backstory, a unique speech style, 4-5 quirks, pre-seeded relationships with other characters, time-based behavior schedules, and a proximity greeting.

Challenges we faced

Making 29 agents feel distinct. It's easy to make one good AI character. Making 29 that don't blur together required careful personality engineering — specific speech patterns, few-shot examples, and behavioral rules. A 72-year-old Italian chef and a 24-year-old startup founder should never sound alike.

Place detection in natural language. When an agent says "grab a coffee at Grafali's", we need to match that to the place ID "grafalis" to build a card. But agents don't use formal business names — they say "Wholefoods" not "Monash Wholefoods Co-op", "GYG" not "Guzman y Gomez (GYG)". We built an alias system and fuzzy name matching to bridge this gap.

Gossip without hallucination. The gossip engine needs agents to reference each other naturally without making up information. We seed real storylines (a WiFi war between buildings, a 6am boot camp rivalry) and track dynamic mentions per-user, so gossip stays grounded in actual conversations.

Prompt caching economics. With 29 agents, naive API calls would be expensive. Each agent's personality prompt exceeds 1024 tokens (the caching minimum), so Claude caches them after the first call. Subsequent calls to the same agent within 5 minutes cost 90% less.

What we learned

Characters beat features. The moment our agents started gossiping about each other unprompted, we knew we had something. Technical features impress developers. Characters create emotional connection.
Real data makes AI believable. Agents that mention actual places with real photos and ratings feel 10x more trustworthy than agents making generic recommendations.
Prompt architecture matters more than model choice. The 5-layer system with caching, memory injection, and gossip context makes Claude Sonnet feel like 29 different people. The model is the same — the prompt engineering creates the illusion.

What's next

More cities — the architecture is city-agnostic. Adding Sydney, Tokyo, or London is one JSON file per city
User-generated characters — let communities create their own neighborhood agents
RAG pipeline for live events — scrape real event feeds instead of curated data
Voice mode — let agents speak with distinct voices matching their personalities
Mobile app — GPS-based proximity instead of click-to-move ```

Built with

Claude API, Node.js, Express, Socket.IO, React, Vite, Tailwind CSS, Mapbox GL JS, Google Places API (New), Lottie, JavaScript, Anthropic Prompt Caching

"Try it out" links

Link 1: [Live Demo] https://driftmap.netlify.app/
Link 2: [GitHub — Backend] https://github.com/JosephKS10/Drift-Interative-Map-Application-Backend
Link 3: [GitHub — Frontend] https://github.com/JosephKS10/Drift-Interative-Map-Application-Frontend