DEV Community

Cover image for CaravanAI: Bringing Conversational Etiquette to Passion-Driven Travel
hnn
hnn

Posted on

CaravanAI: Bringing Conversational Etiquette to Passion-Driven Travel

#devchallenge #weekendchallenge #ai #googleaichallenge

DEV Weekend Challenge: Passion Edition Submission

This is a submission for Weekend Challenge: Passion Edition

What I Built

Every great journey starts with a spark—a passion for tasting an authentic local dish in a hidden alley, the adrenaline rush of an extreme peak, or the quiet reverence of standing inside a thousand-year-old ruin. Yet, modern travel planning feels like filling out a sterile spreadsheet. Standard AI travel assistants often feel mechanical, prompting users with rigid forms, interrupting mid-sentence, or spitting out generic, recycled itineraries.

For this challenge, I built CaravanAI, a next-generation travel companion that treats travel planning not as a logistical chore, but as an enthusiastic, deeply respectful conversation about what you love. It listens to your inner explorer and crafts tailored itineraries driven entirely by your specific passion.

Demo

You can watch the full video demonstration of CaravanAI here:

Code

You can explore the full codebase, review the frontend modular logic, and check out the implementation details here:

How I Built It

CaravanAI is a lightweight, blazing-fast web app engineered with a modern architecture utilizing zero heavy frameworks to keep the interaction completely frictionless.

The Philosophy: "Conversational Etiquette"

In our rush to make AI faster and smarter, we forgot to make it respectful. In human culture, conversation has an "adab" (etiquette)—a natural, rhythmic ebb and flow. A core architectural pillar of CaravanAI is its unique Turn-Based Voice Interface, designed around two strict principles:

  1. Listening with Intent: When the mic is open and it is your turn to speak, CaravanAI listens patiently without cutting you off.
  2. Deaf Processing: The moment the AI begins processing or speaking, its microphone is completely decoupled and disabled. It will never hear its own voice feedback, it will never awkwardly speak over you, and you cannot barge in to brutally mute it mid-sentence.

By engineering this hands-free, turn-based barrier, we strip away the chaotic noise of standard voice bots, ensuring a calm and focused environment.

The Tech Stack & Architecture

  • Frontend Core: Vanilla JavaScript (ESM), HTML5, and CSS3. The UI leverages modern CSS variables and a custom glassmorphic layout to construct a futuristic dashboard.
  • Native Voice Transcription: Handled seamlessly via the browser's native Web Speech API to ensure immediate, zero-latency local speech-to-text conversion.
  • Tooling: Bundled with Vite for rapid local module loading and deployment optimization.

Local Setup Instructions

Clone the repository and enter the directory:

   git clone [https://github.com/retsnom12/travelagent.git](https://github.com/retsnom12/travelagent.git)
   cd travelagent
Enter fullscreen mode Exit fullscreen mode

Install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Configure Environment Variables (Create a .env file in the root directory):

VITE_GEMINI_API_KEY=your_gemini_api_key_here
VITE_ELEVENLABS_API_KEY=your_elevenlabs_api_key_here
Enter fullscreen mode Exit fullscreen mode

Boot up the local server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:5174 in your Chrome browser to start talking to CaravanAI.

Prize Categories

Best Use of Google AI
CaravanAI heavily relies on the Google Gemini API (gemini-1.5-flash) as its core brain. It processes the custom combination of budget, destination, and the user's core passion to structure structural, tailored itineraries. To prevent hallucinations, the engine is paired with dynamic contextual grounding, injecting live verified destination data directly into the LLM context window.

Best Use of ElevenLabs
To bring the travel agent's enthusiastic personality to life, I integrated the ElevenLabs API for premium voice synthesis. This provides ultra-natural, emotionally responsive human-like speech generation. The centerpiece of CaravanAI(a dynamic, glassmorphic UI Voice Orb)reflects the AI's current cognitive state in real-time, pulsing vibrant orange while Gemini is synthesizing your route and rippling into bright turquoise while ElevenLabs is speaking to you.

Top comments (0)