Step-by-Step Guide to Integrate Google Vertex PaLM API with monday.com

Introduction

monday.com is a cloud-based work operating system that allows users to create their own applications and project management software. It is an all-in-one work management platform that helps teams streamline their workflow, collaborate seamlessly, and manage complex projects effectively.

PaLM2, on the other hand, is Google's advanced language model that excels in reasoning tasks, such as code understanding, classification, question answering, translation, and natural language generation. It improves upon previous models through optimized scaling, an enhanced dataset mixture, and improved model architecture. PaLM2 is rigorously evaluated for responsible AI deployment and is used in various state-of-the-art models and generative AI features at Google.

Prerequisites

To use the Google Vertex PaLM API, you should join the waitlist.

What You'll Learn

In this tutorial, you'll learn how to create an AI-powered Assistant App on monday.com using the Google Vertex PaLM API powered by the PaLM2 model.

Learning Objectives

• How to create a React App.
• How to style your App using Tailwind CSS.
• How to create a custom API using FastAPI.
• How to work with GraphQL.
• How to handle requests and responses.
• How to work with PDF files.
• How to create an App on monday.com.
• How to integrate Google Vertex PaLM API with monday.com.
• How to publish an App on monday.com.

Time to Code and Learn!

Create a New Project

First things first, let's create a new folder for our project. Open Visual Studio Code and create a new folder named monday-palm-tutorial or whatever you want.

Create React App

Now, let's create a React App using the npx create-react-app command. Open your terminal and run the following command.

Install Tailwind CSS

Next, let's install Tailwind CSS using the npm install command. Open your terminal and run the following command.

Configure Tailwind CSS

Next, let's configure Tailwind CSS. Open tailwind.config.js file and replace the old code with the following:

Add Tailwind Directives

Add the Tailwind directives to your CSS by opening the src/index.css file and replacing the old code with the following:

Create UI Interface

Next, let's create the UI Interface. Open src/App.js file and remove everything inside, instead copy/paste the following lines of code:

We can say that we have finished the first steps of the UI Interface. Now, let's implement the logic of our App.

Implementing State Management

Inside the App component, we will use the useState hook to store the state of our App. Additionally, we will utilize the useEffect hook to fetch data from the monday.com API. Furthermore, we will create a function to handle the request and response from the monday.com API.

Board and Item Selection

Create a dropdown menu to select a specific board. The onChange event handler will call handleBoardDropdownChange function to set the selected board, while the value attribute will update the selected board.

Testing the App

Let’s test our App. Open your terminal and run the following command. If everything is working fine, you should see the expected results.

Handling Files from Selected Board

Create a function that handles files from the selected board. Note: If no board is selected, the function will be empty as useEffect will not be invoked.

Selecting Items and Handling Responses

Create dropdown menus for selecting items and files, and implement respective event handlers to manage user actions. Then create a function to handle text and a textarea to enter text.

Creating Custom API Endpoint (FastAPI)

In this section, we will create a custom API endpoint using FastAPI. This endpoint will send the prompt and file to the Google Vertex PaLM API and return the response.

Setting Up Backend

First, create a new folder called backend inside the monday-palm-tutorial folder. Open the backend folder in your code editor and create a new file called api.py.

Final Touches

Now, let’s test our API endpoint and ensure everything is working as expected.

Conclusion

Congratulations! You have completed the full-stack App. For more information on publishing your App on monday.com, check out our monday.com + Stable Diffusion Tutorial.