Vibe Travel Planner Non-conversational

#devchallenge #algoliachallenge #ai #agents

This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences

What I Built

Vibe Travel Planner is a travel discovery app that proactively assists users at every step of the trip planning workflow -- without requiring them to type a single message. While the app includes a conversational chat, the non-conversational features are where contextual intelligence truly shines.

Here's how the app injects smart assistance into the travel planning workflow:

Vibe-Coded Map Markers -- Every destination marker on the interactive map is color-coded by its primary vibe (adventure = orange, romantic = pink, cultural = purple, beach = teal, nightlife = gold, nature = green). The system automatically calculates each city's primary vibe from its Algolia index scores and vibe tags, so users can scan the map and instantly spot clusters of destinations that match their mood -- no search required.
Contextual Map Popups -- Clicking any marker surfaces a rich popup with the city image, top 3 vibe tags, culture and adventure scores, and a truncated description -- all retrieved from the Algolia index. Users get just enough context to decide whether to explore further, without navigating away from the map.
Smart Trip Setup Wizard -- When a user clicks "Plan My Trip" on a destination page, a guided 4-step wizard collects their dates, traveler count, budget level (budget/moderate/luxury), trip style preferences (Cultural Immersion, Adventure, Food & Culinary, Relaxation, Nightlife, etc.), pace, and interests. The wizard uses data from the Algolia index -- like the city's vibe tags and scores -- to generate a personalized itinerary at the end.
Score-Based Visual Indicators -- Every city card and detail page shows color-coded score badges (green for high, yellow for medium, red for low) across five dimensions: culture, adventure, nature, beach, and nightlife. Users can assess a destination's strengths at a glance without reading descriptions.
Silent Query Enhancement -- When a search doesn't return ideal results, the app automatically runs enhanced search behind the scenes -- expanding queries with vibe tag mapping, continent detection, and synonym matching. The user sees better results without knowing the enhancement happened.
Featured Destinations Grid -- The home page surfaces curated city cards with images, vibe tags, scores, and wishlist buttons, giving users an immediate browsing experience powered by Algolia-indexed data the moment they land on the page.
Multi-City Itinerary Builder -- Users can click "+ Add" on any map popup to build a multi-city trip. The map automatically draws route lines between stops, shows stop counts, and numbers the markers -- turning scattered exploration into a structured travel plan with zero typing.

Demo

Demo Video:

GitHub: github.com/prkshverma09/VibeTravelPlanner

Key Screens

Vibe-Coded Map with Legend -- Markers are automatically color-coded by primary vibe category. The legend shows all six vibe types. Users can visually scan for destination clusters that match their mood.

City Detail Page with Score Badges -- Rich destination pages surface vibe tags, color-coded score badges, LLM-generated descriptions, and a "Plan My Trip" wizard -- all powered by data from the Algolia index.

How I Used Algolia Agent Studio

Data Indexed

The Algolia travel_destinations index contains 200+ city records with rich, queryable attributes:

Vibe tags (array): semantic descriptors like "romantic," "bohemian," "hidden gem," "vibrant" -- generated by OpenAI during the data pipeline and used to calculate each city's primary vibe category
Five numeric scores (1-10): culture, adventure, nature, beach, nightlife -- these drive the color-coded score badges and the primary vibe calculation
Primary vibe (derived): the system runs calculatePrimaryVibe() which compares scores and checks vibe tags for keywords (e.g., "romantic," "honeymoon," "couples") to assign each city a dominant vibe category that determines its marker color on the map
Geolocation (_geoloc): latitude/longitude for map placement, clustering, and geo-search
Practical attributes: average cost per day, currency, safety rating, ideal trip length, language, timezone, cuisine variety, accessibility flags
LLM-enriched descriptions: 150-250 word atmospheric descriptions designed to capture each city's unique character

The data pipeline enriches raw city data through OpenAI, generates vibe tags and descriptions, then uploads to Algolia with 22 synonym sets for broader matching.

How Retrieval Enhances the Workflow

The non-conversational experience relies on Algolia retrieval at multiple touchpoints -- all invisible to the user:

Map Load -- On page load, the app fetches cities from the index and renders them as vibe-coded markers. The calculatePrimaryVibe() function uses each city's indexed scores and vibe tags to determine marker color. No user input needed.
Marker Click -- When a user clicks a marker, the popup renders data directly from the Algolia record: image, vibe tags (first 3), description (truncated to 100 chars), and score badges. The popup surfaces just enough indexed data to inform a decision.
City Detail Page -- Navigating to a city page triggers a fetch by objectID from the Algolia index. The full record powers the hero image, description, all vibe tags, all five score badges, and the "Plan My Trip" CTA.
Trip Wizard -- The wizard receives the city's Algolia data (vibe tags, scores, best time to visit) and uses it to contextualize the planning steps. The itinerary generation uses the city's score profile to theme each day.
Itinerary Building -- Adding cities to a trip via map popups triggers fetchCityById() from Algolia to get full city data for each stop, then renders numbered markers and route lines.
Query Enhancement -- When search results are sparse, the app silently enriches the query by mapping input to known vibe tags, detecting continent references (e.g., "European" adds a continent:Europe filter), and falling back through progressively broader search strategies -- all using the Algolia index's faceted attributes.

Targeted Prompting Approach

The Agent Studio system prompt is configured to support the non-conversational features by instructing the agent to:

Return structured city data that the frontend can render as visual components (cards, badges, markers) rather than prose
Include objectID references in results so the frontend can fetch full records for popups, detail pages, and trip planning
Respect the indexed score dimensions so that vibe-coded markers and score badges always reflect the authoritative Algolia data

The 22 synonym sets (e.g., "romantic" → "honeymoon, couples, love, anniversary"; "beach" → "coastal, tropical, seaside, island") ensure that even the non-conversational browsing experience benefits from broad query matching when the user does type a search.

Why Fast Retrieval Matters

In a non-conversational experience, the user isn't waiting for an AI to "think" -- they expect the interface to simply work. Every interaction that feels sluggish breaks the flow:

Map markers must appear instantly -- When the page loads, users see a world map with 200+ vibe-coded markers. Algolia's fast retrieval means the initial data fetch completes before the map tiles finish rendering. The markers are already there when the map appears.
Popups must feel native -- Clicking a map marker should open a rich popup (image, tags, scores, description) with zero perceived delay. Because the Algolia fetch resolves in under 100ms, the popup feels like it was always there -- not like it's loading remote data.
City detail pages must load complete -- Navigating to a destination page fetches the full Algolia record by objectID. Fast retrieval means the hero image, description, vibe tags, and score badges render in a single paint -- no progressive loading or skeleton states visible to the user.
Multi-city trip building must be fluid -- Adding multiple cities to an itinerary triggers individual Algolia fetches for each city. With sub-100ms response times, users can rapidly click "+ Add" on several markers and see the route update in real-time without waiting between stops.
Silent query enhancement must stay silent -- The fallback search strategy (vibe tag expansion → continent filtering → broader query) runs multiple Algolia searches in sequence. Because each search is fast, the entire multi-strategy pipeline completes before the user notices -- the enhanced results just appear.

The result is a travel planning workflow where Algolia-powered intelligence is everywhere but visible nowhere. Score badges, vibe-coded markers, contextual popups, and smart itinerary building all feel like native UI features -- not AI-powered lookups. That's the power of fast, contextual retrieval in a non-conversational experience.