Are you tired of spending hours researching and planning your next trip? What if you could build an AI travel planner app that generates a personalized itinerary based on your preferences? In this article, we'll show you how to integrate OpenAI's GPT-3 API with Altogic and React to build an AI travel planner app that will revolutionize the way you plan your trips. With personalized recommendations and responses to user input, your customers will be happier, and your revenue will increase. Follow our step-by-step guide to become a leader in the travel industry and build your own AI travel planner app today.

Before we start
Before we dive into the code, let's take a look at the technologies we'll be using in this tutorial.
OpenAI
OpenAI is a San Francisco-based artificial intelligence research company that aims to make artificial general intelligence (AGI) safe and beneficial for humanity. OpenAI's GPT-3 API is a natural language processing (NLP) API that uses machine learning to generate text. It can be used to generate text in a variety of domains, including travel planning.
tip
If you want to learn more about use cases and OpenAI's GPT-3 API, you can check out our OpenAI GPT-3 API Integration article.
React
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. We have also used styled-components
to style our React app.
Altogic
Altogic is a serverless backend platform that allows you to build and deploy fully functional backend applications without writing any server-side code. Altogic provides a set of APIs that you can use to build your own backend. You can use Altogic to build a backend for your React app, or you can use it to build a backend for any other frontend framework or programming language.
Building the Frontend
The first step in building an AI travel planner app is to create the frontend. For this, we will be using React. You can get the React repo from Github for the frontend at
Github Repository: https://github.com/zinedkaloc/ai-travel-planner
You can clone the repo by running the following command in your terminal:
$ git clone [email protected]:zinedkaloc/ai-travel-planner.git
Switch to the app directory by running the following command:
$ cd ai-travel-planner
Once you have the repo, open it in your code editor of choice. Install the necessary dependencies by running the following command in your terminal:
$ npm install
info
To get started, you will need a REACT_APP_ENDPOINT_URL
environment variable that points to your Altogic and OpenAI ChatGPT API. You can get this URL by following the steps in the next section.
Building the Backend
The next step is to build the backend. For this, we will be using Altogic. If you don't have an Altogic account, you can create one for free at https://altogic.com. Once you have an account, you can create a new project by clicking on the "New Project" button on the workspace. Give your project a name and click on the "Next" button and then click on the "Create" button to create your project.

note
By selecting the Basic Template
option, you can create a project with a basic user
model and authentication system. You can also select the Blank Template
option to create a project without any boilerplate code.
Once your project is created, you can create a new API by clicking the Endpoints button on the left sidebar.
- Give your API a name like
Travel itinerary endpoint
- Set endpoint URL for
/travel
, - Select the POST method,
- In the Routed Service section,
select
Add new no-code service
and fill the service name asTravel itinerary
and click on the Create button.

Click the Service name
Travel itinerary
from the endpoint page to open the service Designer.In the Designer, click on the
Start
node and select theRequest Body Structure
option as aCustom Model
and add field name asprompt
and field type asText
from the right sidebar.

Click the Marketplace tab on the Nodes Library and search for
OpenAI
to find theCreate Chat Completion
service and drag and drop it to the Designer. Connect theStart
node to theCreate Chat Completion
node.Select the
Create Chat Completion
node and fill theAPI Key
field with your OpenAI API key. You can get your API key from the OpenAI dashboard.Set
Model id
as'gpt-3.5-turbo'
Set
Messages
as following JSON:
[
{
"role": "user",
"content": {{CONCAT(input.body.prompt, "Format your response using Markdown. Use headings, subheadings, bullet points, and bold to organize the information.")}}
}
]
note
In the above JSON, we are concatenating the prompt
field from the request body with a message to format the response using Markdown. You can change the message to your liking.

The
Tokens
field is optional. You can set it to1000
if you want to limit the number of tokens in the response. The default value is16
.Click the Core tab on the Nodes Library and search for
Response
to find theReturn Success Response
node and drag and drop it to the Designer. Connect theCreate Chat Completion
node to theReturn Success Response
node to two times to return the completion and trigger the success response.

Now that we have created the service, we can copy the endpoint URL and use it in our React app. Visit the Endpoints page and click on the Copy button next to the endpoint URL to copy the endpoint URL.

Connecting the Frontend and Backend
Now that we have created the frontend and backend, we can connect them. To do this, we will be using the endpoint URL that we copied in the previous step. Rename .env.example
file to .env
file in the frontend directory and paste the endpoint URL in the REACT_APP_ENDPOINT_URL
environment variable.
REACT_APP_ENDPOINT_URL=https://c3-na.altogic.com/e:64063xs2f0xs1e4d9xs8fa7c/travel
Now that we have the endpoint URL, we can run the frontend app by running the following command in your terminal:
$ npm start
Once the app is running, you can visit it in your browser at http://localhost:3000/
.

The app is now ready to use. You can start by entering Destionation, Budget, Trip duration and other details and click on the Generate button to get the travel itinerary.

Here is the parameterized prompt
and handleSubmit
function that we used to generate the travel itinerary.
const handleSubmit = (e) => {
e.preventDefault();
setLoading(true);
let prompt = `Generate a personalized travel itinerary for a trip to ${values.destinationCountry} with a budget of ${values.budget}. The traveler is interested in a ${values.travelStyle} vacation and enjoys ${values.interestsNew}. They are looking for ${values.accommodationType} accommodations and prefer ${values.transportationType} transportation. The itinerary should include ${values.activityType} activities and ${values.cuisineType} dining options. Please provide a detailed itinerary with daily recommendations for ${values.tripDuration} days, including suggested destinations, activities, and dining options. The itinerary should be written in ${values.language}. `;
fetch(`${process.env.REACT_APP_ENDPOINT_URL}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ prompt: prompt }),
})
.then((response) => response.json())
.then((data) => {
setResponse(data.choices[0].message.content);
setLoading(false);
})
.catch((error) => {
console.error(error);
setLoading(false);
});
};
In the handleSubmit
function, we are using the fetch
API to make a POST request to the endpoint URL that we have created before in the Altogic with the prompt
as the request body. In that endpoint, we are using the Create Chat Completion
node to generate the travel itinerary so the response from the endpoint is a JSON object that contains the travel itinerary.
With these steps, we have created an AI travel planner app that can generate a travel itinerary based on user input. With further development, this app could be expanded to include additional features such as booking flights, sharing the itinerary with friends, adding authentication to save itineraries, and more.
Overall, integrating OpenAI's Chat Completion(ChatGPT) API into a React app is a powerful way to build AI-powered applications that can provide personalized recommendations and responses to user input.
Resources
Source Code: The source code for the AI travel planner app can be found Github
Demo: Demo of the AI travel planner app can be found Vercel.
Conclusion
In conclusion, integrating OpenAI GPT-3 Chat Completion(ChatGPT) API with Altogic and React is a powerful way to build an AI-powered travel planner app that can revolutionize the travel industry. By providing personalized recommendations and responses to user input, we can create happier customers and increased revenue for travel companies. So what are you waiting for? Start building your AI-Powered travel planner app today and revolutionize the travel industry.
If you have any questions, please feel free to reach out to us at community forum or discord channel.