Einen KI-unterstützten Assistenten auf monday.com mit der Google Vertex PaLM API erstellen

In diesem Tutorial werden wir uns damit beschäftigen, wie man eine KI-unterstützte Assistenten-App auf monday.com mit der Google Vertex PaLM API erstellt, die vom fortschrittlichen PaLM2-Modell unterstützt wird. Dieser Leitfaden behandelt alles, von der Einrichtung Ihres Projekts bis zur Integration Ihrer App mit leistungsstarken KI-Funktionen.

Voraussetzungen

Bevor wir loslegen, stellen Sie sicher, dass Sie sich auf die Warteliste für die Google Vertex PaLM API gesetzt haben. Dieser Zugang ist entscheidend, um das KI-Modell in Ihrer Anwendung nutzen zu können.

Lernziele

• Erstellen einer React-App
• Styling Ihrer App mit Tailwind CSS
• Erstellen einer benutzerdefinierten API mit FastAPI
• Arbeiten mit GraphQL
• Verarbeiten von Anfragen und Antworten
• Verwalten von PDF-Dateien
• Erstellen einer App auf monday.com
• Integration der Google Vertex PaLM API mit monday.com
• Veröffentlichung einer App auf monday.com

Zeit zum Programmieren und Lernen!

Jetzt lassen Sie uns beginnen, indem wir ein neues Projekt erstellen!

Ein neues Projekt erstellen

Öffnen Sie Visual Studio Code und erstellen Sie einen neuen Ordner für unser Projekt. Sie können ihn monday-palm-tutorial oder nach Belieben benennen.

Schritt 1: Erstellen einer React-App

Führen Sie im Terminal den folgenden Befehl aus, um eine neue React-App zu erstellen:

npx create-react-app monday-palm-tutorial

Schritt 2: Tailwind CSS installieren

Als nächstes installieren wir Tailwind CSS. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install -D tailwindcss postcss autoprefixer

Schritt 3: Tailwind CSS konfigurieren

Öffnen Sie die tailwind.config.js-Datei und ersetzen Sie ihren Inhalt durch die folgende Konfiguration:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Schritt 4: Tailwind-Direktiven hinzufügen

Um Tailwind CSS zu nutzen, öffnen Sie src/index.css und ersetzen Sie dessen Inhalt:

@tailwind base;
@tailwind components;
@tailwind utilities;

Schritt 5: Benutzeroberfläche erstellen

Öffnen Sie src/App.js und ersetzen Sie dessen Inhalt durch Folgendes:

import React from 'react';

function App() {
  return (
    

      
KI-Assistent-App
    
  );
}

export default App;

Implementierung der App-Logik

Verwenden Sie im App-Komponenten den useState-Hook, um die App-Zustände zu verwalten, und useEffect, um Daten von der monday.com API abzurufen. Erstellen Sie Funktionen, um Anfragen intuitiv zu verarbeiten.

Erstellen der Dropdown-Menüs

Erstellen Sie Dropdown-Menüs, um bestimmte Boards, Elemente und Dateien auszuwählen. Richten Sie onChange-Ereignishandler ein, um die ausgewählten Elemente korrekt zu speichern.

Ihren App testen

Öffnen Sie Ihr Terminal und führen Sie aus:

npm start

Wenn alles korrekt ist, sollten Sie sehen, wie Ihre App reibungslos lädt.

Schritt 6: Erstellen einer benutzerdefinierten API mit FastAPI

Für das Backend erstellen Sie einen neuen Ordner namens backend in Ihrem Projektordner. Erstellen Sie eine api.py-Datei, um benutzerdefinierte API-Operationen abzuwickeln.

Backend-Implementierungen

• Erstellen Sie eine Funktion zum Hochladen von Dateien.
• Implementieren Sie eine Funktion zum Lesen des Inhalts von Dateien.
• Erstellen Sie eine Funktion, die mit der Google Vertex PaLM API integriert.

Testen Sie Ihr Backend

Führen Sie den folgenden Befehl aus, um Ihren Backend-Server zu starten:

uvicorn api:app --reload

Überprüfen Sie, ob alle Funktionen harmonisch zusammenarbeiten.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich eine vollwertige, KI-unterstützte Assistenten-App auf monday.com erstellt, die mit der Google Vertex PaLM API integriert ist.

Für detaillierte Anleitungen zur Veröffentlichung Ihrer Anwendung, schauen Sie sich das monday.com + Stable Diffusion Tutorial an.

Wenn Sie weitere Fragen oder Feedback haben, hinterlassen Sie unten gerne einen Kommentar!