https://a.storyblok.com/f/270183/44607/83f7686422/ai-studio-airtable.png

Aproveitando o Low Code: AI Studio com o Airtable

Publicado em April 20, 2023

Tempo de leitura: 8 minutos

Introdução

Há alguns meses, estive em Dubai para um hackathon. O motorista do táxi do hotel foi muito simpático e queria garantir que eu aproveitasse ao máximo minha viagem de dois dias. Ele começou a oferecer todos os tipos de serviços, como me buscar no início e no final de cada dia do evento, fazer diferentes tipos de passeios especializados pela cidade ou até mesmo uma viagem a Abu Dhabi.

Ele me deu seu cartão de visita com um código QR para eu enviar uma mensagem para ele no WhatsApp. Eu escaneei o código e fui direcionado para uma janela de bate-papo com o Account dele. Mas foi só isso! Nenhum dos serviços legais sobre os quais ele acabara de me falar estava disponível para os usuários. Então, meu lado empresarial entrou em ação e eu sugeri a ele: “Sabe, você pode realmente ajudar a capacitar seus clientes com o AI Studio da Vonage!”

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

No ano passado, a Vonage lançou AI Studio, uma plataforma NoCode/LowCode que permite que qualquer pessoa crie agentes de IA conversacional rapidamente! Casos típicos de uso da IA conversacional são os chatbots para atendimento ao cliente ou marketing. Mas os chatbots podem melhorar a experiência do usuário em muitas outras Applications!

Neste tutorial, vou mostrar como criar um agente do AI Studio para o WhatsApp destinado a esse serviço de táxi, que utiliza o Airtable como banco de dados de back-end para armazenar e acessar informações.

Yalla, vamos lá!

Pré-requisitos

  • Conta de desenvolvedor da Vonage. Para usar o AI Studio, você precisará de uma conta de desenvolvedor da Vonage. Veja abaixo as instruções para começar.

  • Account do Airtable - cadastre-se aqui. Usaremos o Airtable como nosso banco de dados de back-end.

  • Postman Account – cadastre-se aqui. Usaremos o Postman para enviar solicitações na seção avançada deste tutorial.

  • Opcional: Account no Miro – cadastre-se aqui. Eu uso o Miro para criar maquetes dos meus agentes do AI Studio. Mais informações sobre isso abaixo.

Configuração

Comece com uma maquete

Antes de criar qualquer agente no AI Studio, recomendo fortemente que você planeje o fluxo do seu agente usando uma ferramenta visual. Você pode ler mais sobre como criar uma maquete de IA conversacional de alta fidelidade aqui.

Em nosso aplicativo, permitiremos que os usuários consultem os preços de táxi para destinos populares e também adicionem suas informações de contato para se inscreverem e receberem futuras ofertas de táxi. A maquete desses fluxos fica assim:

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

Agora que já temos uma ideia clara do que queremos construir, vamos começar a construir!

Criar um banco de dados no Airtable

Antes de começarmos a usar o AI Studio, precisamos configurar nosso banco de dados do Airtable. O Airtable é uma ferramenta incrível, parecida com o Excel, mas com superpoderes! A documentação é fantástica e um ótimo ponto de partida.

Assim que você se sentir à vontade, vai querer criar uma nova base. Vamos chamá-la de “AI Taxi Demo”. Nessa base, teremos duas tabelas: Destinos e Clientes.

No que diz respeito aos destinos, vamos manter as coisas simples. Haverá apenas dois campos: Nome e Preço.

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

Da mesma forma, para as tabelas de Clientes, usaremos apenas dois campos: Nome e Número_de_telefone:

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

Podemos inserir alguns dados fictícios nessas tabelas, para que nossas chamadas de API retornem valores. Os números de telefone devem ser inseridos apenas com dígitos, sem o sinal de mais (+).

Criar um novo agente

Agora que já configuramos nosso banco de dados, podemos começar a desenvolver nosso agente no AI Studio, que irá interagir com o usuário e, em seguida, enviar e receber dados do Airtable. Siga as instruções encontradas na documentação do AI Studio aqui. Existem três opções importantes para o nosso agente; selecione:

  • Tipo: WhatsApp

  • Modelo: Começar do zero

  • Evento: Inbound

