Canvas Compass: Visualize Your Perfect Trip, Powered by AI

Planning a trip is often a chaotic puzzle of scattered notes, endless browser tabs, and clunky spreadsheets. It’s hard to see the big picture and how one day’s activities flow into the next.

Comment

Inspiration

Planning a trip is often a chaotic puzzle of scattered notes, endless browser tabs, and clunky spreadsheets. It’s hard to see the big picture and how one day’s activities flow into the next. We've all been there—trying to mentally map out a day in a new city by flipping between a list of addresses, a map, and a budget sheet. We were inspired by this universal frustration to create a tool that transforms the messy process of planning into a clear, intuitive, and visually engaging experience. We wanted to build something that lets you see your adventure unfold, not just read about it.

What it does

Canvas Compass is an AI-powered trip planner that converts your travel ideas into a beautiful, interactive visual canvas. A user simply provides their origin, destination, and a simple prompt describing their ideal trip (e.g., "a 5-day cultural tour in Rome with a focus on ancient history and authentic pasta"). Our application then uses the Gemini API to generate a dynamic itinerary on a react-flow canvas.

Each recommendation—from restaurants and museums to hotels and parks—is represented as a distinct node on the canvas, logically connected to form a seamless journey. Clicking on any node instantly pinpoints its location on an integrated Google Map, giving users immediate geographical context. It turns planning from a chore into a creative process.

How we built it

We built Canvas Compass as a full-stack application using a modern, efficient tech stack:

  • Frontend: We used Next.js for its powerful server-side rendering and API route capabilities, and Tailwind CSS for rapid, responsive UI development.
  • The Canvas: The core of our visualization is built with React Flow, a powerful library for creating node-based graphs. This allowed us to dynamically render the itinerary generated by our AI.
  • The Brains: The magic happens in a Next.js API route that securely calls the Google Gemini API. We engineered a sophisticated prompt that instructs Gemini to act as an expert travel agent and, most importantly, return its recommendations in a structured JSON format that React Flow can directly consume.
  • Mapping: We integrated the Google Maps JavaScript SDK to provide an interactive map that syncs with the user's selections on the canvas, offering a seamless link between the itinerary and the real world.
  • Payment: Additionally, we use RevenueCat to seamlessly manage subscriptions and provide premium Pro features to enhance the user experience.

Challenges we ran into

One of our biggest hurdles was prompt engineering. Getting a generative AI to consistently return perfectly structured, error-free JSON suitable for a library like React Flow was challenging. It required numerous iterations to create a prompt that was robust enough to handle diverse user inputs while enforcing a strict output schema, including geographic coordinates for each location.

Another challenge was state management. Ensuring that the React Flow canvas and the Google Map component communicated seamlessly was complex. We had to create a centralized state that updated efficiently when a user clicked a node, without causing unnecessary re-renders of the entire page.

Accomplishments that we're proud of

We are incredibly proud of creating a genuinely novel user experience for trip planning. Moving beyond linear lists and spreadsheets to a dynamic, visual canvas feels like a true step forward.

Specifically, we're proud of successfully instructing the Gemini API to function as a structured data source for a specific frontend library. This bridge between natural language input and a highly structured visual output is the core innovation of our project. The seamless integration between the visual plan and the interactive map is an accomplishment that makes the app feel polished and intuitive.

What we learned

This project was a deep dive into the practical applications of large language models. We learned a great deal about advanced prompt engineering and the critical importance of defining a clear data contract between the AI and the application. We also gained valuable experience in integrating multiple complex libraries—React Flow and Google Maps—and managing their shared state within a Next.js application.

What's next for Canvas Compass

This is just the beginning for Canvas Compass. We envision a future where it becomes the go-to platform for collaborative and intelligent trip planning. Our roadmap includes:

  • Real-time Collaboration: Allowing multiple users to edit the same travel canvas simultaneously for group trips.
  • Budgeting Tools: Integrating budget tracking directly into the canvas nodes.
  • Booking Integration: Adding one-click links to book hotels, flights, or restaurant reservations directly from a node.
  • User Accounts & Sharing: Moving beyond local storage to allow users to save, share, and even publish their travel canvases as templates for others.

Try Canvas Compass

Ready to experience Canvas Compass yourself? Visit our website to start building your personalized travel canvas today!: https://canvascompass.app

Our payment system, managed via RevenueCat, is currently in sandbox mode for testing—feel free to try out premium Pro features using Stripe test cards (e.g., 4242 4242 4242 4242) to explore the full capabilities of the app without real transactions.

Built With

Share this project:

Updates