## Introduction Autonomous AI agents have emerged as indispensable tools for leveraging artificial intelligence to perform tasks and make decisions without direct human intervention. These agents are capable of analyzing data, learning from patterns, and executing actions to achieve specific goals, all autonomously. In this tutorial, you will be creating and deploying a trip planner using an autonomous AI agent in a Next.js application on Koyeb. You will learn how to use an autonomous AI agent to continuously communicate its actions and the reasoning it is using, allowing your Next.js application to display real-time updates to users based on their trip preferences. By the end of this tutorial, you will have a functioning Next.js application that will prepare a trip itinerary based on the given destination and a trip length. The output will include all of the steps taken as well as the reasoning behind specific choices. Find out more details about the application you will build by visiting the [project repository](https://github.com/koyeb/example-autonomous-ai-trip-planner). You can deploy the Next.js application as configured in this guide using the [Deploy to Koyeb](https://www.koyeb.com/docs/build-and-deploy/deploy-to-koyeb-button) button below: [![Deploy to Koyeb](/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=ai-trip-planner&type=git&repository=koyeb%2Fexample-autonomous-ai-trip-planner&branch=main&builder=buildpack&env%5BOPENAI_API_KEY%5D=CHANGE_ME&env%5BSERPAPI_API_KEY%5D=CHANGE_ME&ports=8000%3Bhttp%3B%2F) **Note:** You will need to replace the values of the environment variables in the configuration with your own `OPENAI_API_KEY` and `SERPAPI_API_KEY`. ## Requirements To successfully follow this tutorial, you will need the following: - Node.js and `npm` installed. The demo app in this tutorial uses version 18 of Node.js. - Git installed. - An [OpenAI](https://platform.openai.com/api-keys) account. - A [SerpApi](https://serpapi.com/dashboard) account. - A [Koyeb](https://app.koyeb.com/) account to deploy the application. ## Steps To complete this guide and deploy the Next.js trip planner application, you will need to follow these steps: - [Generate an OpenAI API key](#generate-an-open-ai-api-key) - [Generate a SerpApi API key](#generate-a-serp-api-api-key) - [Create a new Next.js application](#create-a-new-next-js-application) - [Configure shadcn/ui components](#configure-shadcn-ui-components) - [Build the trip planner API endpoint](#build-the-trip-planner-api-endpoint) - [Create a dynamic Next.js route handler](#create-a-dynamic-next-js-route-handler) - [Integrate LangChain tools and the SerpApi search API](#integrate-lang-chain-tools-and-the-serp-api-search-api) - [Create an in-memory vector store with OpenAI](#create-an-in-memory-vector-store-with-open-ai) - [Integrate AutoGPT as the autonomous AI agent](#integrate-auto-gpt-as-the-autonomous-ai-agent) - [Building the trip planner user interface](#building-the-trip-planner-user-interface) - [Deploy the Next.js application to Koyeb](#deploy-the-next-js-application-to-koyeb) - [Conclusion](#conclusion) ## Generate an OpenAI API key HTTP requests to the OpenAI API require an authorization token. To generate this token, while logged into your OpenAI account, navigate to the [API keys page](https://platform.openai.com/api-keys) and click **Create new secret key** after entering name for your token. Copy and securely store this token for later use as `OPENAI_API_KEY` environment variable. Locally, set and export the `OPENAI_API_KEY` environment variable by executing the following command: ```bash export OPENAI_API_KEY="" ``` ## Generate a SerpApi API key HTTP requests to the SerpApi require an authorization token. To generate this token, while logged into your SerpApi account, navigate to the [dashboard](https://serpapi.com/dashboard), scroll down to **Your Private API Key** section, and click the **clipboard icon**. Copy and securely store this token for later use as `SERPAPI_API_KEY` environment variable. Locally, set and export the `SERPAPI_API_KEY` environment variable by executing the following command: ```bash export SERPAPI_API_KEY="" ``` ## Create a new Next.js application Let's get started by creating a new Next.js project. Open your terminal and run the following command: ```bash npx create-next-app@latest my-app ``` When prompted, choose: - `Yes` when prompted to use TypeScript. - `No` when prompted to use ESLint. - `Yes` when prompted to use Tailwind CSS. - `No` when prompted to use `src/` directory. - `Yes` when prompted to use App Router. - `No` when prompted to customize the default import alias (`@/*`). Once that is done, move into the project directory and start the app in development mode by executing the following command: ```bash cd my-app npm run dev ``` The app should be running on [localhost:3000](http://localhost:3000/). Stop the development server by pressing CTRL-C so we can move on to installing LangChain in the application. Next, in your terminal window, run the command below to install the necessary libraries and packages for building the application: ```bash npm install serpapi langchain @langchain/community @langchain/openai ``` The above command installs the following packages: - `serpapi`: A library to scrape and parse search engine results using [SerpApi](https://serpapi.com/). - `langchain`: A framework for developing applications powered by language models. - `@langchain/community`: A collection of third party integrations for plug-n-play with LangChain core. - `@langchain/openai`: A LangChain package to interface with the OpenAI series of models. ## Configure shadcn/ui components To quickly prototype the user interface, you will set up the `shadcn/ui` components with Next.js. Specifically, from `shadcn/ui`, you will be able to use baked-in, accessible ` Delhi Bangalore Hyderabad {/* Select for choosing days */} {/* Button to trigger planning */} ); } ``` The code above does the following: - Uses `use client` to enable client side interactivity on the homepage. - Imports the `useState` hook from React. - Imports all of the utilities related to `Select` and `Button` component created using `shadcn/ui`. - Exports an unnamed React component. - Defines `days` and `place` as state variables which are updated to reflect the user's choice in the respective drop-downs (created using `Select` component). Let's move on to streaming the response from the API endpoint that you created earlier and rendering a user interface from the same. Update the homepage code in the `app/page.tsx` file with the following: ```typescript "use client"; // Importing useState hook from React import { useState } from "react"; // Importing components from the UI library import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Button } from "@/components/ui/button"; // Default function component export default function () { // State variables for selected days and place, and messages received from the server const [days, setDays] = useState(); const [place, setPlace] = useState(); const [messages, setMessages] = useState([]); // [!code ++] // Function to connect to the server and receive messages const connectToStream = (days: string, place: string) => { // [!code ++] // Creating a new EventSource for server-sent events (SSE) const eventSource = new EventSource(`/api?place=${place}&days=${days}`); // [!code ++] // Event listener for receiving messages eventSource.addEventListener("message", (event) => { // [!code ++] // Parsing the JSON data received from the server const tmp = JSON.parse(event.data); // [!code ++] // Updating the messages state with the new message setMessages((messages) => [...messages, tmp]); // [!code ++] // If it outputs the trip, close the stream. if (tmp.command.name === "write_file") eventSource.close(); // [!code ++] }); // [!code ++] }; // [!code ++] // Function to trigger planning based on selected days and place const plan = () => days && place && connectToStream(days, place); // [!code ++] // Rendered JSX return ( <> {/* Title */}

