Travel Planner with OpenAI GPT-3 API

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.

AI travel planner - Travel Itinerary Generator

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.

Creating a backend application for the AI travel planner app

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.

1. Give your API a name like Travel itinerary endpoint
2. Set endpoint URL for /travel,
3. Select the POST method,
4. In the Routed Service section, select Add new no-code service and fill the service name as Travel itinerary and click on the Create button.

Creating an endpoint for the travel itinerary service

5. Click the Service name Travel itinerary from the endpoint page to open the service Designer.

6. In the Designer, click on the Start node and select the Request Body Structure option as a Custom Model and add field name as prompt and field type as Text from the right sidebar.

Start node configuration

7. Click the Marketplace tab on the Nodes Library and search for OpenAI to find the Create Chat Completion service and drag and drop it to the Designer. Connect the Start node to the Create Chat Completion node.

8. Select the Create Chat Completion node and fill the API Key field with your OpenAI API key. You can get your API key from the OpenAI dashboard.

9. Set Model id as 'gpt-3.5-turbo'

10. 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.

OpenAI - Create Chat completion configuration

11. The Tokens field is optional. You can set it to 1000 if you want to limit the number of tokens in the response. The default value is 16.

12. Click the Core tab on the Nodes Library and search for Response to find the Return Success Response node and drag and drop it to the Designer. Connect the Create Chat Completion node to the Return Success Response node to two times to return the completion and trigger the success response.

Final overview of the service

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.

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/.

AI Travel Planner App - Home

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.

AI Travel Planner App - 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.