https://d226lax1qjow5r.cloudfront.net/blog/blogposts/low-code-leverage-ai-studio-with-airtable/ai-studio-airtable.png

Geringer Code-Einsatz: AI Studio mit Airtable

Zuletzt aktualisiert am April 20, 2023

Lesedauer: 7 Minuten

Einführung

Vor ein paar Monaten war ich wegen eines Hackathons in Dubai. Der Taxifahrer des Hotels war sehr freundlich und wollte sicherstellen, dass ich das Beste aus meiner zweitägigen Reise machte. Er bot mir alle möglichen Dienste an, z. B. mich am Anfang und am Ende jedes Veranstaltungstages abzuholen, verschiedene spezialisierte Touren durch die Stadt zu unternehmen oder sogar einen Ausflug nach Abu Dhabi zu machen.

Er gab mir seine Visitenkarte mit einem QR-Code, um ihm eine Nachricht auf WhatsApp zu schicken. Ich scannte den Code, und es öffnete sich ein Chat-Fenster mit seinem geschäftlichen Account. Aber das war's! Keiner der coolen Dienste, von denen er mir gerade erzählt hatte, wurde den Nutzern präsentiert. Also machte sich mein Geschäftsgehirn an die Arbeit und ich schlug ihm vor: "Sie können Ihren Kunden mit dem AI Studio von Vonage wirklich helfen!

An example of a QR code Taxi Driver card. Credit to zazzle.comAn example of a QR code Taxi Driver card. Credit to zazzle.com

Letztes Jahr hat Vonage AI Studioauf den Markt gebracht, eine NoCode/LowCode-Plattform, mit der jeder schnell Conversational AI-Agenten erstellen kann. Typische Anwendungsfälle für Conversational AI sind Chatbots für den Kundensupport oder das Marketing. Aber Chatbots können das Benutzererlebnis für so viele weitere Anwendungen verbessern!

In diesem Tutorial zeige ich Ihnen, wie Sie einen AI Studio WhatsApp-Agenten für diesen Taxidienst erstellen, der Airtable als Backend-Datenbank zum Speichern und Abrufen von Informationen verwendet.

Yalla, los geht's!

Voraussetzungen

  • Vonage Developer Account. Um AI Studio nutzen zu können, benötigen Sie einen Vonage Developer Account. Details zu den ersten Schritten finden Sie weiter unten.

  • Airtable Account - Anmeldung hier. Wir werden Airtable als Backend-Datenbank verwenden.

  • Postman Account - Anmeldung hier. Im fortgeschrittenen Teil dieses Tutorials werden wir Postman zum Senden von Anfragen verwenden.

  • Optional: Miro Account - Anmeldung hier. Ich verwende Miro, um meine AI Studio-Agenten zu modellieren. Mehr Informationen dazu weiter unten.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Einrichten

Beginnen Sie mit einem Mockup

Bevor Sie einen Agenten in AI Studio erstellen, empfehle ich Ihnen dringend, den Ablauf Ihres Agenten mit einem visuellen Tool zu skizzieren. Mehr über die Erstellung eines originalgetreuen Conversational AI Mockups können Sie hier.

In unserer App können die Benutzer die Taxipreise für beliebte Orte nachschlagen und auch ihre Kontaktinformationen hinzufügen, um sich für künftige Taxi-Angebote anzumelden. Das Mockup für diesen Fluss sieht wie folgt aus:

Example of mockup for inbound flows of AI Taxi DemoExample of mockup for inbound flows of AI Taxi Demo

Jetzt, wo wir ein klares Bild davon haben, was wir bauen wollen, können wir anfangen zu bauen!

Eine Airtable-DB erstellen

Bevor wir mit AI Studio loslegen können, müssen wir unsere Airtable-Datenbank einrichten. Airtable ist ein cooles Tool, das wie Excel mit Superkräften ist! Die Dokumentation ist fantastisch und ein großartiger Ort, um anzufangen.