Trip Planner

{/* Select inputs for choosing place and days */}

{/* Select for choosing place */} {/* Select for choosing days */}

{/* Button to trigger planning */} {/* Displaying messages received from the server */} // [!code ++] {messages.map((i, _) => ( // [!code ++]

// [!code ++] {/* Displaying action */} // [!code ++] // [!code ++] Action // [!code ++] // [!code ++] {i.thoughts.speak} // [!code ++] {/* Displaying reasoning */} // [!code ++] // [!code ++] Why? // [!code ++] // [!code ++] {i.thoughts.reasoning} // [!code ++] {/* Displaying next steps */} // [!code ++] // [!code ++] Next Steps // [!code ++] // [!code ++]

// [!code ++] {/* Displaying each next step */} // [!code ++] {i.thoughts.plan.map((j: string) => ( // [!code ++]

- {j}

// [!code ++] ))} // [!code ++] {/* Displaying trip details if command is to write a file */} // [!code ++] {i.command.name === "write_file" && ( // [!code ++] <> // [!code ++] // [!code ++] Your Trip // [!code ++] // [!code ++] {i.command.args.text} // [!code ++] // [!code ++] )} // [!code ++]

// [!code ++] ))} // [!code ++] ); } ``` The code additions above do the following: - Defines `messages` as a state variable that is updated as new messages are received from the API endpoint. - Creates a `connectToStream` function which initiates a request to `/api` endpoint with the user-selected `place` and `days` as the query parameters. - Listens to new messages from the stream, parses them into JSON and appends them to the list of messages obtained. - Closes the connection if the latest message obtained from the API has `write_file` as the command. This is done to limit the usage of endpoint to obtain a single trip itinerary, as the autonomous AI agent could do multiple rounds of generations and that would spike your OpenAI API costs. - Attaches an `onClick` listener to the "Plan" button so that if `days` and `place` is selected, the `connectToStream` function is invoked. - Loops over the reactive `messages` array to create an informative interface describing the reasoning, action, and steps taken to generate the trip itinerary in real-time. Great! You have successfully created a trip planner that uses an autonomous AI agent ([AutoGPT](https://js.langchain.com/docs/use_cases/autonomous_agents/auto_gpt)) to generate a trip itinerary. It communicates its thought process and reasoning throughout the process of planning the trip. To test the application locally, double-check that you've exported your OpenAI and SerpApi keys and run the development server with the following: ```bash export OPENAI_API_KEY="" export SERPAPI_API_KEY="" npm run dev ``` If you visit `http://localhost:3000` in your web browser, you will be able to test out the application locally. Once you make your selections and hit "Plan", you should see the autonomous AI agent plan a trip over the few moments. Press CTRL-C to stop the development server when you are finished. In the upcoming section, you will proceed to deploy the application online on the Koyeb platform. ## Deploy the Next.js application to Koyeb Koyeb is a developer-friendly serverless platform to deploy apps globally. No-ops, servers, or infrastructure management and it has supports for different tech stacks such as Rust, Golang, Python, PHP, Node.js, Ruby, and Docker. With the app now complete, the final step is to deploy it online on Koyeb. We will use git-driven deployment to deploy on Koyeb. To do this, we need to create a new GitHub repository from the [GitHub web interface](https://github.com/new) or by using the [GitHub CLI](https://cli.github.com/) with the following command: ```bash gh repo create --private ``` Next.js automatically initialized a git repository when we created a new project. Add a new remote pointing to your GitHub repository by typing: ```bash git remote add origin git@github.com:/.git git branch -M main ``` Next, add all the files in your project directory to the git repository and push them to GitHub: ```bash git add . git commit -m "Initial commit" git push -u origin main ``` To deploy the code on the GitHub repository, visit the [Koyeb control panel](https://app.koyeb.com/), and while on the **Overview** tab, click the **Create Web Service** button to start the deployment process: 1. Select **GitHub** as the deployment method. 2. Choose the repository for your code from the repository drop-down menu. 3. In the **Environment variables** section, click **Add variable** to include additional environment variables. Add the `OPENAI_API_KEY` and `SERPAPI_API_KEY` variables by selecting the **Secret** type and selecting **Create new secret** in the value field. Specify the secret name and its corresponding value and click **Create**. 4. Choose a name for your App and Service, for example `ai-trip-planner`, and click **Deploy**. During the deployment on Koyeb, the process identifies the `build` and `start` scripts outlined in the `package.json` file, using them to build and launch the application. The deployment progress can be tracked through the logs presented. Upon the completion of deployment and the successful execution of vital health checks, your application will be operational. If you would like to look at the code for the demo application, you can find it [in the project repository](https://github.com/koyeb/example-autonomous-ai-trip-planner). ## Conclusion In this tutorial, you used AutoGPT, an autonomous AI agent, through LangChain to create a trip planner. The application continuously communicates the steps it takes and the reasoning behind them in order to generate an itinerary. Autonomous AI agents can reduce human workload by making independent decisions in real-time, an ability well-suited for personalized use cases. Their self-reasoning capacity and ability to execute real world actions makes autonomous AI agents uniquely powerful and helpful. Given that the application was deployed with the git deployment method, subsequent code push to the deployed branch will automatically initiate a new build for your application. Changes to your application will become live once the deployment is successful. In the event of a failed deployment, Koyeb retains the last operational production deployment, ensuring the uninterrupted operation of your application.

AutoGPT

Using Autonomous AI Agents with SerpApi and AutoGPT to Build a Trip Planner