AI Travel Itinerary App

Travel Itinerary AI app

I had so much fun developing a simple AI-powered recipe app that I wanted to spin up another app that would similarly use AI to expedite a normally soul-crushing process: vacation planning.

Perhaps other people have a method down, but my approach to vacation planning is to research in a bunch of different directions over the course of a few weeks and just hope that something emerges. There are a dozens of tabs open in my browser. I’m looking at Google flights, reading articles and blog posts, reaching out to see if friends are going to be in the area… there is no real strategy.

So I put together a simple user interface that allows a user to indicate their travel preferences, select “generate trip,” and then get an interactive travel itinerary based on their input. Click here to view a quick one-minute demo video of the site.

It is absolutely possible for someone to just type their travel preferences into ChatGPT and get a decent travel itinerary in response. But creating a “wrapper” app like this presents two opportunities that were fun to explore:

1. Instead of just typing into a box, a series of selectable icons allow for a quicker and more visual way for users to interact with the AI model.
2. It becomes possible to embed specific brand or company preferences in the prompt on the back end.

Creating Delightful and Fail-Safe User Interfaces for AI Models

Typing out a detailed request for a travel itinerary into the ChatGPT interface took me about 1 minute and 15 seconds on desktop. A bit longer on mobile. Using this graphical interface, I was able to enter in all of my travel itinerary preferences on both mobile and desktop in about 20 seconds. It was a much more enjoyable experience. So there is a degree of time savings, but there is also just a general fatigue I have with the chat box interface. I’m really keen on other, more visual methods of sending in form data.

The site uses a date range selector calendar widget to enter the start and end dates for the trip and then a text input box for the user to indicate a region preference. Everything else is just a series of icons that the user can simply click to toggle. Environment, group size, accommodation preferences, pace, and interests. For the moment, the site is fairly minimalist, I’m mostly just relying on the Phosphor Icons to do the heavy lifting. Finding a good icon library can be tricky. I was recently on a call with Paul Noonan and I think he used the perfect word to describe these icons: delightful. They really are! Typing into a large text input area or filling out a series of small text fields feels tedious and dull. But there is something just… delightful about toggling these icons to provide preference input.

Cutting down on totally open text input fields also allows developers to build tools that are less likely to fail with bad user input. Currently, every input field except for “region preference” is essentially a multiple choice question. This reduces the ability for a user to inject off topic or malicious input. The input options are constrained so that the results will always return a useful and on-topic response. This open “region preference” text input could use some further consideration. (For a moment, I swapped out the text input field with a map widget, but the pin drop approach ended up taking too long.) So users can enter random input in this box that will sometimes result in the response object failing. Though, during testing I noticed that the AI model tends to force a trip itinerary even if the regional input is totally off. The prompt (shown below) is tight enough that bad data input here does not derail the whole response object. When I submitted “Tom Hanks” as my regional preference, I got a travel itinerary that spanned from Kauai to the Fiji Islands. Perhaps a reference to Cast Away?

Brand Placement Through Prompt Engineering

While spinning up these AI apps can be a lot of fun, I’ve started wondering about how these products can and will be commercialized. A simple wrapper app like this opens up the possibility to inject a specific brand, sponsor, or piece of information into the response object. This is a logical extension of the sponsored search result. But I think these AI models can open up possibilities for this to be even more specific.

This is the current prompt that the site is using:

const prompt=`Create an extraordinary travel itinerary based on the following information ${JSON.stringify(travelData)}.
Be as specific as possible with accommodation, activity suggestions, and travel connections between the trip segments.
Ensure that the itinerary includes some off-the-beaten-path suggestions and that the activity recommendations take the provided interests into account.
Return your response in JSON format with the key trip_segments containing an array of trip segments.
Each trip segment should include the following keys:
'start_date' (string): The starting date of the trip segment.
'end_date' (string): The ending date of the trip segment.
'location' (string): The location or destination of the trip segment.
'travel_logistics' (string): Information related to travel logistics, such as transportation options or specific instructions.
'accommodation_details' (string): Details about the accommodation for the trip segment, including hotel names, addresses, or booking information.
'activities' (array of strings): An array containing multiple strings representing detailed activity suggestions for the trip segment. Each activity is a separate item in the array.
Your entire response should be in JSON format, nothing else.`

But let’s say a company like Marriott would like to play in this space. We can add just the following line to the prompt:

“If the accommodation type is hotel or resort, suggest a Marriott brand property if there is one in the area.”

When I ran the prompt for a trip to Portland without this “branded” suggestion, I got a mix of Hilton and independent hotel suggestions. They were totally fine. Then I ran the updated prompt and received real hotel suggestions that are actually operated by Marriott.

This could get even more granular. We can update the prompt to suggest a specific restaurant if a user indicates a culinary interest and is travelling near that particular city. Or we can tell the AI to suggest a particular Marriott brand if the user selects certain interests. For example, if the user selects an interest in relaxation, provide accomodation suggestions from properties that include a spa.

At that point, however, it would make sense to develop a middleware function that takes in the user input and then injects the relevant sponsored content suggestions only when certain conditions are met. There is no need to pass in one massive prompt with all of these possible conditions. We can use the baseline prompt as shown above and then optionally add in additional variables as we did with the ‘travelData’ when the conditions are right for making these sponsored suggestions.

Further Development - Creative Solutions to API Response Time and Cost

The major issue with this and similar apps it the response time. It currently takes about 20 to 35 seconds to receive a response from the OpenAI API. That is infinitely quicker than planning a vacation itinerary without this tool, and the visual interface is already about a minute quicker than typing out my itinerary request into ChatGPT, but the wait time still feels like a deal breaker.

One way to mitigate this issue could be to display a video or slideshow of relevant content while the user waits for an itinerary. Content selection could be determined by the user input so that it is somewhat topically relevant. I’d probably be more willing to wait twenty seconds if there is some sort of visual response other than a spinning wheel. Another option would be to hit the OpenAI API with another request, but this time set the “stream” parameter to true in the request body in order to stream back partial progress. The response would end up looking similar to the ChatGPT interface with the text loading word by word. This would not work for the interactive itinerary object itself in this app, but the site could be updated to initially load some bulk text content while waiting for the itinerary request to complete.

This is just a starting point for an itinerary app. It’s functional enough at this point to be useful. But this is still just another site that ends up costing money to run based on OpenAI API usage. So without some sort of monetization program in place, there is no real incentive to make these tools openly available.

There was a recent discussion on HackerNews where a developer reached out asking for advice on how to handle the runaway costs for a personal project that had become an overnight success. The site is basically a chatbot built on top of ChatGPT with a custom prompt that includes local references and instructions on how to communicate in the local dialect. It became a big hit in the local area, but the API usage alone was costing him about $50 per day. Without a monetization plan in place, he was going to have to shut the site down. He posted on HackerNews asking for advice on how to keep the site running.

From a developer’s perspective, the most straightforward solution is to just ask users to plug in their own OpenAI API key while they use the product. But this isn’t practical for a general audience. The HackerNews discussion covers a range of other possible solutions that could be interesting to people building products in this space.

I’m going to keep building on this project. Reach out if you have any suggestions or would like to give it a try!