Building an AI Agent for Google Calendar—Part 2: Designing the Interface

Welcome to part 2 of FriendliAI’s blog series on “Building an AI Agent for Google Calendar”. In part 1, we discussed the basic concepts of AI agents, the tools that we used to interact with Google Calendar, and how function calls work with Large Language Models (LLMs). Now, we will dig in deeper into improving the user interface (UI) and the user experience (UX) of the AI agent. By the end of this tutorial, you will be able to build an interactive AI agent that seamlessly integrates with Google Calendar with a user-friendly interface.

Improving the User Interface with a better Chat UI

To make the AI agent more intuitive and appealing to users, let’s design our chat interface. This UI will allow users to ask questions in real-time and receive responses from the AI agent. We will use Next.js to create a dynamic & responsive chat interface, enabling smooth interaction with the AI model. This post is composed of 6 separate steps as follows:

1. Building a Basic Chat UI
2. Understanding Tools Usage Patterns in Vercel AI SDK
3. Setting up Auth.js
4. Integrating the Google Calendar
5. Enhancing Functionality with Friendli Built-in Tools
6. The Full Code

Step 1. Building a Basic Chat UI

Before starting, make sure you have access to your FRIENDLI_TOKEN from the Friendli Suite. Now, let’s install the necessary dependencies. Keep in mind that you’ll have to replace the {your_friendli_token_here} part below with your own access token. Run the following command in the terminal:

Next, let's create a basic chat UI by modifying the app/page.tsx file as follows:

Then, let’s create a app/api/chat/route.ts file to make the useChat hook work:

In the image above, you can see our very basic chat UI.

Step 2. Understanding Tools Usage Patterns in Vercel AI SDK

Let's examine how tools can be defined within the Vercel AI SDK.

In the image above, you can observe that the LLM can call the tool as needed, by declaring a tool with a description and parameters. But we haven't implemented the part of the code that actually runs the tool yet, so it stops at the call step before the execution.

The Vercel AI SDK supports three types of execution methods for the tool execution:

1. Automatically executed server-side tools
2. Automatically executed client-side tools
3. Tools that require user interaction, via confirmation dialogs

In this blog post, we will explore the most commonly used server-side automatic execution tools and tools that require user interaction.

2-1. Automatically executed server-side tools

It does not require any actions from the users for fetching calendar events, hence there's no need to execute any code on the client side. Therefore, the fetchCalendarEvents tool corresponds to the first type, ‘automatically executed server-side tools'.

This can be implemented as:

For tool calling, it is essential to set maxSteps to a value greater than 1. In this case, we have added the execution within the function declaration to enable automatic execution on the server, and set maxSteps to 4 to allow the tool execution results to be sent back to the inference server for further processing.

2-2. Tools that require user interaction

Finally, let's look at the tools that are executed on the client side and require user interaction—for example, requiring confirmation dialogs or modals.

To achieve this, we have added the schema for the createCalendarEvent tool, and we need to modify the code on the client side. Unlike the automatically-executed case on the client, we don't use the onToolCall callback, but implement it as follows:

The tool invocation values are used to express on the UI that a tool is being called. When the user explicitly performs a specific action, the addToolResult() function is called to return the result of the function call. In the actual implementation, we plan to allow users to modify the event title and the date suggested by the LLM before actually adding it to the calendar. However, for testing purposes, let’s simply use a mock function for now that returns a response (i.e., "Event created!") when the button is pressed.

Step 3. Setting up Auth.js

Next, let’s make these tools work in practice using Auth.js and the Google Calendar API. We will implement the Google login functionality using Auth.js and integrate it with Google Calendar.

Setting up environment variables

First, you need to create a project in the Google Cloud Console and activate the necessary APIs. You can refer to this link for the setup instructions. Then, generate an OAuth 2.0 client ID to obtain the required authentication information. Based on this information, set up the following environment variables in the .env.local file:

These environment variables will be used when integrating Auth.js and Google Calendar API.

Adding the code

Step 4. Integrating the Google Calendar

We have completed the basic setup for Google login and Google Calendar API integration. In the next step, we will implement the functionality to actually create and retrieve calendar events based on these settings. This will allow our AI agent to directly interact with the user's Google Calendar.

4.1 Implementing the getCalendarInstance function

To use the Google Calendar API, we first need to implement a getCalendarInstance function that creates a calendar instance. This function is added to the lib/calendarApi.ts file:

The getCalendarInstance function returns a Google Calendar API instance by getting an access token from the user's session. This getCalendarInstance function will be used to implement other calendar functions

4.2 Implementing the createCalendarEvent tool

Let's start by implementing the createCalendarEvent function, which will create a new calendar event. This function will be added to the lib/calendarApi.ts file:

This function takes the title (summary), start time (startTime), and end time (endTime) of the event as parameters and creates a new event through the Google Calendar API.

4.3 Implementing the fetchCalendarEvents tool

Next, let’s implement the fetchCalendarEvents function, which fetches calendar events for a specific period of time. This function is also added to the lib/calendarApi.ts file:

This function takes a start date (startDate) and an end date (endDate) as parameters and retrieves all calendar events for that period.

4.3 Connecting Tools to the AI Agent

Now, we need to connect the tools we implemented to the AI agent. Let’s modify the api/chat/route.ts file as follows:

Now, our AI agent is fully integrated with Google Calendar and can create and retrieve events. Users can manage their schedules through a natural conversation with the AI agent, and it can accurately understand and execute user requests. These features greatly enhance the user experience and make schedule management more efficient.

Step 5. Enhancing Functionality with Friendli Built-in Tools

Friendli Built-in Tools make adding new features easier by providing readily-made, optimized tools that can be integrated quickly into AI agents. Unlike traditional methods, where developers build features from scratch, FriendliAI offers a library of pre-configured tools that reduce the development time. These tools seamlessly integrate and handle complex tasks like data retrieval or API interactions, simplifying feature expansion.

Let’s take a look at the following example:

The code above can be used to easily add the web:search functionality to your AI agent. Now that we have both capabilities for the calendar and web searching, you can retrieve real-time information from the internet and utilize it to create schedules as follows:

Step 6. The Full Code

Now as the functionality of our AI agent is complete, let’s enhance the user interface as our final step. A visually appealing and easy-to-use UI can further enhance the user experience. We will use Tailwind CSS to style the chat interface and calendar event display. Now let's take a look at the full code with styling applied.

Congratulations! You have successfully made a fully-functioning calendar manager AI agent with proper UI/UX. In our example, we have handled a case for managing Google Calendar events through a chat interaction-based AI agent. Likewise, this can be applied to a variety of cases where AI could help users perform various tasks and organize their materials more easily.

You can check out the working demo on this link: https://calendar-agent.friendli.ai/

Behind the curtains, Friendli Inference powers the AI agent with the AI capabilities, through its cost-effective throughput-oriented AI execution.

Ready to unleash the power of your LLM? Experience Friendli Inference's performance! We offer three options to suit your preferences:

• Friendli Dedicated Endpoints: Run any custom generative AI models on dedicated GPUs in autopilot.
• Friendli Serverless Endpoints: No setup required, simply call our APIs and let us handle the rest.
• Friendli Container: Deploy the engine on your own infrastructure for ultimate control.

Visit https://friendli.ai/suite to begin your journey into the world of high-performance LLM serving with the Friendli Inference!