Recuperação de dados do Airtable

Agora, vamos começar a criar nossos fluxos. O melhor é que, basicamente, já fizemos todo o trabalho! Só precisamos transformar nosso fluxograma vertical em um agente horizontal.

Nossas etapas:

  1. Nó “Enviar mensagem”: enviar uma mensagem de boas-vindas: “Bem-vindo ao AI Taxi”

  2. Nó “Coletar Entrada”: pergunte ao usuário: “Em que posso ajudar?”. A resposta do usuário será armazenada em um parâmetro chamado TOPIC.

Os parâmetros são como variáveis, que podem ser acessados em todo o agente. Você pode ler mais sobre parâmetros aqui. Assim como as variáveis no código têm tipos de dados, os parâmetros têm entidades. Para simplificar, todos os parâmetros serão do tipo @sys.any.

  1. Nó de classificação: classificar o TOPIC parâmetro. Teremos duas intenções: Retrieve Prices e Sign Up For Promotions. Aqui, poderíamos ter usado uma condição simples, já que, neste exemplo, temos apenas duas intenções. No entanto, a beleza e o poder do AI Studio estão no recurso de Classificação. Queremos dar aos nossos usuários a liberdade de inserir qualquer solicitação que desejarem e escrevê-la naturalmente. Você pode ver como o nó de Classificação, com as Expressões do Usuário sugeridas, é poderoso e fácil de usar; aqui.

  2. Nó de coleta de entrada: pergunte ao usuário: “Para onde você gostaria de ir?”. A resposta do usuário será armazenada em um parâmetro chamado DESTINATION.

Agora temos o termo de pesquisa que queremos enviar ao Airtable para receber de volta as informações de preço armazenadas. Mas como podemos passar isso para o Airtable? O que é ótimo no Airtable é a API integrada para cada base e a documentação útil. Na nossa base de demonstração do AI Taxi, clique em “Ajuda” no canto superior direito. Em seguida, na barra lateral, bem na parte inferior, você encontrará Documentação da API. O mais legal é que o Airtable gera a solicitação necessária para você! Aqui você encontrará a solicitação curl pré-criada, que terá mais ou menos esta aparência:

Example of CURL request to Airtable API

Agora precisamos adicionar isso ao nosso agente do AI Studio. Então, vamos adicionar um nó Webhook que nos permita fazer solicitações à API REST. Saiba mais sobre os nós Webhook aqui.

No nó, vamos adicionar nosso endpoint no campo “URL da solicitação”:

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

Você também precisará adicionar seu token de acesso pessoal do Airtable nos parâmetros de cabeçalho, na guia “Cabeçalhos”. Saiba como gerar e usar seu token de acesso pessoal aqui. Certifique-se de definir os escopos: data.records:read e data.records:write. Esse token só pode ser visualizado uma vez; portanto, salve-o em um local seguro para poder copiá-lo e colá-lo posteriormente.

Agora, seu nó de webhook deve estar assim:

Example of Lookup Destination Webhook NodeExample of Lookup Destination Webhook Node

Podemos testar se nosso webhook está funcionando clicando no test request botão no canto superior direito. Você verá que ele retorna todos os nossos Destinos na tabela. Você pode ver na aba “Resposta” quais dados serão retornados:

Example of Destinations Lookup ResponseExample of Destinations Lookup Response

Mas não queremos todos os destinos; queremos poder fazer buscas com base no que o usuário digitar. Felizmente para nós, o Airtable tem alguns recursos de busca bem legais. Por exemplo, usei o filterByFormula para criar uma pesquisa global na tabela. Vamos usar filterByFormula aqui para pesquisar na coluna “Destino”. E agora nosso nó de webhook ficou assim:

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

Você deve clicar na guia “Parâmetros de consulta” e preencher o parâmetro e o valor; escrever diretamente no caminho da URL não salvará as alterações.

Se você estiver enfrentando dificuldades com sua solicitação, tente codificar seu $DESTINATION parâmetro com a ferramenta de codificação do Airtable. A codificação da nossa solicitação deve ficar assim:

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

Agora podemos executar o teste novamente e ver que a solicitação retorna um objeto que, em seu interior, contém algo chamado “records”, que, por sua vez, contém uma matriz de objetos de registro.