Wenn Sie sich eingewöhnt haben, werden Sie eine neue Basis bauen wollen. Wir werden sie "AI Taxi Demo" nennen. In dieser Basis werden wir zwei Tabellen haben: Zielorte und Kunden.

Bei den Reisezielen halten wir es einfach. Es wird nur zwei Felder geben: Name und Preis.

Destinations table with fields Name and PriceDestinations table with fields Name and Price

Auch für die Kundentabellen werden wir nur zwei Felder verwenden: Name und Telefon_Nummer:

Customers table with fields Name and Phone_NumberCustomers table with fields Name and Phone_Number

Wir können einige Dummy-Daten für diese Tabellen hinzufügen, damit unsere API-Aufrufe Werte zurückgeben. Telefonnummern sollten nur mit Ziffern eingegeben werden, ohne Pluszeichen (+).

Einen neuen Agenten erstellen

Nachdem wir nun unsere Datenbank eingerichtet haben, können wir mit dem Aufbau unseres AI Studio-Agenten beginnen, der mit dem Benutzer interagiert und Daten an und von Airtable weitergibt. Folgen Sie den Anweisungen in der AI Studio Dokumentation hier. Es gibt drei wichtige Optionen für unseren Agenten, wählen Sie:

  • Typ: WhatsApp

  • Vorlage: Von Grund auf neu beginnen

  • Veranstaltung: Inbound

Abrufen von Daten aus Airtable

Lassen Sie uns nun beginnen, unsere Abläufe zu entwickeln. Das Tolle daran ist, dass wir im Grunde die ganze Arbeit schon erledigt haben! Wir müssen nur noch unser vertikales Flussdiagramm in einen horizontalen Agenten umwandeln.

Unsere Schritte:

  1. Knoten "Nachricht senden: Senden einer Willkommensnachricht, "Willkommen bei AI Taxi".

  2. Eingabeknoten sammeln: Frage an den Benutzer: "Wie kann ich Ihnen helfen?". Die Antwort des Benutzers wird in einem Parameter namens TOPIC gespeichert.

Parameter sind wie Variablen, auf die im gesamten Agenten zugegriffen werden kann. Sie können mehr über Parameter lesen hier. So wie Variablen im Code Datentypen haben, haben Parameter Entitäten. Der Einfachheit halber werden alle Parameter vom Typ @sys.any sein.

  1. Klassifizierungsknoten: Klassifizierung der TOPIC Parameter. Wir werden zwei Intents haben: Retrieve Prices und Sign Up For Promotions. Hier hätten wir eine einfache Bedingung verwenden können, da wir in diesem Beispiel nur zwei Absichten haben. Die Schönheit und Stärke von AI Studio liegt jedoch in der Klassifizierungsfunktion. Wir wollen unseren Benutzern die Freiheit geben, jede beliebige Anfrage einzugeben und sie natürlich zu schreiben. Sie können sehen, wie leistungsfähig und einfach der Klassifizierungsknoten mit den vorgeschlagenen Benutzerausdrücken zu verwenden ist; hier.

  2. Eingabeknoten sammeln: Fragen Sie den Benutzer: "Wohin möchten Sie gehen?". Die Antwort des Benutzers wird in einem Parameter namens DESTINATION gespeichert.

Jetzt haben wir den Suchbegriff, den wir an Airtable senden wollen, und erhalten unsere gespeicherten Preisinformationen zurück. Aber wie können wir ihn an Airtable weitergeben? Das Tolle an Airtable ist die integrierte API für jede Basis und die hilfreiche Dokumentation. Klicken Sie in unserer AI Taxi Demo-Basis auf Hilfe in der oberen rechten Ecke. In der Seitenleiste, ganz unten, finden Sie dann API-Dokumentation. Das wirklich coole daran ist, dass Airtable die erforderliche Anfrage für Sie generiert! Hier finden Sie die vorgefertigte Curl-Anfrage, die in etwa so aussehen wird:

Example of CURL request to Airtable API

