Kensho AI

Kensho AI: Travel itineraries built from your cultural DNA. Powered by Qloo Taste AI and Gemini.

Comment 2

Inspiration

We love to travel. But somewhere between the endless blog posts and the top-10 lists, travel became a checklist. An experience designed for everyone, which means it’s perfect for no one. What if your journey could be as unique as your taste in film, music, and art? What if your trip was a story, written just for you? Introducing Kensho AI. The AI travel app that doesn't just plan your trip—it authors your story!

What it does

Kensho AI is an intelligent travel application that redefines personalization. Instead of generic top-10 lists, it generates deeply personal, narrative-driven travel itineraries based on a user's unique cultural tastes. Users input their destination along with "cultural anchors"—like a favorite movie, musical artist, or book—to define their personal "vibe."

The application presents these AI-powered recommendations in two main views:

  • The Cultural Compass: A dynamic dashboard where users can visually explore locations that match their taste, sorted by relevance and category.
  • The Map Interface: An interactive map that pins all itinerary items, provides detailed location info, and features an AI Tour Guide to help with planning and discovery on the fly.

A key feature is the "AI Autoplan," which allows users to give a simple description of their desired trip, like "a romantic evening with great food," and Gemini will intelligently select the most relevant locations from the user's recommendation list to build an instant itinerary.

How we built it

Kensho AI is a modern, frontend-only, serverless web application, demonstrating how much can be achieved directly on the client.

  • Frontend: The interactive dashboard was built with React and TypeScript, using Vite as the build tool. The polished and responsive UI was crafted with Tailwind CSS, and icons are provided by the excellent Lucide React library.
  • Client-Side Data Persistence: All user data, including preferences and itineraries, is persisted directly in the browser using IndexedDB (kenshoDb). This provides a robust, database-like experience on the client, with a graceful localStorage fallback and a built-in migration strategy to ensure data continuity for returning users.
  • AI & API Integration: All API calls are made directly from the client.
    • Qloo: User's cultural anchors are formatted into URNs and sent via a POST request to Qloo's /v2/insights endpoint. This retrieves a ranked list of culturally correlated places within a 15km radius of the user's chosen destination.
    • Gemini: For features like "AI Autoplan" and the "AI Tour Guide," we use the official @google/genai library to query the gemini-2.5-flash model. We provide Gemini with a rich context, including user preferences and Qloo's recommendations, to generate intelligent, narrative-driven responses.
    • Mapping: The interactive map view is powered by Mapbox GL JS, allowing for custom markers, route displays, and a highly performant user experience.

Challenges we ran into

  1. Secure API Key Management: Managing API keys in a frontend-only application was a primary concern. For this hackathon build, we utilized environment variables via Vite. We recognize that for a production app, this architecture would be enhanced by a lightweight backend proxy or serverless function for secure key management and to prevent client-side exposure.

  2. Complex Client-Side State Management: With user inputs, Qloo recommendations, a multi-day itinerary, and map data all needing to interact, managing state was a significant challenge. We leveraged React's useState and useEffect hooks extensively, implementing debouncing for user inputs and creating our robust IndexedDB persistence layer to ensure a smooth, responsive user experience without losing data between sessions.

  3. Handling Imperfect LLM Responses: The "Autoplan" feature relies on Gemini returning a perfectly formatted JSON array of location IDs. We quickly discovered that the model would occasionally add explanatory text or markdown, which would breadk a standard JSON.parse().

    • Solution: We implemented a more resilient parsing strategy. Our code now uses a try-catch block, and if the initial JSON parse fails, it falls back to a regex-based search to extract the IDs from the string. This defensive approach ensures the feature works even when the LLM's output isn't perfectly structured.

Accomplishments that we're proud of

  1. Robust Client-Side Architecture: We are extremely proud of building a complex, data-rich application that runs entirely in the browser. The implementation of IndexedDB for data persistence with a localStorage migration path shows a deep consideration for user data continuity and a high level of technical execution on the frontend.

  2. Truly Responsive, Mobile-First UI: The code features distinct components and logic for different screen sizes (e.g., MobileRecommendationCard vs. DesktopRecommendationCard, and different chat layouts). We successfully built two tailored UI experiences—a touch-friendly, streamlined layout for mobile and a multi-panel "command center" for desktop—from a single, responsive codebase.

  3. The 'AI Autoplan' Feature: This feature represents a sophisticated, multi-step AI workflow (User Input -> Qloo Analysis -> User Refinement -> Gemini Selection -> Final Itinerary). It's a powerful demonstration of how multiple AI systems can work together to create a simple and magical user experience.

What we learned

  1. Defensive AI Implementation is Key: Our experience with the Autoplan feature taught us to anticipate and handle imperfect or unexpectedly formatted LLM responses. We learned that when integrating AI, it's crucial to build resilient, fault-tolerant parsing logic rather than assuming a perfectly structured output every time.

  2. TypeScript is Essential for Complex Data Flows: Using TypeScript was invaluable. It helped us manage the complex data structures from the Qloo and Gemini APIs, our internal itinerary state, and the map interface. This prevented countless potential bugs and made the integration between disparate components much smoother and more reliable.

What's next for Kensho AI

We see Kensho AI as a powerful foundation with exciting possibilities for expansion.

  1. Implement a Secure Backend Proxy: Our immediate next step for a production-ready environment is to build a lightweight backend proxy (e.g., using Cloudflare Workers or Google Cloud Functions) to securely manage API keys and handle third-party API interactions.

  2. Expand the Map & AI Tour Guide: We plan to enhance the MapInterface by empowering the AI Tour Guide to perform actions. Users could ask, "Plan the most efficient route to visit all my locations for Day 1," or "I'm feeling tired, can you replace my afternoon plan with something relaxing nearby?" The AI would then dynamically update the itinerary state and the map display.

  3. Community & Sharing Features: We envision allowing users to save and share their AI-authored travel stories and itineraries. This would create a community where travelers can discover unique, culturally rich journeys created by others with similar tastes.

Built With

Share this project:

Updates