Guía Paso a Paso para Integrar la API de Google Vertex PaLM con monday.com

Introducción

monday.com es un sistema operativo de trabajo basado en la nube que permite a los usuarios crear sus propias aplicaciones y software de gestión de proyectos. Es una plataforma de gestión de trabajo todo en uno que ayuda a los equipos a optimizar su flujo de trabajo, colaborar sin problemas y gestionar proyectos complejos de manera efectiva.

PaLM2, por otro lado, es el modelo de lenguaje avanzado de Google que destaca en tareas de razonamiento, como comprensión de código, clasificación, respuesta a preguntas, traducción y generación de lenguaje natural. Mejora los modelos anteriores a través de escalado optimizado, una mezcla de conjuntos de datos mejorada y una arquitectura de modelo mejorada. PaLM2 se evalúa rigurosamente para el despliegue responsable de IA y se utiliza en varios modelos de última generación y características de IA generativa en Google.

Requisitos Previos

Para utilizar la API de Google Vertex PaLM, debes unirte a la lista de espera.

Lo Que Aprenderás

En este tutorial, aprenderás cómo crear una aplicación de asistente impulsada por IA en monday.com usando la API de Google Vertex PaLM, alimentada por el modelo PaLM2.

Objetivos de Aprendizaje

• Cómo crear una aplicación de React.
• Cómo estilizar tu aplicación usando Tailwind CSS.
• Cómo crear una API personalizada usando FastAPI.
• Cómo trabajar con GraphQL.
• Cómo manejar solicitudes y respuestas.
• Cómo trabajar con archivos PDF.
• Cómo crear una aplicación en monday.com.
• Cómo integrar la API de Google Vertex PaLM con monday.com.
• Cómo publicar una aplicación en monday.com.

¡Es Hora de Programar y Aprender!

Crear un Nuevo Proyecto

Primero que nada, vamos a crear una nueva carpeta para nuestro proyecto. Abre Visual Studio Code y crea una nueva carpeta llamada monday-palm-tutorial o como desees.

Crear Aplicación React

Ahora, vamos a crear una aplicación React usando el comando npx create-react-app. Abre tu terminal y ejecuta el siguiente comando.

Instalar Tailwind CSS

Luego, vamos a instalar Tailwind CSS usando el comando npm install. Abre tu terminal y ejecuta el siguiente comando.

Configurar Tailwind CSS

A continuación, configuraremos Tailwind CSS. Abre el archivo tailwind.config.js y reemplaza el antiguo código con el siguiente:

Agregar Directivas de Tailwind

Agrega las directivas de Tailwind a tu CSS abriendo el archivo src/index.css y reemplazando el antiguo código con el siguiente:

Crear Interfaz de Usuario

Ahora, vamos a crear la interfaz de usuario. Abre el archivo src/App.js y elimina todo lo que haya dentro, en su lugar copia/pega las siguientes líneas de código:

Podemos decir que hemos terminado los primeros pasos de la interfaz de usuario. Ahora, implementemos la lógica de nuestra aplicación.

Implementación de la Gestión del Estado

Dentro del componente App, utilizaremos el gancho useState para almacenar el estado de nuestra aplicación. Además, utilizaremos el gancho useEffect para obtener datos de la API de monday.com. Además, crearemos una función para manejar la solicitud y respuesta de la API de monday.com.

Selección de Tablero y Elemento

Crea un menú desplegable para seleccionar un tablero específico. El controlador de eventos onChange llamará a la función handleBoardDropdownChange para establecer el tablero seleccionado, mientras que el atributo value actualizará el tablero seleccionado.

Pruebas de la Aplicación

Vamos a probar nuestra aplicación. Abre tu terminal y ejecuta el siguiente comando. Si todo está funcionando bien, deberías ver los resultados esperados.

Manejo de Archivos del Tablero Seleccionado

Crea una función que maneje archivos del tablero seleccionado. Nota: Si no se selecciona ningún tablero, la función estará vacía, ya que useEffect no se invocará.

Selección de Elementos y Manejo de Respuestas

Crea menús desplegables para seleccionar elementos y archivos, e implementa los controladores de eventos respectivos para gestionar las acciones del usuario. Luego crea una función para manejar el texto y un área de texto para ingresar texto.

Creando un Punto Final de API Personalizado (FastAPI)

En esta sección, crearemos un punto final de API personalizado usando FastAPI. Este punto final enviará el aviso y el archivo a la API de Google Vertex PaLM y devolverá la respuesta.

Configurando el Backend

Primero, crea una nueva carpeta llamada backend dentro de la carpeta monday-palm-tutorial. Abre la carpeta del backend en tu editor de código y crea un nuevo archivo llamado api.py.

Toques Finales

Ahora, vamos a probar nuestro punto final de API y asegurarnos de que todo funcione como se espera.

Conclusión

¡Felicidades! Has completado la aplicación de pila completa. Para más información sobre cómo publicar tu aplicación en monday.com, consulta nuestro Tutorial de monday.com + Stable Diffusion.