https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-farewell-app-using-vonage-ai-studio-and-notion-as-a-database/farewell-app_ai-studio.png

Erstellen einer Farewell App mit Vonage AI Studio und Notion als Datenbank

Zuletzt aktualisiert am December 19, 2023
#ai-studio
#low-code

Lesedauer: 4 Minuten

Nachstellung von S7E22 von The Office (Vonage-Ausgabe)

War sonst noch jemand nicht okay nach Staffel 7 Folge 22 von The Office?

SPOILER ALERT!

In "Goodbye, Michael" sollte es ursprünglich darum gehen, dass Michael Scott wegen eines Geschäftsfehlers von Dunder Mifflin gefeuert wird (Langweilig!). Stattdessen haben die Autoren beschlossen, unsere Herzen mit dieser extrem süßen Folge herauszureißen, in der Michael die Firma verlässt, um zu seiner Verlobten nach Colorado zu ziehen.

Bevor er geht, gibt er jedem seiner Mitarbeiter ein besonderes Abschiedsgeschenk. Ich habe zwar nicht annähernd so viel getan, als ich mein früheres Unternehmen verließ, aber ich habe eine App entwickelt, mit der meine ehemaligen Kollegen ihre Namen an eine virtuelle Telefonnummer senden konnten und eine persönliche Nachricht erhielten, die ich für jeden von ihnen geschrieben hatte. Das war eine aufmerksame Art, mich zu verabschieden und sie wissen zu lassen, wie sehr ich ihre Hilfe in diesem Sommer zu schätzen wusste.

Ich würde Ihnen gerne zeigen, wie Sie dieses Projekt mit Vonage AI Studio und Notion nachbauen können. Lassen Sie uns eintauchen und loslegen!

Voraussetzungen

  • a Vonage Entwickler-Konto

  • a Notion-Konto um unsere Datenbank zu erstellen

    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.

Vonage AI Studio einrichten

Sobald dies geschehen ist, gehen Sie zu Ihrem API-Dashboard und finden Sie auf der linken Seite ERSTELLEN & VERWALTEN > AI-Studio > Gehe zu AI Studio > Agent erstellen. Sie können jeden Agententyp auswählen, aber für unser Beispiel werden wir ihn mit WhatsApp.

Füllen Sie alle erforderlichen Angaben aus:

  • Region: Wo wird Ihr Agent normalerweise eingesetzt - in den USA oder in Europa?

  • Name des Vertreters: Geben Sie Ihrem Agenten einen eindeutigen Namen, der für Sie von Bedeutung ist.

  • Sprache: Wählen Sie die Sprache Ihres Agenten.

  • Zeitzone: Wählen Sie die Zeitzone, in der Ihr Agent arbeiten soll.

Für Vorlagen werden wir Von Grund auf neu beginnen.

Für den Fall, dass es sich um einen Eingehender Anruf denn wir sind diejenigen, die unserem Agenten eine SMS schicken.

Erstellen einer Datenbank mit Notion

Als Best Practice werden wir die tatsächlichen Namen der Mitarbeiter, Nachrichten und Empfänger-E-Mails in einer Datenbank speichern - für dieses Beispiel werden wir Notion!

  1. Weiter zu Begriff.

  2. Klicken Sie auf die Schaltfläche (+), um eine Seite hinzuzufügen.

  3. Klicken Sie auf der neuen Seite unter DATENBANK auf "Tabelle".

  4. Geben Sie die verschiedenen Elemente, die Sie benötigen, in jede Spalte und die entsprechenden Eigenschaften ein. Wir haben Spalten mit den Titeln Coworker, Message und Email.

Screenshot of a Notion table titled 'Goodbye, Michael' with three columns labeled 'Coworker,' 'Message,' and 'Email.' There are entries for three coworkers: Dwight, Kevin, and Darryl. Dwight's message is a humorous, self-praising speech; Kevin's is a short, reflective statement; and Darryl's message mentions giving the only copy of 'Somehow I Manage,' unfinished. Each entry includes a corresponding email address at dundermifflin.com.Database in Notion

Definieren Sie den Gesprächsfluss

Jetzt kommt der spaßige Teil! Mit der benutzerfreundlichen Oberfläche von Vonage AI Studio können Sie den Gesprächsablauf Ihres Chatbots gestalten. Es handelt sich um eine Drag-and-Drop-Einrichtung, d. h. Sie brauchen keine Programmierkenntnisse, um loszulegen. Sie können verschiedene Dialogknoten hinzufügen und Antworten definieren.

Unser Ablauf sollte folgendermaßen aussehen:

A flowchart of a conversational interface process. It starts with 'START,' then moves to a 'ASK NAME' step, which is a text input with a note 'Unexpected Input Type.' Next is 'Webhook 1' showing a '2XX' status but marked as 'Failed.' The flow then splits; one path goes to 'SEND EMAIL' with a variable '$RETURNED_EMAIL,' and the other path leads to 'END CONVERSA...' indicating the end of the conversation. The overall layout suggests a sequential process with a conditional branch for sending an email or ending the conversation.Conversation Flow

NODES > Konversation > Eingaben sammeln Der virtuelle Agent stellt eine Frage an den Benutzer.

  • Name des Knotens: ASK NAME.

  • Eingabeaufforderung: "Ich ziehe nach Colorado, um mit Holly ein neues Leben zu beginnen." Antworten Sie mit Ihrem Namen, um Ihre personalisierte Nachricht zu erhalten.

  • Aufforderung zur Wiederholung: Versuchen wir es noch einmal. Antworten Sie mit Ihrem Namen.

  • Erwartete Eingabe: Text

