Canopi - Find your place. Not just an apartment.

timeline: 2026
tech stack: Next.js, React, TypeScript, Gemini AI, Mapbox GL, Three.js, Supabase, Tailwind CSS, ElevenLabs, Vultr
Overview
Canopi is an AI-powered rental discovery platform that replaces traditional filters with conversation. Instead of searching by beds and price, users talk to an AI assistant that infers their lifestyle across 8 preference axes — walkability, nourishment, wellness, greenery, buzz, essentials, safety, and transit. A live radar chart updates in real time as the AI learns who you are, and the map re-ranks 200+ real Canadian listings to match your actual life, not just a checkbox of constraints.
How It Works
Canopi is built on three connected systems. A data pipeline scrapes 200+ rental listings from RentFaster, geocodes each address through Nominatim, and enriches it with nearby amenities from the Overpass API — cafés, gyms, parks, schools, pharmacies, transit — counted inside a 1 km radius. Gemini 2.5 Flash normalizes the messy listing text into a consistent schema.
At runtime, an AI chat layer drives the experience. A Next.js API route sends each user message to Gemini with a system prompt that forces structured JSON output: a natural-language reply, a delta across the 8 lifestyle axes, and a ranked list of matching listing IDs. The chat asks indirect, personality-revealing questions — "what does a good Sunday morning look like?" — instead of interrogating the user about square footage.
The frontend ties it together. A Mapbox GL map renders price pins and flies to AI-recommended listings, a hand-rolled SVG radar chart animates as preferences shift, and a Three.js diorama renders a 3D neighborhood vitality view for any selected property. Supabase handles auth and persists saved listings, and ElevenLabs adds optional voice input/output in English and French. The backend runs on a Vultr cloud instance in Toronto, secured with Tailscale.

Architecture
The pipeline, AI layer, and frontend are loosely coupled through a small set of Next.js API routes. Offline scraping and enrichment produce a single static JSON artifact; at runtime, chat messages flow into Gemini and come back out as structured preference deltas that drive the map and radar chart.
loading diagram…
Results
We shipped a fully working AI-to-map feedback loop — talk to the assistant, watch the map change. The platform serves 200+ real, enriched Canadian rental listings with smooth sub-second re-ranking on every preference update, a hand-rolled 8-axis radar chart that animates as the AI learns you, voice input/output, French language support, a 3D neighborhood diorama, and Supabase-backed saved listings. The biggest challenge was data acquisition — rental platforms in Canada are fragmented and hostile to reuse, so we had to fight through inconsistent formats, missing fields, and freeform descriptions before we could even start on the product.