Nun müssen wir dies zu unserem AI Studio-Agenten hinzufügen. Wir fügen also einen Webhook-Knoten der es uns ermöglicht, REST-API-Anfragen zu stellen. Erfahren Sie mehr über Webhook-Knoten hier.

Im Knoten fügen wir unseren Endpunkt in die Request URL ein:

https://api.airtable.com/v0/app4AtCxYJu9tagah/Destinations

Außerdem müssen Sie Ihr persönliches Airtable-Zugangs-Token in den Kopfzeilen-Parametern auf der Registerkarte Kopfzeilen hinzufügen. Wie Sie Ihr persönliches Zugriffstoken generieren und verwenden, erfahren Sie hier. Stellen Sie sicher, dass Sie ihm Geltungsbereiche geben: data.records:read und data.records:write. Dieses Token ist nur einmal zu sehen, daher sollten Sie es an einem sicheren Ort speichern, damit Sie es später kopieren und einfügen können.

Jetzt sollte Ihr Webhook-Knoten wie folgt aussehen:

Example of Lookup Destination Webhook NodeExample of Lookup Destination Webhook Node

Wir können testen, ob unser Webhook funktioniert, indem wir auf die Schaltfläche test request Schaltfläche oben rechts klicken. Sie werden sehen, dass alle unsere Ziele in der Tabelle zurückgegeben werden. Auf der Registerkarte "Antwort" können Sie sehen, welche Daten zurückgegeben werden:

Example of Destinations Lookup ResponseExample of Destinations Lookup Response

Aber wir wollen nicht alle Ziele, wir wollen auch nach den Eingaben unserer Benutzer suchen können. Zum Glück für uns, Airtable hat einige coole Suchfunktionen. Zum Beispiel habe ich die filterByFormula um eine globale Tabellensuche zu erstellen. Wir verwenden filterByFormula hier für die Suche nach der Zielspalte. Und jetzt sieht unser Webhook-Knoten wie folgt aus:

Example of Webhook Node with Query ParametersExample of Webhook Node with Query Parameters

Sie müssen auf die Registerkarte Abfrageparameter klicken und den Parameter und den Wert eingeben.

Wenn Sie Probleme mit Ihrer Anfrage haben, versuchen Sie, Ihren $DESTINATION Parameter mit dem Airtable-Kodierungstool. Die Kodierung unserer Anfrage sollte wie folgt aussehen:

filterByFormula==SEARCH(%22$DESTINATION%22%2C+%7BName%7D)

Jetzt können wir den Test erneut ausführen und sehen, dass die Anfrage ein Objekt zurückgibt, das in seinem Inneren etwas namens "records" enthält, das wiederum ein Array von Datensatzobjekten enthält.

Example of Filtered ResponseExample of Filtered Response

AI Studio ermöglicht es uns, API-Antworten mit dem Antwort-Zuordnung Funktion. Wir müssen das zurückgegebene Objekt einem Parameter zuordnen, den wir dann in AI Studio verwenden können. Wir können dies wie folgt tun:

Example of Response MappingExample of Response Mapping

Jetzt, da wir unsere Antwortdaten zugeordnet haben, können wir den Test ausführen und sehen, dass einige Werte an unsere Parameter zurückgegeben werden!

Example of Response Mapping Test ResultsExample of Response Mapping Test Results

Wir haben es geschafft! Wir haben unseren AI Studio-Agenten mit unseren Airtable-Daten verbunden und können diese Informationen nun in unserem Agenten verwenden. Ein letzter Schritt besteht darin, unsere Daten jetzt in unserem Agenten zu verwenden und eine nette Nachricht an unseren Benutzer zu erstellen:

Example of Send Price NodeExample of Send Price Node

Wenn wir unseren Testeröffnen, sehen wir den gesamten Weg des Benutzers, der nach einem Preis für ein Taxi fragt.

Testing Our Completed FlowTesting Our Completed Flow

Senden von Daten an Airtable

Nachdem wir nun eine Verbindung zu unserer Airtable-DB hergestellt und mit dem Empfang von Informationen begonnen haben, ist das Senden von Informationen ein Kinderspiel!