NODES > Integrationen > Webhook

  • Methode: POST

  • Abfrage-URL: https://api.notion.com/v1/databases/<Datenbank_id>/query_ Um eine Datenbank-ID zu findenzu finden, navigieren Sie zu der Datenbank-URL in Ihrem Notion-Arbeitsbereich. Die ID ist die Zeichenfolge in der URL, die zwischen dem Schrägstrich nach dem Arbeitsbereichsnamen (falls zutreffend) und dem Fragezeichen steht. Die ID ist eine 32-stellige alphanumerische Zeichenkette.

  • Kopfzeilen (HTTP Header : Wert)

    • Autorisierung : Überbringer $NOTION*ACCESS_TOKEN

    • Notion-Version : 2022-06-28

    • Inhalt-Typ : anwendung/json* Um Ihren $NOTION_ACCESS_TOKEN zu findenzu finden, gehen Sie durch die Autorisierung Prozess für eine interne Integration auf Notion._ -Response Mapping Antworttyp: JSON Objekt-Pfad: Nachdem Sie die obigen Informationen in unseren Webhook-Knoten eingegeben haben, stellen Sie sicher, dass der Webhook funktioniert, indem Sie oben rechts auf die Schaltfläche "Anfrage testen" klicken. Unter Antwort sehen Sie, dass alle Daten aus unserer Notion-Tabelle zurückgegeben werden. Verwenden Sie die Antwort, definieren Sie den Objektpfad und ordnen Sie ihn einem Parameter zu.

Screenshot of a 'Response Mapping' section from an application interface with a drop-down menu selecting 'JSON' as the response type. There are three object paths listed with corresponding parameters. The first is 'results[0].properties.Message.rich_text[0].text.content' mapped to a parameter '$RETURNED_MESSAGE'. The second is 'results[0].properties.Email.email' mapped to '$RETURNED_EMAIL'. The third is 'results[0].properties.Coworker.title[0].plain_text' mapped to '$RETURNED_COWORKER'. The layout is a structured table indicating how JSON response elements correspond to internal parameters of the system.Response Mapping

Parameter: Erstellen Sie für jeden Objektpfad einen Parameter. Wählen Sie @sys.any für die Entität eines jeden.

A screenshot showing the 'Custom Parameters' settings in the 'Webhook 1' configuration panel. There are four parameters listed: 'INPUT,' 'RETURNED_COWORK...,' 'RETURNED_EMAIL,' and 'RETURNED_MESSAGE.' Each has an associated entity designated as '@sys.any' and a field for entering a value. The list suggests placeholders for user input and returned data from the system, awaiting specific values to be entered or retrieved during operation.Parameters

NODES > Aktion > E-Mail senden

  • An: $RETURNED_EMAIL

  • Betreff: Auf Wiedersehen von Michael Scott

  • Körper: $RETURNED_MESSAGE

NODES > Aktionen > Konversation beenden

Ausführen der App

Klicken Sie im oberen Bereich von Vonage AI Studio auf "Tester" und dann auf "Chat starten". Geben Sie einen Namen aus Ihrer Datenbank ein.

A screenshot of a chat interface in testing mode, labeled 'Tester' and 'Chat'. The conversation starts with an agent's message timed at 3:47 PM stating, 'Well, I'm moving to Colorado to start my new life with Holly.' prompting a reply with the user's name for a personalized message. The user responds with 'Darryl' at the same timestamp. Subsequent system messages indicate 'Webhook was executed successfully' and 'Email sent successfully,' followed by 'Conversation Ended.' The interface is designed to simulate a user interaction with an automated chatbot agent.Test Darryl

Sie sollten dann eine E-Mail mit dem entsprechenden Inhalt erhalten!

A screenshot of an email interface with the subject 'Goodbye from Michael Scott' in the inbox. The sender is 'dont-reply@ai.vonage.com'. The body of the email reads, 'I would like to give you the only copy of "Somehow I Manage", unfinished. If there's anybody here who can finish it, it's you.' Below the message, there are options to 'Reply' or 'Forward' the email.Email Received

Bauen Sie Ihre eigene "gute alte Zeit

Ein Abschied muss nicht gewöhnlich sein. Mit einem Hauch von Kreativität und der Verwendung von Vonage AI Studio und Notion als Datenbank können Sie Verabschiedungen herzlich und unvergesslich gestalten. Also, machen Sie weiter und verbreiten Sie Freude mit personalisierten Nachrichten, die sie ein letztes Mal zum Lächeln bringen werden.

Im Finale von The Office sagt Andy Bernard: "Ich wünschte, es gäbe eine Möglichkeit zu wissen, dass man in der guten alten Zeit ist, bevor man sie tatsächlich verlassen hat". Du kannst dich gerne unserem "Büro" von Entwicklern auf Slack und folgen Sie uns auf X, früher bekannt als Twitter. Wenn Sie eine ähnliche Anwendung entwickeln, teilen Sie sie bitte und taggen Sie mich - Ich würde gerne etwas über Ihr Saisonfinale hören.

Teilen Sie:

https://a.storyblok.com/f/270183/384x384/b68093ec17/diana-pham.png
Diana PhamAdvokat für Entwickler

Diana ist Entwicklungsbeauftragte bei Vonage. Sie isst gerne frische Austern.