Example of Filtered ResponseExample of Filtered Response

AI Studio nos permite processar respostas de API com o Recurso de Mapeamento de Respostas . Precisamos mapear o objeto retornado a um parâmetro que poderemos usar dentro do AI Studio. Podemos fazer isso da seguinte maneira:

Example of Response MappingExample of Response Mapping

E agora que mapeamos nossos dados de resposta, podemos executar o teste e ver alguns valores sendo retornados aos nossos parâmetros!

Example of Response Mapping Test ResultsExample of Response Mapping Test Results

Conseguimos! Conectamos nosso agente do AI Studio aos nossos dados do Airtable e agora podemos usar essas informações no nosso agente. Resta apenas um último passo: usar nossos dados no agente e criar uma mensagem bacana para o nosso usuário:

Example of Send Price NodeExample of Send Price Node

Se abrirmos nosso ferramenta de teste, agora podemos ver toda a jornada do usuário para solicitar o preço de um táxi.

Testing Our Completed FlowTesting Our Completed Flow

Envio de dados para o Airtable

Agora que já nos conectamos ao nosso banco de dados do Airtable e começamos a receber informações, enviar informações vai ser moleza!

Vamos começar de novo a partir do nosso nó “Classificação de Tópicos”. Vamos adicionar uma nova intenção chamada “Inscrever-se para receber promoções” e incluir algumas expressões do usuário. Algo assim:

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

Agora estamos prontos para nos conectarmos ao nosso webhook. Então, vamos dar uma olhada na documentação do Airtable novamente. Ela nos mostra exatamente como formatar nossa solicitação. Encontramos na solicitação gerada algo assim:

Example of Airtable POST RequestExample of Airtable POST Request

Agora só precisamos abrir nosso novo nó de webhook. Primeiro, alteramos o tipo de solicitação de GET para POST. Podemos ver que precisamos (novamente) passar nosso token de acesso pessoal na chave “Authorization” do cabeçalho. Mas agora também temos um segundo campo a ser preenchido. Vamos adicionar o “Content-Type” para indicar que estamos enviando JSON com a solicitação. E, por fim, vamos passar nossos dados no corpo da solicitação por meio de um objeto que contém registros de clientes.

Example of POST request webhook nodeExample of POST request webhook node

Primeiro, vamos inserir um cliente de teste. Digamos, a Miss Piggy.

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

E agora, se clicarmos em “Testar solicitação”, deveríamos ver uma nova entrada no Airtable.

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

Mas não queremos adicionar a Miss Piggy ao nosso banco de dados! Queremos adicionar nosso usuário real. Agora, você poderia solicitar o nome e o número do usuário aqui e, se precisar de mais informações, provavelmente precisará usar alguns nós de coleta de dados. Mas, para este aplicativo, só nos importamos com o nome e o número do usuário. Podemos usar os parâmetros de sistema integrados do AI Studio para isso! Então, atualizamos o nome e o número de telefone da Miss Piggy com os parâmetros de sistema $PROFILE_NAMEe $SENDER_PHONE_NUMBER. Assim, o corpo da nossa solicitação fica assim:

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

Por fim, vamos adicionar uma mensagem de agradecimento usando um nó “enviar mensagem”. E agora podemos testar esse fluxo:

Testing Our Completed Flow 2Testing Our Completed Flow 2

Conclusão

Agora você já viu como implementar o AI Studio com um banco de dados do Airtable fácil de usar. O que você vai criar com seus novos conhecimentos? Conte para mim no Twitter ou na Slack da Comunidade Vonage (temos até um canal dedicado ao AI Studio). Estou muito curioso para ver o que você está criando com o Low Code!

Compartilhar:

https://a.storyblok.com/f/270183/384x384/e4e7d1452e/benjamin-aronov.png
Benjamin AronovDeveloper Advocate

Benjamin Aronov is a developer advocate at Vonage. He is a proven community builder with a background in Ruby on Rails. Benjamin enjoys the beaches of Tel Aviv which he calls home. His Tel Aviv base allows him to meet and learn from some of the world's best startup founders. Outside of tech, Benjamin loves traveling the world in search of the perfect pain au chocolat.