Wir beginnen wieder bei unserem Knoten Themenklassifizierung. Wir fügen einen neuen Intent namens "Sign Up For Promotions" hinzu und fügen einige Benutzerausdrücke hinzu. Etwa so:

Example of Adding User Expressions To Training SetExample of Adding User Expressions To Training Set

Jetzt sind wir bereit, eine Verbindung zu unserem Webhook herzustellen. Werfen wir also noch einmal einen Blick in die Airtable-Dokumentation. Sie zeigt uns genau, wie wir unsere Anfrage formatieren müssen. Wir finden in der generierten Anfrage etwas wie dieses:

Example of Airtable POST RequestExample of Airtable POST Request

Jetzt müssen wir nur noch unseren neuen Webhook-Knoten öffnen. Zunächst ändern wir den Anfragetyp von GET auf POST. Wir sehen, dass wir (wieder) unser persönliches Zugriffstoken im Authorization-Schlüssel im Header übergeben müssen. Aber jetzt müssen wir auch ein zweites Feld übergeben. Fügen wir Content-Type hinzu, um anzugeben, dass wir json mit der Anfrage senden. Und schließlich übermitteln wir unsere Daten im Body mit einem Objekt, das Datensätze von Kunden enthält.

Example of POST request webhook nodeExample of POST request webhook node

Lassen Sie uns zunächst einen Testkunden durchlaufen. Sagen wir, Miss Piggy.

Example of sending Miss Piggy customer to AirtableExample of sending Miss Piggy customer to Airtable

Wenn wir nun auf Test Request klicken, sollte ein neuer Eintrag in Airtable erscheinen.

New entry in Airtable; Miss PiggyNew entry in Airtable; Miss Piggy

Aber wir wollen nicht Miss Piggy in unsere Datenbank aufnehmen! Wir wollen unseren tatsächlichen Benutzer hinzufügen. Sie könnten hier nach dem Namen und der Nummer des Benutzers fragen, und wenn Sie mehr Informationen benötigen, müssen Sie hier wahrscheinlich einige Sammel-Eingabeknoten verwenden. In dieser Anwendung geht es aber nur um den Namen und die Nummer des Benutzers. Dafür können wir die eingebauten Systemparameter von AI Studio verwenden! Wir aktualisieren also Miss Piggys Namen und Telefonnummer mit den Systemparametern $PROFILE_NAMEund $SENDER_PHONE_NUMBER. Unser Request Body sieht jetzt so aus:

Example of POST request with dynamic variablesExample of POST request with dynamic variables

Zum Schluss fügen wir eine Dankesnachricht mit einem Knoten "Nachricht senden" hinzu. Und nun können wir diesen Ablauf testen:

Testing Our Completed Flow 2Testing Our Completed Flow 2

Schlussfolgerung

Jetzt haben Sie gesehen, wie AI Studio mit einer benutzerfreundlichen Airtable-Datenbank implementiert werden kann. Was werden Sie mit Ihren neuen Fähigkeiten bauen? Bitte lassen Sie es mich wissen auf Twitter oder im Vonage Community Slack (wir haben sogar einen eigenen Kanal für AI Studio). Ich bin wirklich daran interessiert, zu sehen, was Sie mit Low Code bauen!

Teilen Sie:

https://a.storyblok.com/f/270183/384x384/e4e7d1452e/benjamin-aronov.png
Benjamin AronovAdvokat für Entwickler

Benjamin Aronov ist ein Entwickler-Befürworter bei Vonage. Er ist ein bewährter Community Builder mit einem Hintergrund in Ruby on Rails. Benjamin genießt die Strände von Tel Aviv, das er sein Zuhause nennt. Von Tel Aviv aus kann er einige der besten Startup-Gründer der Welt treffen und von ihnen lernen. Außerhalb der Tech-Branche reist Benjamin gerne um die Welt auf der Suche nach dem perfekten Pain au Chocolat.